学习前端第一关

2024-06-16 10:12

本文主要是介绍学习前端第一关,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

作者:周棋洛

文章目录

  • 前言
  • 超文本标记语言?
  • 编辑器推荐
  • 手刃一个网页,Hello World!
  • 网页骨架讲解
  • 标签学习
    • HTML标题
    • HTML段落
    • HTML换行
    • HTML居中
    • HTML水平线
    • HTML格式化
    • HTML注释
    • HTML链接

前言

网站并不是多么复杂的技术,今天这篇文章20分种带你从0到1写一个自己的网页

超文本标记语言?

超文本标记语言(英語:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

为什么不叫文本标记语言,就是通过一些规定好的标签来编写代码,构建网页,而超文本标记语言就是在前者的基础上,新增了媒体元素的使用,比如,有了图片,视频,音频,等等,不在是简简单单的文字了

编辑器推荐

工欲善其事必先利其器,这里优先推荐的是 微软的 VsCode,因为真的很棒,关键是免费开源

傻瓜式下载安装就好了,如果说有什么要注意的,大概就是,如果你是windows,注意一下操作系统,下载相应版本的,安装时,默认会装在c盘,如果c盘不是很充裕的小伙伴就需要注意以下安装路径的问题了,OK

这里小周就认为你已经安装好了,来,下面跟着小周魔鬼的步伐,点击插件,搜索相应插件进行安装
​​在这里插入图片描述
1.打开自动保存功能
在这里插入图片描述

2.插件安装

中文汉化插件
在这里插入图片描述

运行html网页插件(必装)
在这里插入图片描述
简单使用说明
在这里插入图片描述

手刃一个网页,Hello World!

编写相应代码
在这里插入图片描述
在浏览器中打开
在这里插入图片描述
打开后,会看到Hello World已经显示出来了,是不是很简单啊
在这里插入图片描述

网页骨架讲解

<!DOCTYPE html> 此标记定义文档类型和HTML版本

<html> 该标签包含完整的HTML文档,主要由 … 表示的头部和 … 标记表示正文组成

<head> 此标记代表文档的标题,该标题可以保留其他HTML标记,例如<title>,<link>

<title> <head>标记内使用<title>标记来提及文档标题

<body> 此标记表示文档的正文,其中保留了其他HTML标记

标签学习

HTML标题

HTML标题有六个级别,从大到小依次是,重要的信息可以使用h1标签语义明确
<h1>,<h2>,<h3>,<h4>,<h5>和<h6>
在这里插入图片描述

HTML段落

<p>标签提供了一种将文本组织为不同段落的方法, 文本的每个段落都应位于开始<p>和结束</p>标签之间
在这里插入图片描述

HTML换行

每当您使用<br />换行元素时,其后的所有内容将从下一行开始。
此标签是一个自闭和标签,因为它们之间没有任何内容在这里插入图片描述

HTML居中

使用<center>标签将任何内容放在页面或任何表格单元格的中心在这里插入图片描述

HTML水平线

一条水平线在这里插入图片描述

HTML格式化

如果你要在网页中插入代码,可以使用格式化标签,这样就可以保留原有的空格换行等
在这里插入图片描述

HTML注释

<!-- 注释 --> 注释里的内容不会解析执行
在这里插入图片描述

HTML链接

网页可以包含各种链接,这些链接可直接将您带到其他页面,甚至是给定页面的特定部分,这些链接称为超链接 <a href="XXX">超链接<a/>
在这里插入图片描述

这篇关于学习前端第一关的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1066177

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo