前端学习笔记|尚硅谷前端入门html+css|HTML4（二）

视频地址：尚硅谷前端入门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>

常用标签补充