视频地址：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频
1 开发者文档
官方网站：W3C=>HTML Standard
推荐网站：MDN、w3school
2 HTML排版标签
| 标签名 | 标签语义 | 单双标签 |
|---|---|---|
| h1-h6 | 标题（每个页面h1最好只写一个，不能相互嵌套） | 双 |
| p | 段落（标签内不能嵌套h1-h6、p、div） | 双 |
| div | 没有任何含义，用于整体布局（不知道用什么标签时可以用<div>文字</div>） | 双 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML排版标签</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div>文字</div>
</body>
</html>
3 HTML语义化标签
- 概念：用特定的标签，去表达特定的含义。
- 原则：标签默认的效果不重要（后期可以通过CSS控制效果），语义最重要！
例如：h1是网页主要内容不是仅文字大 - 优势： 代码结构清晰可读性强。 有利于SEO（搜索引擎优化，即方便搜索引擎语义识别）。
- 方便设备解析（如屏幕阅读器、盲人阅读器等）。
4 块级元素与行内元素
编码小技巧：alt+shift+↓将当前代码向下复制一行
- 块级元素：独占一行（排版标签都是块级元素）。
- 行内元素：不独占一行。
- 使用规则：
5 常用的文本标签
- 用于包裹：词汇、短语等。
- 通常写在排版标签里面。
- 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
- 文本标签通常都是行内元素。
| 标签名 | 标签语义 | 单双标签 |
|---|---|---|
| em | 要着重阅读的内容（文字变成斜体） | 双 |
| strong | 十分重要的内容（语气比em要强，变成粗体） | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
6 不常用的文本标签
| 标签名 | 标签语义 |
|---|---|
| cite | 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） |
| dfn | 特殊术语或专属名词 |
| del与ins | 删除的文本【与】插入的文本 |
| sub与sup | 下标文字【与】上标文字 |
| code | 一段代码 |
| samp | 从正常的上下文中，将某些内容提取出来，例如：标识设备输入 |
| kbd | 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 |
| abbr | 缩写，最好配合上title属性 |
| bdo | 更改文本方向，要配合dir属性，可选值：ltr（默认值，还是正常的顺序，left to right）、rtl（翻转） |
| var | 标记变量，可与code标签一起使用 |
| small | 附属细则，例如：包括版权、法律文本。——很少使用 |
| b | 摘要中的关键字、评论中的产品名称。——很少使用 |
| i | 本意是：人物的思想活动、所说的话等等。现在多用于呈现字体图标 |
| u | 与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用 |
| q | 短引用 |
| blockquote | 长引用，块级元素 |
| address | 地址信息，块级元素 |
7 图片标签
相对路径：以当前位置作为参考点，去建立路径
绝对路径：以根位置作为参考点，去建立路径。
常见图片格式
| 图片格式 | 概述 | 特点 | 使用场景 |
|---|---|---|---|
| jpg | 扩展名为.jpg 或.jpeg，是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)。 | 支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。 | 对图片细节没有极高要求的场景，例如:网站的产品宣传图等。–该格式网页中很常见。 |
| png | 扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。 | 支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。 | ①想让图片有透明背景;②想更高质量的呈现图片;例如:公司logo图、重要配图等。 |
| bmp | 扩展名为.bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。 | 支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。 | 使用场景:对图片细节要求极高的场景，例如:一些大型游戏中的图片。(网页中很少使用) |
| gif | 扩展名为.gif ，仅支持256种颜色，色彩呈现不是很完整。 | 支持的颜色较少、:支持简单透明背景、支持动态图。 | 网页中的动态图片。 |
| webp | 扩展名为.webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。 | 具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。 | 网页中的各种图片。 |
| base64 | 把图片进行 base64 编码，形成一串文本。 | 直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。 | 一些较小的图片，或者需要和网页一起加载的图片。 |
8 超链接
主要作用:从当前页面进行跳转。
跳转到页面
跳转到文件
文件可以是本地的也可以是在线的。
跳转锚点
第一步：设置锚点（推荐用id）
第二步：跳转锚点
唤起指定应用
9 列表
有序列表
有顺序或侧重顺序的列表
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
无序列表
无顺序或不侧重顺序的列表
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>青岛</li>
<li>武汉</li>
</ul>
列表嵌套
列表中的某项内容，又包含一个列表（务必把结构写完整）
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ul>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
自定义列表
自定义列表，是一个包含术语名称以及术语描述的列表。
一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）。
<h2>如何高效地笔记？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正以后并记住，就是经验</dd>
</dl>
10 表格
一个完整的表格由表格标题、表格头部、表格主体、表格脚注四部分组成。（表格脚注可写可不写）
<table border="1">
<!-- 表格标题 -->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>汉族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计3人</td>
</tr>
</tfoot>
</table>
常用属性
跨行与跨列
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课程表_跨行跨列</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
</tr>
</tbody>
</table>
</body>
</html>
常用标签补充
扫一扫
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
