1. html排版标签
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 块，没有任何含义，用于整体布局（生活中的包装袋） | 双 |
注意：
1、一个页面只能有一个
h1，可以有多个h2-h6，h标签不允许互相嵌套。
2、p标签很特殊，里面不能有p、div、h1~h6标签，会自定甩出来自动前后补全。
2. 语义化标签
语义化：用特定的标签表达特定的含义。
原则：标签默认效果不重要，语义最重要！（默认效果后期可以通过CSS随便控制）。
优势：
-
代码结构清晰，可读性强。
-
有利于
SEO（搜索引擎优化），爬虫。 -
方便设备解析（如屏幕阅读机器人、盲人阅读器等） 。
3. 块级元素与行内元素
块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行（目前只学了input）
使用规则：
- 块级元素中能写 行内元素 和 块级元素 （块级元素中几乎什么都能写）
- 行内元素中能写行内元素，但不能写块级元素
h1-h6不能相互嵌套- p标签中不能写块元素
4. 文本标签
主要作用：
- 用于包裹：词汇、短语等。
- 通常写在排版标签里面。
- 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
常用的文本标签：
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| em | 要着重阅读的内容 | 双 |
| strong | 十分重要的内容（语气比em要强） | 双 |
| span | 没有语义，用于包裹短语的通用容器 | 双 |
生活中的例子：div是大包装袋，span是小包装袋。
5. 常见图片格式
1、jpg格式：
概述：扩展名为.jpg 或.jpeg, 是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
主要特点：支持的颜色丰富，占用空间较小，不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。-- 改格式网页中很常见。
2、png 格式：
概述：扩展名为.png, 是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片由透明背景；②想更高质量的呈现图片；例如：公司logo、重要配图等。
3、bmp格式：
概述：扩展名为.bmp, 不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片（）。
4、gif格式：
概述： 扩展名为：.gif，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少，支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
5、webp格式：
概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
6、base64格式：
1.本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2.原理：把图片进行 base64 编码，形成一串文本。
3.如何生成：靠一些工具或网站。
4.如何使用：直接作为img 标签的src属性的值即可，并且不受文件位置的影响。
5.使用场景：一些较小的图片，或者需要和网页一起加载的图片。
图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。
6. 超链接
主要作用：从当前页面进行跳转。
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
|---|---|---|---|
| a | 超链接 | 1. href：要跳转的具体位置。 2. target：跳转时如何打开页面，常用值如下：_self: 在本页签重打开。 _blank：在新页签中打开。 |
双 |
6.1 跳转页面
<!-- 跳转其他网页 -->
<a href="http://www.baidu.com/" target="_blank">百度一下，你就知道</a>
<!-- 跳转本地网页 -->
<a href="./HTML排版标签.html" target="_self">京东</a>
# 注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
6.2 跳转文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能直接打开的文件 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载小电影</a>
# 注意：
1. 若浏览器无法打开文件，则会引导用户下载。
2. 若想强制触发下载，请使用download属性，属性值即为下载文件的名称。
6.3 跳转锚点
什么是锚点？——网页中的一个标记点。
具体使用方式：
第一步：设置锚点
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
# 注意点：
1. 具有`href`性的`a`标签是超链接，具有name属性的a 标签是锚点。
2. `name`和`id`都是区分大小写的，且`id`最好别是数字开头。
第二步：跳转锚点
<!-- 跳转到test1锚点 -->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js，如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
6.4 唤起指定应用
通过 a 标签，可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:[email protected]">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
7. 超文本
超文本：是一种组织信息的方式，通过超链接将不同空间的文字、图片、等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
8. 列表
8.1. 有序列表
概念：有顺序或侧重顺序的列表。
<h2>我是有序列表</h2>
<ol>
<li>我是第一步</li>
<li>我是第二步</li>
<li>我是第三步</li>
<li>
<a href="https://www.baidu.com">百度一下，你就知道</a>
</li>
</ol>
8.2. 无序列表
概念：无顺序或不侧重顺序的列表。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>三亚</li>
<li>成都</li>
<li>上海</li>
</ul>
注意：li标签最好写在 ul 或 ol 中，不要单独使用。
8.3. 列表嵌套
概念：列表中的某项内容，又包含一个列表（注意：嵌套是，请务必把结构写完整）。
<h2>我想去的几个城市</h2>
<ul>
<li>北京</li>
<li>三亚</li>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>上海迪士尼</li>
<li>东方明珠</li>
</ul>
</li>
</ul>
8.4. 自定义列表
概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是一个术语描述（可以有多个）。
<h2>如何更好的学习</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dt>多加练习</dt>
<dd>只有自己敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正并记住，就是经验</dd>
</dl>
9. 表格
9.1. 基本结构
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
表格涉及到的标签：
- table：表格
- caption：表格标题
- thead：表格头部
- tfoot：表格脚注
- tr：行
- th、td：每一个单元格（表格头部用：th，表格主体、表格脚注中用：td）
<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>20</td>
<td>蒙古族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：2人</td>
</tr>
</tfoot>
</table>
9.2. 常用属性
| 标签名 | 语义 | 常用属性 | 单/双标签 |
|---|---|---|---|
| table | 表格 | width：设置表格宽度。height：设置表格最小高度, 表格最终高度可能比设置值大。border：设置表格边框宽度。cellspacing：设置单元格之间的距离。 |
双 |
| thead | 表格头部 | height：设置表格头部高度。align：设置单元格的水平对齐方式，可选值：left、center、right。valign：设置单元格的垂直对齐方式，可选值：top、middle、bottom。 |
双 |
| tbody | 表格主体 | 常用属性与thead相同。 | 双 |
| tfoot | 表格脚注 | 常用属性与thead相同。 | 双 |
| tr | 行 | 常用属性与thead相同。 | 双 |
| td | 普通单元格 | width：设置单元格宽度。同列所有单元格全都受影响。height：设置单元格高度。同行所有单元格全都受影响。align：设置单元格的水平对齐方式。valign：设置单元格的垂直对齐方式。rowspan：指定要跨的行数。colspan：指定要跨的列数。 |
双 |
| th | 表头单元格 | 常用属性与td相同。 | 双 |
注意点：
1、<table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？--后期靠CSS控制。
2、给某个th或td设置了宽度之后，他们所在的那一列的宽度就确定了。
3、给某个th或td设置了高度之后，他们所在的那一行的高度就确定了。
10.常用表情补充
| 标签名 | 标签含义 | 单/双 标签 |
|---|---|---|
| br | 换行 | 单 |
| hr | 分割 | 单 |
| pre | 按原文显示（一般用于页面中嵌入大段代码） | 双 |
注意点：
- 不要用
<br>来增加文本之间的行间距，应使后面即将学到的CSS margin属性。 <hr>的语义是分割，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。
11. 表单
11.1. 基本结构
| 标签名 | 标签语义 | 常用属性 | 单/双 标签 |
|---|---|---|---|
| form | 表单 | action：用户指定表单的提交地址（需要与后端沟通确定）。 target: 用于控制表单提交后，如何打开页面，常用值如下： _self: 在本窗口打开. _blank: 在新窗口打开. method：用户控制表单的提交方式。 |
双 |
| input | 输入框 | type：设置输入框的类型，目前用到的值是text，表示普通文本。name：用户指定提交数据的名字。（需要与后端人员沟通确定） |
单 |
| button | 按钮 | 双 |
示例：
<form action="https://www.baidu.com/s" target="_blank" method="post">
<input type="text" name="word">
<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search" target="_blank">
<input type="text" name="keyword">
<button>去京东搜索</button>
</form>
11.2. 常用表单控件
1、文本输入框
<input type="text">
常用属性如下：
- name：数据的名称。
- value：输入框的默认输入值。
- maxlength：输入框最大可输入长度。
2、密码输入框
<input type="password">
常用属性如下：
- name：数据的名称。
- value：输入框的默认输入值（一般不用，无意义）。
- maxlength：输入框最大可输入长度。
3、单选框
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
常用属性如下：
- name：数据的名称，注意：想要单选效果，多个
radio的name属性值要保持一致。 - value：提交的数据值。
- checked：让该单选按钮默认选中。
4、复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性如下：
- name ：数据的名称。
- value：提交的数据值。
- checked：让该复选框默认选中。
5、隐藏域
<input type="hidden" name="tag" value="100">
用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
常用属性如下：
- name 属性：指定数据的名称。
- value 属性：指定的是真正提交的数据。
6、提交按钮
<!-- 确认按钮 写法1 -->
<button>确认</button>
<!-- 确认按钮 写法2 -->
<input type="submit" value="确认">
注意：
button标签type属性的默认值是submit。button不要指定name属性.input标签编写的按钮，使用value属性指定按钮文字。
7、重置按钮
<!-- 重置按钮 写法1-->
<button type="reset">点我重置</button>
<!-- 重置按钮 写法2 -->
<input type="reset" value="点我重置">
注意：
button不要指定name属性。input标签编写的按钮，使用value属性指定按钮文字。
8、普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
注意：普通按钮的 type 值为 button，若不写则默认为 submit 会引起表单的提交。
9、文本域
<textarea name="other" cols="16" rows="3">我是文本域</textarea>
常用属性如下：
rows属性：指定默认显示的行数，会影响文本域的高度。cols属性：指定默认显示的列数，会影响文本域的宽度。- 不能编写
type属性，其他属性与普通文本输入框一致。
10、下拉框
<select name="place">
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="北京" selected>北京</option>
</select>
常用属性及注意事项：
name属性：指定数据的名称。option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）。option标签设置selected属性，表示默认选中。
11.3 禁用表单控件
给表单控件的标签设置 disabled 即可禁用表单控件。
注意：input 、textarea 、button 、select、option 都可以设置 disabled 属性。
11.4 label标签
label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与label关联方式如下：
- 让label标签的
for属性的值等于表单控件的id。 - 把表单控件套在
label标签的里面。
11.5 fieldset与legend(了解）
fieldset 可以为表单控件分组、legend 标签是分组的标题。
示例：
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户： </label><input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>密码： <input id="mima" type="password" name="pwd" maxlength="6"></label><br>
性别： <input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label><input type="radio" name="gender" value="female" id="nv">女</label>
</fieldset>
11.6 表单总结
12. 框架标签
| 标签名 | 功能和语义 | 属性 | 单/双 标签 |
|---|---|---|---|
| iframe | 框架（在网页中嵌入其他文件） | name ：框架名字，可以与target 属性配合。 width：框架的宽。 height ：框架的高度。 frameborder ：是否显示边框，值： 0或者1。 |
双 |
iframe 标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的
target配合，展示不同的内容。
13. HTML字符实体
在 HTML中我们可以用一种特殊的形式的内容，来标识某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确的显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体由三部分组成： 一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ； 。
常见字符实体总结：
14.meta元信息
1、配置字符编码
<meta charset="utf-8">
2、针对IE浏览器的兼容性配置。
<meta http-equiv="X-UA-Compatible” content="IE=edge">
3、针对移动端的配置（移动端课程中会详细讲解）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4、配置网页关键字
<meta name="keywords”content="8-12个以英文逗号隔开的单词/词语">
5、配置网页描述信息
<meta name=“description”content="80字以内的一段话，与网站内容相关">
6、针对搜索引擎爬虫配置：
<meta name="robots”content="此处可选值见下表">
| 值 | 描述 |
|---|---|
index |
允许搜索爬虫索引此页面。 |
noindex |
要求搜索爬虫不索引此页面。 |
follow |
允许搜索爬虫跟随此页面上的链接。 |
nofollow |
要求搜索爬虫不跟随此页面上的链接。 |
all |
与 index , follow 等价 。 |
none |
与 noindex , nofollow 等价 。 |
noarchive |
要求搜索引擎不缓存页面内容。 |
nocache |
noarchive 的替代名称。 |
7、配置网页作者：
<meta name="author” content="tony">
8、配置网页生成工
<meta name="generator" content="Visual Studio Code">
9、配置定义网页版权信息：
<meta name="copyright” content="2023-2027@版权所有">
10、配置网页自动刷新
<meta http-equiv="refresh" content="10;url=https://www.baidu.com">
完整的网页元信息，请参考：文档级元数据元素|MDN
标签：name,表格,标签,前端,单元格,表单,HTML,灵学,属性 From： https://www.cnblogs.com/muyifeng/p/17961466