常用标签
1. 文本标题标签（h1-h6）
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
注意：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距。
一个网页中h1标签我们建议只有一个，只有一个大标题，可以有很多小标题，爬虫在爬到这个网页的时候，会将h1标签的内容当做我们网页中最重要的内容收录进去，权重是最大的。
2. 段落标签（p）
语法：<p>段落内容</p>
<body>
<!--
标识一个段落
段落与段落之间有段间距
-->
<p>锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
3. 换行（br）
语法：<br/>
换行是一个空标签/单标签(强制换行)
<body>
<!--
<br/> -换行是一个空标签/单标签(强制换行)
-->
<p>“若黯夜终临
吾必立于万万人前<br/>
横刀向渊<br/>
血染苍穹”<br/>
——守夜人,赵空城<br/>
“若黯夜終临，吾必立于万万。<br/>
前...这一次，我的身后没有万万<br/>
仄,<br/>
可,<br/>
我的身后......<br/>
有那孩子的全世界。<br/>
——守夜人.赵空城<br/>
</p>
</body>
4. 水平线
语法：<hr/>
是一个空标签/单标签
<body>
<!--
<hr/> -水平线是一个空标签/单标签
-->
<p>祈愿一刀斩鬼面，入夜十载始见光
陈牧野
残魂旧守奇迹城，烟消云散终无憾
司小南
心比天高甘命运，对弈神明算诡计
冷轩
凡身铁狙心柔情，大义凛然伴君行
红樱
曾为天真度生死，空守沧南盼君归<br/>
<hr/>
</p>
</body>
5. 加粗有两个标记(推荐strong)
语法：
<b>加粗内容</b> // 只显示加粗
<strong>强调的内容</strong> // 突出的文本
<body>
<!--
<b>加粗内容</b> -加粗，只是为了加粗而加粗，
<strong>强调的内容</strong> -突出的文本(推荐)
-->
<p><b>锄禾日当午，</b><strong>汗滴禾下土。</strong></p>
</body>
6. 倾斜有两个标记(推荐em)
<em>强调文本</em>
<i>倾斜文本</i>
<body>
<!--
<em>强调文本</em> -倾斜，强调文本(推荐)
<i>倾斜文本</i> -只是为了倾斜而倾斜
-->
<p><em>谁知盘中餐，</em><i><strong>粒粒皆辛苦。</strong></i></p>
</body>
7. 删除线有两个标记(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
8. 扩展
<u>文本</u>下划线
<sub></sub>下标
<sup>文本</sup>上标
<body>
<!--
<s>文本</s> -删除线
<del>文本</del> -删除线
<u>文本</u> -下划线
<sub></sub> -下标
<sup>文本</sup> -上标
-->
<p>一件上衣<sub>[1]</sub>原价<s>100</s>元，现价<u>80</u>元。<br/></p>
<p>一件裤子原价<sup>[2]</sup><del>160</del>元，现价120元。</p>
</body>
特殊字符
在html中，一些如< >这种特殊的字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊的字符，这些特殊字符我们称为实体（转义字符串） 浏览器解析到实体时，会自动将实体转换为其对应的字符。 实体的语法：
&实体的名字；
< <
> >
空格 /  
版权符号 © ©
商标 ™ ™
® ®
<body>
<!--
网页中会把< >这种特殊的字符解析成html标签，不能直接使用
需要使用一些特殊的符号来表示这些特殊的字符
这些特殊字符我们称为实体（转义字符串）
&实体的名字；
< <
> >
空格 /  
版权符号 © ©
商标 ™ ™
® ®
-->
<p>
<!-- 直接使用会当成html标签，不能直接显示到页面上 -->
我们学过了hr,用法是这样的<hr noshade />
<!-- < < > >-->
我们学过了hr,用法是这样的<hr noshade />
</p>
<p>
a <b> c
</p>
<p>
a < b > c
</p>
<!--
一个 表示一个空格，一个以及多个空格使用
该空格占据宽度受[字体]影响，具体占位几个字符跟字体有关
 占据的宽度刚好是一个中文宽度，且基本不受字体影响
-->
<p>特殊字符中的 空格</p>
<p>特殊字符中的 空格</p>
<p>特殊字符中的 空格</p>
<!-- 该空格占据宽度受[字体]影响， 占据的宽度刚好是一个中文宽度 -->
<p> 锄禾日当午，汗滴禾下土。</p>
<p>  锄禾日当午，汗滴禾下土。</p>
<!-- 版权保护符号 -->
<p>©</p>
<!--
商标
™ ™, 用于标注那些正在申请注册过程中的商标，
表明这些标识是作为商标在使用，具有优先使用权，
但不保证注册成功。
® ®, 意味着该商标在国家商标局的注册申请已被批准，
并且商标局已审查通过，受到国家的法律保护。
未经注册商标的所有人许可或授权，任何人不得盗用。
-->
<p>™</p>
<p>®</p>
<!--表情包😀，😁，😂，😃 -->
<p>😀</p>
</body>
div和span标签
div标签
div标签，没有具体含义，用来划分页面的区域，独占一行。
快捷键：
1. div*3 回车 -->
<div></div>
<div></div>
<div></div>
2. div{111} 回车 -->
<div>111</div>
div就像盒子，把东西区分出来分别放到不同的盒子里面
div没有外力的情况下，独占一行，就是块元素。(后续学css浮动可以让几个盒子浮动到一行)
<body>
<div>11111111</div>
<div>22222222</div>
<div>33333333</div>
</body>
span标签
span标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占据多宽的空间距离。 如有一段文字，显示不同的文字效果会用到span
<body>
<!--
div标签，没有具体含义，
用来划分页面的区域，
独占一行。
-->
<div>11111111</div>
<div>22222222</div>
<div>33333333</div>
<!-- span标签，没有实际意义，
主要应用在对于文本独立修饰的时候，
内容有多宽就占据多宽的空间距离。
如有一段文字，显示不同的文字效果会用到span标签
-->
<h3>
<span>体育</span>
<span style="color: #666;">sports</span>
</h3>
</body>
XHTML语法规范
XHTML是HTML向XML的一个过渡，语法越来越严格。
-
HTML中不区分大小写，但是一般我们都使用小写
-
HTML中的注释不能嵌套
-
HTML标签必须结构完整，要么成对出现，要么自结束。
有些未闭合的标签浏览器也可以显示出来，那是因为浏览器尽最大努力正确的解析页面，你所有的不符合规范的内容，浏览器都会为你自动修正，但有些时候会报错，所以我们一定要书写规范。
-
HTML标签可以嵌套，但是不能交叉嵌套
-
HTML标签中的属性必须有值，并且值必须加引号(双引号单引号都可以)
列表
有序列表
使用ol和li来创建一个有序列表。
<!-- 快捷键：ol>li{列表项}*3 -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<body>
<!--
1. ol里面只能放li标签
li里面可以随意放标签
2. 数字是自动生成的
3. type属性:1,a,A,i,I
start：取值只能是一个数字
-->
<ol type="A" start="2">
<li>把冰箱打开</li>
<li>把大象装进去</li>
<li>把冰箱关闭</li>
</ol>
<!--
B.把冰箱打开
C.把大象装进去
D.把冰箱关闭
-->
</body>
无序列表
使用ul和li来创建一个无序列表。
<!-- 快捷键：ul>li{列表项}*3 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<body>
<!--
1. ul里面只能放li,li里面可以放其他标签
2. 默认的是黑色的实心圆
3. type属性: disc, circle, square, none(取消点用的最多，可以自定义)
-->
<ul type="none">
<li>北京</li>
<li>上海</li>
<li>武汉</li>
</ul>
</body>
自定义列表
使用dl、dd、dt来创建一个定义列表。
<!--
快捷键：dl>dt{111}+dd{222}
(dt>dt{111}+dd{222})*3
-->
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
</dl>
<dl>
<dt>定义项2</dt>
<dd>定义描述2</dd>
</dl>
<dl>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
通常用于图文混排的列表。当然也可以用div来实现。
如：一般用于这种很多个图片和文字的组合。
<body>
<dt>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dt>
<dt>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dt>
<dt>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dt>
</body>
图片标签
使用img标签来向网页中引入一个外部图片。
img标签也是一个自结束标签。
语法：
<img src="图片路径" alt="图片描述"/>
图片路径
路径分类：绝对路径、相对路径
绝对路径：绝对路径是指文件在硬盘上真正存在的路径。例如"01.jpg"这张图片是放到硬盘"E:\qianduan\第四章"目录下，那么"01.jpg"这张图片的绝对路径就是"E:\qianduan\第四章\01.jpg"。(绝对路径在实际开发中很少用，在自己计算机上浏览正常，但上传到web服务器上就可能不会显示图片了)。
相对路径：就是相对于自己的目标文件的位置。(目前我们所要使用的路径全部都是相对路径)
<img src="./xx" alt=""/>
./ 当前目录
…/ 上一级目录
<body>
<!--
同级目录写法：
绝对路径:
1. 01.jpg
2, ./01.jpg
两种写法一样，都表示当前文件夹
相对路径：
E:\qianduan\front-end-resource\day1-15\code\day04\01.jpg
不同级目录：
上一级：../
-->
<!-- 相对路径 -->
<img src="01.jpg"/>
<img src="./01.jpg"/>
<!-- 绝对路径 -->
<img src="E:\qianduan\front-end-resource\day1-15\code\day04\01.jpg"/>
<!-- 图片在下一文件夹，放在images文件夹下 -->
<img src="images/02.png"/>
<!-- 放在上面的文件夹里面，../表示上一级 -->
<img src="../../res/01-imgs/1.jpg"/>
<img />
</body>
属性
<body>
<!--
src: 设置一个外部图片的路径
alt: 可以用来设置在图片不能显示时，对图片进行描述。
搜索引擎可以通过alt属性来识别不同的图片。
如果不写alt，则搜索引擎不会对img中的图片进行收录。
width: 修改图片的宽度。(单位px)
height: 修改图片的高度。(单位px)
高度和宽度两个属性如果只设置一个，
另外一个也会同时等比例调整大小。
当宽度和高度都设置的时候，会按照设置的宽高来调整大小。
一般不建议直接改宽高，让ui去改图片的大小尺寸。
-->
<img src="images/22.png" alt="蒲公英的图片"/>
<img src="images/02.png" title="这张图片是蒲公英图片"/>
<img src="images/02.png" width="200px" />
<img src="images/02.png" height="200px" />
</body>
图片格式
常见的图片格式：
-
jpeg(jpg)：支持的颜色比较多，图片可以压缩，体积相对比较小，不支持透明背景。一般使用它来保存照片。
-
gif：支持颜色少，只支持简单的透明（方块周围透明背景支持，圆形周围透明不支持，只支持直线的透明），支持动态图。图片颜色单一或者动态图用gif。
-
png：颜色支持的比较多并且支持复杂的透明。可以用来显示盒色复杂的透明的图片。
图片的使用原则：
效果不一致，使用效果好的；
效果一致，使用体积小的。
超链接
使用超链接可以让我们从一个页面跳转到另外一个页面
使用a标签来创建一个超链接
属性：href:指向链接跳转的目标地址，可以写一个相对地址，也可以是一个完整的地址
<a href="https:www.baidu.com">我是一个超链接</a><br/>
<a href="./02.特殊字符.html">我是一个超链接1</a><br>
如果不确定要跳转到哪里，可以写一个’#'作为占位符
<a href="#">不确定链接</a><br>
a标签中的target属性可以用来指定打开链接的位置
可选值：
- _self，表示在当前窗口打开(默认值)
- _blank, 在新的窗口打开链接
- 可以设置一个内联框架的name属性值，链接会在指定的内联框架中打开。
代码如下：
<body>
<!--
href的值可以是一个相对地址，
也可以是一个完整的地址
-->
<a href="https://www.baidu.com/">我是一个超链接1</a><br/>
<a href="./02.特殊字符.html">我是一个超链接2</a><br>
<!--
target属性的属性值，
_self，表示在当前窗口打开(默认值)
_blank, 在新的窗口打开链接
-->
<a href="https://www.baidu.com/" target="_blank">我是一个超链接3</a><br>
<!--
target属性的属性值设置为内联框架的name属性值，
链接会在指定的内联框架中打开
-->
<a href="./02.特殊字符.html" target="tom">我是一个超链接4</a><br>
<iframe src="./04.meta标签.html" name="tom"></iframe>
</body>
超链接href里面的地址设置为#，除了有占位符的作用，还可以直接跳转到当前页面的顶部
html中的一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，这个属性就是id，id属性在一个页面中只能有一个不能重复。可以通过设置id，在a标签中设置href的#后面跟要跳转的id值，就可以直接跳转到想要跳转到的地方。
<a href="#bottom">跳转到"回到顶部"</a>
<a id="bottom" href="#">回到顶部</a>
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮箱，并且将收件人设置mailto后的邮件地址。href=“mailto:邮箱地址”。不常用。
<a href="mailto:邮箱地址">联系我们</a>
表格
在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。
但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。
表格的创建
行、列、单元格
特点：通常情况下，同行的高度一致，同列表的宽度一致。
创建一个表格：
<body>
<!--
table--创建表格
tr--定义表格中的行
td--定义表格数据
-->
<table>
<!-- tr--定义表格中的行 -->
<tr>
<!-- th-表示表头 -->
<th>111</th>
<th>2222</th>
</tr>
<tr>
<!-- td--定义表格数据(定义单元格中的内容) -->
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
此时发现没有线，需要借助我们后面学的表格属性。
创建快捷方式：table>(tr>td2)2 或者 table>tr2>td2
表格属性：
- 宽度 width
- 高度 height
- 边框 border
- 边框颜色 bordercolor
- 背景颜色 bgcolor
- 水平对齐 align=“left/right/center”
- cellspacing=“单元格与单元格之间的间距”
- cellpadding=“单元格与内容之间的空隙”
<body>
<!--
给表格table设置属性
border 外边框
width 宽度，支持px，百分比-相对于父元素的百分之多少
table的父元素是body，就是内容的即窗口的宽度
height 高度，支持px，百分比-相对于父元素的百分之多少
现在相当于body,高度是靠内容给撑开的(比如建楼，宽度是地基的宽度，高度是楼垒高起来最后的高度)
align 水平对齐方式：left/center/right
bordercolor 边框颜色
bgcolor 背景颜色
cellspacing 单元格直接的间距
cellpadding 单元格与内容之间的空隙
-->
<table
border="1"
width="50%"
height="500px"
align="center"
bordercolor="red"
bgcolor="yellow"
cellspacing="0"
cellpadding="100"
>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
我们是对整个表格进行设置的属性，怎么改变某一行或者某一列的宽高背景颜色呢？
行tr 属性
- 高度 height
- 背景颜色 bgcolor
- 文字水平对齐 align=“left/center/right”
- 文字垂直对齐 valign=“top/middle/bottom”
tr —> table row的缩写
<body>
<!--
tr-table row的缩写
height 高度
bgcolor 背景颜色
align 文字水平对齐 left/center/right
valign 文字垂直对齐，top/middle/bottom
-->
<table border="1" width="300" bgcolor="yellow" align="center">
<!-- 可以设置高度，不能设置宽度，因为行是对于整个行,不能改变列 -->
<tr
bgcolor="orange"
height="300px"
align="center"
valign="center"
>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
单元格td属性
- 宽度 width
- 高度 height
- 背景颜色 bgcolor
- 文字水平对齐 align=“left/center/right”
- 文字垂直对齐 valign=“top/middle/bottom”
td —> table data 存放数据的这样一个地方,表示表格中的一个单元格。
<body>
<!--
td: width 如果一个单元格设置宽度，影响的是一整列的宽度
height 如果一个单元格设置高度，影响的是一整行的高度
bgcolor 控制某一个单元格的背景颜色
align 文字水平对齐left/center/right
valign 文字垂直对齐top/middle/bottom
-->
<table border="1" width="300" height="300" bgcolor="yellow" align="center">
<tr>
<td width="200">1</td>
<td height="200">2</td>
</tr>
<tr>
<td bgcolor="red">3</td>
<td align="right" valign="top">4</td>
</tr>
</table>
</body>
合并单元格
表格合并列
- Colspan=“所要合并的单元格的列数”，必须给td。
如：Colspan=“2” - Rowspan=“所要合并的单元格的行数”，必须给td。
如：Rowspan=“5”
举例：
<body>
<table style="margin-top: 100px;" border="1" width="400" height="300" cellspacing="0" align="center">
<tr align="center">
<td colspan="2"> 甄嬛 </td>
<!-- <td colspan="2" rowspan="2"> 皇后 </td> -->
<!-- <td> 祺贵人 </td> -->
</tr>
<tr align="center">
<td rowspan="2"> 敬妃 </td>
<!-- <td colspan="2"> 安小鸟</td> -->
<!-- <td> 眉姐姐 </td> -->
</tr>
<tr align="center">
<!-- <td> 齐妃</td> -->
<!-- <td> 华妃</td> -->
<td colspan="2"> 端妃</td>
</tr>
</table>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
