共计 2664 个字符，预计需要花费 7 分钟才能阅读完成。
目录
一、HTML 概述
二、HTML 基本语法
1. 声明
2.HTML 文件的基本样式
3. 标签
三、基本常用标签
1. 标题标签
2. 段落标签
3. 换行标签
4. 列表
5. 超链接
6. 图像标签
7. 特殊转义符
四、表格
1. 表格的基本构成标签
2. 表格的基本结结构
3. 表格常见属性
五、表单
1. 表单基本格式
2. 表单——文本
3. 下拉框、多行文本域、按钮
什么是前端？通俗的来讲，我们每天通过电脑浏览器浏览的任何一个网页都是经过前端编码设计出来的。例如大家平时经常光顾的淘宝、京东等网页，如下图：
他的背后实际上隐藏着大量的前端代码：
那么我们作为一个合格的码农，该如何实现这样的一个网页的编写呢？接下来，我将对 web 前端的编码知识进行详细介绍！
一、HTML 概述
1.HTML：超文本标记语言（HyperText Markup Language）
超文本：是指页面内可以包含图片、链接、视频、声音等内容。
标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）
2. 浏览器根据不同的 HTML 标签，解析成我们现在所看到的网页。
二、HTML 基本语法
1. 声明
html4 的文档声明：
/p>
“http://www.w3.org/TR/html4/loose.dtd”>
html5 的文档声明：
注：如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现。
2.HTML 文件的基本样式
一个空的 html 文档格式如下：
3. 标签
HTML 中的标记就是指标签。
HTML 使用标记标签来描述网页。
（1）结构
① 闭合标签：标签内容标签名> （有标签内容）
② 自闭合标签：（无标签内容）
（2）标签属性
标签可以拥有属性。属性进一步说明了该标签的显示或使用特性
① 属性的格式：属性名 =“属性值”
// 例如：② 属性的位置：xxx 标签名>
// 例如：我是一个 HTML 文档
③ 添加多个属性：xxx 标签名>
// 例如：我是一个 HTML 文档
三、基本常用标签
标签我们一般放在中使用
1. 标题标签
从
内容
……
内容
，控制内容作为标题的字体大小
你好
你好
你好
你好
你好
你好
效果如下：
2. 段落标签
内容
，他体现在无论内容里有多少信息都独占一行，后面的输入只能新起一行在网页中存放。
你好
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。效果如下：（我们可以看到
标签中的 “你好”独占一行）
3. 换行标签
顾名思义，就是对内容进行换行操作。例如这里我们写两句古诗
柳暗花明又一村
效果如下：
4. 列表
（1）有序列表
格式：
- 你
- 好
- 呀
效果如下：
（2）无序列表
格式：
- 你
- 好
- 呀
效果如下：
5. 超链接
：HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。
href (Hypertext Reference 超文本引用) 规定链接指向的页面的 URL(页面地址)
URL(Uniform Resource Locator)统一资源定位符
效果如下：（点击 ” 百度 “，跳转到百度网页）
6. 图像标签
格式：
效果如下：
7. 特殊转义符
在 HTML 中预留了一些字符。这些预留字符是不能在网页中直接使用的。
比如, 我们不能直接在页面中使用号，因为浏览器会将它解析为 html 签。
例如： 会被解析为 b 标签，空格, 再多的空格都会当一个空格处理。
为了可以使用这些预留字符，我们必须在 html 中使用字符转义。
以下是一些常见转义符：
四、表格
1. 表格的基本构成标签
table 标签：表格标签
tr 标签：表格中的行
th 标签: 表格的表头
td 标签：表格单元格
2. 表格的基本结结构
定义表格
定义表行
定义表头
定义单元格
实例代码如下：
表头内容（内容字体加粗）
表头内容（内容字体加粗）
表单元格内容
表单元格内容
效果如下：
3. 表格常见属性
width —— 表格内容宽度
height —— 表格内容高度
cellspacing —— 两个单元格之间的距离
cellpadding ——
align ——（center，left，right）分别控制单元格内容在单元格的中间、左对齐、右对齐位置
valign ——（top，middle，bottom）分别控制单元格内容在单元格的顶部、中间、底部位置
rowspan —— 跨多行合并，位置随相应的 td 位置，合并几行就删除相应 tr 里的 td
colspan —— 跨多列合并，合并位置随 td 位置，要合并几列就删除后面几个 td
这里对 rowspan 和 colspan 进行演示:
效果如下：（得到一个可自定义样式的表格）
五、表单
网页表单中有许多可以输入或选择的组件，用户可以在表单中填写信息，最终提交表单，把客户端数据提交至服务器。
1. 表单基本格式
2. 表单——文本
密码框基本语法
单选按钮基本语法
效果如下：
3. 下拉框、多行文本域、按钮
（1）语法格式
① 下拉框基本语法
下拉框的 name,id, 事件等需要在 select 中定义，而 value 需要在 option 中定义
② 多行文本域基本语法
textarea >
③ 按钮基本语法
（分别表示按钮类型、按钮名称、按钮上显示的名称）
实例代码如下：
效果如下：
以上就是关于 web 前端的 HTML 部分的所有知识分享了，如果大家有疑问或是更好的内容建议，请在评论区一起探讨吧！
原文地址: web 前端——HTML（一看就会写自己的小网页）
