文本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| strong | strong | 粗体 abc |
| em | emphasize | 斜体 abc |
| sup | superscripted | 上标 (a+b)2 |
| sub | subsrcibted | 下标 H2SO4 |
| s | strikethrough | 删除线 |
| u | undeline | 下划线 牛逼 |
水平线/分割线 <hr>
自闭合标签
| 标签 | 说明 |
|---|---|
<meta/> | 定义网页信息（供浏览器查看） |
<link/> | 引入外部css文件 |
<br/> | 换行标签 |
<hr/> | 水平线标签 |
<img/> | 图片标签 |
<input/> | 表单标签 |
语义标签
html的标签是语义标签，方便人或者计算机理解网页结构，可能会帮助seo。学习HTML的目的并不是记住所有的标签，而是在你需要的地方能使用正确的语义化标签。把标签用在对的地方，这才是学习HTML的目的所在。
<header> header: 标签定义文档的页眉（介绍信息）。</header>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<article>文章1</article>
<article>文章2</article>
<article>文章3</article>
</section>
<aside>aside 的内容应该与附近的内容相关。</aside>
<footer>标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。</footer>
列表
ul: unordered list无序列表, ol : ordered list, 而且每一行都要用<li> 标签。ul元素的子元素只能是li，不能是其他元素。
无序列表
我的购物清单
<div>
我的购物清单
<ul>
<li>牛奶</li>
<li>辣条</li>
<li>酸奶
<ul>
<li>芒果味</li>
<li>草莓味</li>
<li>巧克力味</li>
</ul>
</li>
</ul>
</div>
- 牛奶
- 辣条
- 酸奶
- 芒果味
- 草莓味
- 巧克力味
有序列表
<div>
起床3件事情
<ol>
<li>睁开双眼</li>
<li>强迫自己坐起来</li>
<li>穿衣服</li>
</ol>
</div>
- 睁开双眼
- 强迫自己坐起来
- 穿衣服
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
- HTML
- CSS
- JavaScript
- jQuery
- Vue.js
定义列表
在HTML中，定义列表由两部分组成：名词和描述。
dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。
<dl>
<dt>html</dt>
<dd>控制结构</dd>
<dt>css</dt>
<dd>控制样式</dd>
<dt>js</dt>
<dd>控制行为</dd>
</dl>
-
html
- 控制结构 css
- 控制样式 js
- 控制行为
转义字符 html entity
在编写HTML页面时，需要用到"<"、">"、"空格"等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。那么就需要把这些字符进行转义，以另一种方式书写，以相同的形式展现。
| 显示结果 | 转义字符 | 英文 |
|---|---|---|
| < | < | less than |
| > | > | greater than |
| & | & | ampersand |
| © | © | copyright |
| ™ | ™ | trademark |
| ® | ® | registered trademark （注册商标） |
| (空格) | | non-breaking space |
| " | " | quote |
| € | &euro | Euro |
注： 为non-breaking space，是在UTF-8编码下的一种特殊的空格,意指换行时阻止空格两端文字被断开。
超链接
超链接，英文名是hyperlink。每一个网站都由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
链接分为内链、外链、锚点链接
在HTML中，我们可以使用a标签来实现超链接。a标签的属性：href，title，target。
href ：hypertext reference，href的值可以为相对路径或者绝对路径。title：鼠标扫过链接时会显现的文字。target=“_blank”, 在新标签页打开超链接。
内链
<a href="1.htm结构.html" title="第一课">html的结构</a>
<a href="2.list.html" title="列表"><div>列表</div></a>
外链
<a href="https://www.baidu.com" title="百度一下，你就知道" target="_blank">百度一下</a>
瞄点链接
有些页面内容比较多，导致页面过长，此时用户需要不停地拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。
想要实现锚点链接，需要定义以下2个参数：目标元素的id，a标签的href属性指向该id。其中，id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。
最后要注意一点，给a标签的href属性赋值时，需要在id前面加上“#”（井号），用来表示这是一个锚点链接。
<ul>
<li><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
</ul>
<section id ="section1">我是section1</section>
<section id ="section2">我是section2</section>
<section id ="section3">我是section3</section>
表格
表格一般由以下三个部分组成。表格：table标签；行：tr标签（table row）；单元格：td标签（table data cell）。可以使用caption标签来实现。
<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。
语法
<table>
<caption>学习</caption>
<tr>
<td>Html</td>
<td>css</td>
</tr>
<tr>
<td>Javascript</td>
<td>jQuery</td>
</tr>
</table>
| Html | css |
| Javascript | jQuery |
在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。th指的是table header cell（表头单元格）。td指的是table data cell（表行单元格）。
显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。
语义上：th标签用于表头，而td标签用于表行。
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
</tr>
</table>
| 姓名 | 语文 | 数学 |
|---|---|---|
| 小明 | 80 | 80 |
| 小红 | 90 | 90 |
一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签，thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。
表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。
合并行：rowspan
所谓的合并行，指的是将“纵向的N个单元格”合并。
<table>
<tr>
<td>姓名：</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢：</td>
<td>水果</td>
</tr>
<tr>
<td>运动</td>
</tr>
</table>
| 姓名： | 小明 |
| 喜欢： | 水果 |
| 运动 |
合并列：colspan
合并列，指的是将“横向的N个单元格”合并，使用colspan属性来合并列。
<table>
<tr>
<th colspan="2">前端开发技术</th>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>Javascript</td>
<td>jQuery</td>
</tr>
</table>
| 前端开发技术 | |
|---|---|
| HTML | CSS |
| Javascript | jQuery |
图片
通过img标签来展示一张图片，对于img标签需要掌握它的3个属性：src、alt和title。
<img src="" alt=" " title="" />
img标签的属性
src属性用于指定图片所在的路径，任何图片都需要src属性才能正常显示。
alt和title都是用于指定图片的提示文字，一般情况下，alt和title的值是相同的。
alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
图片路径
在HTML中，路径分为两种：绝对路径和相对路径。
1.绝对路径
绝对路径，指的是图片在你的计算机中的完整路径。
<img src="C:\Users\刘嘉琪\Pictures\Camera Roll">
2.相对路径
所谓的相对路径，指的是图片相对当前页面的位置。
图片格式
位图
位图，又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
在实际开发中，最常见的位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。
jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景。
png格式是一种无损格式，可以无损压缩以保证页面打开速度。此外，png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片。
gif格式的图片效果最差，不过它适合制作动画。
矢量图
矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片。
矢量图的常见格式有“.ai” “.cdr” “.fh” “.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。
表单
在HTML中，表单标签有5种：form、input、textarea、select、option。根据外观进行划分，表单可以分为以下8种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
表单与表格是两个完全不一样的概念，表单指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
form标签
创建一个表单，与创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。
<form action="">
<input type="text" value="单行文本框"> <br>
<textarea>多行文本框</textarea><br>
<select>
<option>html</option>
<option>css</option>
<option>JavaScript</option>
</select>
</form>
多行文本框
html css JavaScript
1.name属性
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单命名。
<form name="myform"> </form>
2.method属性
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。
<form method="post"></form>
3.action属性
在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。
<form action="index.php"></form>
4.target属性
form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。
5.enctype属性
在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
input标签
在HTML中，大多数表单都是使用input标签来实现的。input是自闭合标签，它是没有结束符号的，其中type属性取值如下表。
单行文本框
在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。
<input type="text">
<form method="post">
姓名：<input type="text">
</form>
密码文本框
密码文本框在外观上与单行文本框相似，两者拥有相同的属性。不过它们有着本质上的区别：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。
<input type="password"/>
密码文本框只能使周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术，这里了解一下就行。
单选框
在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”。
<input type="radio" name="组名" value="取值"/>
name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。
<form>
性别：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</form>
在默认情况下，让第一个单选框选中可以使用checked属性来实现。
性别： 男 女为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。上面这段代码，正确的应该写成下面这样。
<form>
性别：
<label>
<input type="radio" name="gender" value="男">男 </label>
<label>
<input type="radio" name="gender" value="女">女
</label>
</form>
对于单选框，加上value与没加上好像没啥区别啊？为啥还加上呢？
一般情况下，value属性取值与后面的文本是相同的。之所以加上value属性，是为了方便JavaScript或者服务器操作数据。实际上，所有表单元素的value属性的作用都是一样的。
复选框
在HTML中，复选框也是使用input标签来实现的，其中type属性为“checkbox”。单选框只能选择一项，而复选框可以选择多项。
<input type="checkbox" name="组名" value="取值"/>
name属性表示复选框所在的组名，而value表示复选框的取值。与单选框一样，这两个属性也必须要设置。
<form>
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="grape">葡萄
<input type="checkbox" name="fruit" value="banana" checked>香蕉
</form>
按钮
在HTML中，常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）。
普通按钮button
<input type="button" value="取值">
value的取值就是按钮上的文字。
提交按钮submit
提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
<input type="submit" value="取值">
提交按钮与普通按钮在外观上没有什么不同，两者的区别在于功能上。
重置按钮reset
在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
<input type="reset" value="取值">
举例：
<form method="post">
账号：<input type="text"> <br>
密码：<input type="text"><br>
<input type="reset" value="重置">
</form>
密码：
文件上传
在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为“file”。
<input type="file">
多行文本框
单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。
<form>
个人简介：<br>
<textarea rows="5" cols="29">请介绍你自己</textarea>
</form>
请介绍你自己
下拉列表
下拉列表是由select和option两个标签配合使用来表示的。
<select>
<option>选项一</option>
<option>选项二</option>
</select>
<form method="post">
<select>
<option>html</option>
<option>javascript</option>
<option>css</option>
</select>
</form>
select标签有两个常用属性，一是multiple，设置下拉列表可以选择多项；二是size，设置下拉列表一次显示几个选项。
<form method="post">
<select multipe>
<option>html</option>
<option>javascript</option>
<option>css</option>
</select>
</form>
想要同时选取多项，首先要设置multiple属性，然后使用“Ctrl+鼠标左键”来选取。
option有两个常用属性，一是selected，表示选中；二是value，选项值。
对于value属性，就不用多说了，几乎所有表单元素都有value属性，这个属性是配合JavaScript以及服务器进行操作的。
selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，这个与单选框中的checked属性是一样的。
表单编程题
<form method="post">
昵称：<input type="text"><br>
密码：<input type="text"><br>
邮箱：<input type="text">
<select>
<option value="qq.com">qq.com</option>
<option value="163.com">163.com</option>
<option value="gmail.com">gmail.com</option>
</select><br>
性别：<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女 <br>
爱好：<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="摄影">摄影
<input type="checkbox" name="hobby" value="运动">运动 <br>
个人简介：<br>
<textarea cols="30" rows="10"></textarea><br>
上传个人照片：
<input type="file">
<hr>
<input type="submit" value="立即注册">
</form>
密码：
邮箱： qq.com 163.com gmail.com
性别：男 女
爱好：旅游 摄影 运动
个人简介：
上传个人照片：
框架
在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，是指在当前页面再嵌入另外一个网页。
<iframe src="链接地址" width="数值" depth="数值">
</iframe>
src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。
<iframe src="https://www.bilibili.com" width="200" depth="150" </iframe>
个人简介：
上传个人照片：
框架
在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，是指在当前页面再嵌入另外一个网页。
<iframe src="链接地址" width="数值" depth="数值">
</iframe>
src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。
<iframe src="https://www.bilibili.com" width="200" depth="150" </iframe>
iframe实际上就是在当前页面嵌入另外一个页面，我们也可以同时嵌入多个页面。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
