1. html排版标签

注意：

1、一个页面只能有一个h1，可以有多个h2-h6，h标签不允许互相嵌套。
2、p标签很特殊，里面不能有p、div、h1~h6标签，会自定甩出来自动前后补全。

2. 语义化标签

语义化：用特定的标签表达特定的含义。

原则：标签默认效果不重要，语义最重要！（默认效果后期可以通过CSS随便控制）。

优势：

1. 代码结构清晰，可读性强。

2. 有利于SEO（搜索引擎优化），爬虫。

3. 方便设备解析（如屏幕阅读机器人、盲人阅读器等） 。

3. 块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）。

行内元素：不独占一行（目前只学了input）

使用规则：

1. 块级元素中能写 行内元素 和 块级元素 （块级元素中几乎什么都能写）
2. 行内元素中能写行内元素，但不能写块级元素
3. h1-h6不能相互嵌套
4. p标签中不能写块元素

4. 文本标签

主要作用：

• 用于包裹：词汇、短语等。
• 通常写在排版标签里面。
• 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

常用的文本标签：

生活中的例子：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. 超链接

主要作用：从当前页面进行跳转。

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:10010@qq.com">邮件联系</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. 常用属性

注意点：
1、<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？--后期靠 CSS 控制。
2、给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
3、给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

10.常用表情补充

注意点：

1. 不要用 <br> 来增加文本之间的行间距，应使后面即将学到的 CSS margin 属性。
2. <hr> 的语义是分割，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

11. 表单

11.1. 基本结构

示例：

<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="确认">

注意：

1. button 标签 type 属性的默认值是 submit。
2. button 不要指定 name 属性.
3. input 标签编写的按钮，使用 value 属性指定按钮文字。

7、重置按钮

<!-- 重置按钮 写法1-->
<button type="reset">点我重置</button>
<!-- 重置按钮 写法2 -->
<input type="reset" value="点我重置">

注意：

1. button 不要指定 name 属性。
2. 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关联方式如下：

1. 让label标签的 for 属性的值等于表单控件的 id。
2. 把表单控件套在 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 标签的实际应用：

1. 在网页中嵌入广告。
2. 与超链接或表单的 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="此处可选值见下表">

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

本栏目推荐文章
• 【Shell基础】Bash基础与Linux三剑客
• 跟着阿灵学前端(1)——HTML 基础
• 跟着阿灵学前端(2)——CSS 基础
• OSPF理论基础
• （坚持每天写算法）基础算法复习与学习part1基础算法1-7——高精度减法（处理t=1和t>1代码的写法，t为操作次数）
• 9-函数基础
• 春眠不觉晓，Java数据类型知多少？基础牢不牢看完本文就有数了
• Servlet基础开发
• Linux基础命令 [补档-2023-06-28]
• 一行代码创建网页（html）

前端 跟着 基础 HTML前端 跟着 基础html 前端 跟着 基础css 前端 基础html 前端 老师 基础html5 前端 基础html day 基础知识typescript chartgpt跟着 前端html 前端 笔记html5 css3 前端 笔记html css 骨架 前端html