HTML知识总结
HTML概述
HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
它是⼀种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文可以使用记事本、写字板、HBuilder、Sublime 、VScode等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
HTML文档的整体结构
HTML的内容是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间要有正确的嵌套。
通常一个HTML网页文件包含多个部分，如：标记头区<head>……</head>，内容区<body>……</body>，网页区<html>……</html>等等，一般来讲，当我们使用编辑器新建一个以html结尾的文件时，编辑器会自动帮你生成一些HTML文档必要的标签【注：HbuilderX就是如此】，大致结构如下：
<!DOCTYPE html><!-- 声明文档类型。出于历史原因需要，现在可有可无。-->
<html><!--这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。-->
<head><!-- html文档的头部标签 -->
<meta charset="utf-8"><!-- 设置文档使用utf-8字符集编码 -->
<title>页面标题</title>
</head>
<body>
<!-- 网页内容区 -->
</body>
</html>
基础语法
在HTML网页文档中，说直白一点，整个网页就是一堆标签，但是，这一堆标签并不是乱放的，他们是有结构，有含义地互相嵌套，接下来，简单地说明一下在HTML中，最基础的语法结构。【注：HTML的语法结构相比于c/c++等编程语言的语法可简单多了。】
1.双标签：<title>……</title>，开始标签为<title>，结束标签为</title>，值得注意的是，结束标签比起始标签多了一个斜杠，省略号中间的内容就是元素的内容，一般都是要表达的文本本身，整个标签合并起来才叫一个完整的元素。
2.双标签属性：在标签上面加上属性是比较简单的，比如：<body bgcolor="red">…</body>，直接在开始标签里面以一个空格隔开(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)，并写上 属性=属性值（属性值由一对引号 “” 引起来）即可。
3.单标签(有的地方也叫做“空元素”，本质上是一样的)：例如：<br/>,<hr/>,<br>等，在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br > 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。
4.单标签属性：同双标签加属性一样，故在此就不再赘述，举例说明，比如:<hr width="800" />。
5.注释：与c/c++，java等编程语言不同的是，在HTML中，将一段内容变成注释的方式为如下：<!--内容-->，在VScode和HbuilderX中，可以使用快捷键ctrl+/快速生成注释。
补充一点：HTML 不区分标签的大小写，但建议全部使用小写！
常用标签
标题和水平线
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，（注意： 不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。） 例如:<h1>This is heading 1</h1>。hr 标签在 HTML 页面中创建⼀条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在HTML 中，hr 标签没有结束标签，水平线标签是<hr />，它的常用属性有：align（对齐方式），size，width等等。
段落和换行
p 标签定义段落。p 元素会自动在其前后创建⼀些空白。浏览器会自动添加这些空间，我们也可以在样式表中规定。比如：<p>这是一个段落</p>。br标签为换行符号， br 标签是空元素（意味着它没有结束标签，因此这是错误的：<br></br>，正确的使用：<br/>）。
列表
无序列表
无序列表由 ul 和 li 标签组成。默认使用实心圆点作为每项的标志。
<ul>
<li></li>
<li></li>
......
</ul> <ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
| 属性 | Value | 描述 |
|---|---|---|
| type | disc，circle，square | 规定列表的项⽬符号类型。可以使⽤样式取代。dise：实⼼圆（默认）。circle：空⼼圆。square：⽅块 |
有序列表
有序列表由 ol 和 li 标签组成，默认使用数字作为每项的标志。
<ol>
<li></li>
<li></li>
......
</ol> <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
| 属性 | Value | 描述 |
|---|---|---|
| type | 1， a， A， i， I | 规定在列表中使用的标记类型。 1：用数字形式表示序号（默认） a：用小写字母表示序号 A：用大写字母表示序号 i：用小写罗马数字表示序号 I（⼤写i）：用大写罗马数字表示序号 |
div和span
div
div 是⼀个块级元素，通常与css配合使用，用于布局。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与
其关联。
div 是⼀个块级元素。这意味着它的内容自动地开始⼀个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。
<div>content</div>
span
span 标签被用来组合文档中的行内元素 ，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 。
<span>content</span>
格式化标签
pre
定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。比如：
<!-- pre标签中的内容将保持格式不变 -->
<pre>
从明天起，做一个幸福的人
喂马、劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
从明天起，和每一个亲人通信
告诉他们我的幸福
那幸福的闪电告诉我的
我将告诉每一个人
给每一条河每一座山取一个温暖的名字
陌生人，我也为你祝福
愿你有一个灿烂的前程
愿你有情人终成眷属
愿你在尘世获得幸福
我只愿面朝大海，春暖花开
</pre>
文本标签
比如： b（粗文本）、i（斜体文本）、u（下划线文本）、del （中划线文本）、sub（下标文本）、sup（上标文本）等等。
a标签和图片
a标签（超链接）
这个标签在很多网页里面经常使用，通常是用来从一个文档页面跳转到从另一个文档页面。
a 元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有href属性，a标签内的内容与普通文本没有区别，也就失去了超链接的功能。语法格式如下：
<a href="https://www.baidu.com/" target="_blank">百度</a>
说明：1. href即为需要跳转到的URL，可以是其他页面，或者当前页面。2. target规定在何处打开链接文档，比较常用的target值有以下：_blank ：开启新页面显示页面；_self ：当前页面显示跳转到页面，默认值。
补充：锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。使用如下：
<!-- 文档其余部分 -->
<h2 id="top">页首</h2>
<!-- 文档其余部分 -->
<a href="#top">返回顶部</a>
<!-- 文档其余部分 -->
图片
<img>标签表示向当前的html文档嵌入一幅图片，使用如下：
<img src="" alt="">
说明：1. src属性为该标签中很重要的属性，即图片文件的路径。2. alt属性当获取图片出现问题时显示的文字（占位符）。
表格和表单
表格
使用table标签来定义表格。<tr>表示行(tr元素包含⼀个或多个th或td元素), <td>表示行中的单元, <th>是表头的单元（将会加粗显示），使用方式如下：
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr >
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
表单
form 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元
素。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。表单元素主要有：input元素，textarea元素，label元素，button元素等等。
<form action="http://www.baidu.com" method="get" id="myform" name="myform">
编号：<input type="hidden" name="userId" value="1" /> <br>
<label for="userName">姓名</label>：<input type="text" value="zhangsan" id="userName" name="userName" /><br>
密码：<input type="password" name="userPwd" maxlength="6" id="upwd" /><br>
性别：男 <input type="radio" name="userSex" value="man" checked="checked"/>
女 <input type="radio" name="userSex" value="woman" /> <br>
爱好：唱歌<input type="checkbox" name="userHobby" value="sing" />
跳舞<input type="checkbox" name="userHobby" value="dance" checked />
说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled" /><br>
生日：<input type="date" name="userDate" /><br>
头像：<input type="file" name="userHead" /><br>
简介：<textarea name="remark" rows="5" cols="50">11111</textarea><br>
城市：
<select name="city" multiple="multiple" size="3" >
<option >请选择城市</option>
<option value="Beijing" disabled="disabled">北京</option>
<option value="Shanghai" selected="selected">上海</option>
<option value="Hangzhou">杭州</option>
<option value="Shenzhen">深圳</option>
</select>
<br>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<!-- <input type="image" src="img/bd.png" /> -->
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</form>
其他
块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
行内元素
元素和元素一个接一个进行显示，不会新起一行。
<span>姓名：</span>
<input name="username">
常用的字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>）等，这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
实体名称对大小写敏感！常用的字符实体有以下：
扫一扫
2501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
