一、网页声明


是 html5 标准网页声明，全称为 Document Type HyperText Mark-up Language，意思为文档种类为超
文本标记性语言或超文本链接标示语言，支持 html5 标准的主流浏览器都认识这个声明。表示网页采用 html5，声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。不是 HTML 标签。它为浏览器提供一项信息(声明)，即 HTML 是用什么版本编写的。

二、语言类型

在 HTML 中，标签用于定义整个页面的根元素，而 lang=”en” 属性则指定了文档的主要语言是英语。这里的 en 代表英语（English），但并不意味着页面中只能使用英语，中文等其他语言同样可以使用，只是在浏览器中不会触发翻译功能‌。
此外，lang 属性还可以指定其他语言，例如 zh-CN 代表简体中文。这个属性主要用于告诉浏览器页面的主要语言，以便浏览器可以正确地处理语言相关的格式化，如日期、时间、数字等‌。

三、字符集

是一个 HTML 标签属性，用于指定网页的字符编码为 UTF-8。‌

在 HTML 中，是一个元数据标签，用于告诉浏览器该网页使用的字符编码是 UTF-8。UTF- 8 是一种广泛使用的字符编码，能够表示世界上几乎所有的字符，包括中文、日文、韩文等。使用 UTF- 8 编码可以确保网页在不同语言环境下的正确显示，避免乱码问题‌。

具体来说，的作用如下：

• ‌指定字符编码‌：通过声明字符编码为 UTF-8，浏览器知道如何正确解析页面上的文本内容。
• 避免乱码‌：如果不指定正确的字符编码，浏览器可能会使用默认编码来解析页面内容，导致中文等字符显示为乱码。
• 支持多语言‌：UTF- 8 编码支持世界上大多数语言的字符，因此在国际化的网页开发中非常重要‌。

四、标签

标签分为双标签和单标签，标题标签

就是一个双标签，图像标签 就是一个单标签。

1、标题标签

一级标题

h1>这是个一级标签h1>

二级标题

h2>这是个二级标签h2>

三级标题

h3>这是个三级标签h3>

四级标题

h4>这是个四级标签h4>

五级标题

h5>这是个五级标签h5>

六级标题

h6>这是个六级标签h6>

2、段落标签

p>这是一个段落标签p>

3、强制换行标签（单标签）


或者


br>强制换行标签，是一个单标签

4、加粗标签

或者，建议使用前者，更强烈。

strong>加粗标签strong>
b>这个也是加粗标签，但是没有 strong 强烈b>

5、倾斜标签

或者，建议使用前者，更强烈。

em>倾斜标签em>
i>这个也是倾斜标签，但是没有 em 强烈i>

6、删除标签

或者，建议使用前者，更强烈。

del>删除标签del>
s>这个也是删除标签，但是没有 del 强烈s>

7、下划线标签

或者，建议使用前者，更强烈。

ins>下划线标签ins>br />
u>这个也是下划线标签，但是没有 ins 强烈u>br />

8、图片标签（单标签）

属性：

1. src– 引入图片
2. alt– 替换文本，当图片显示不出来的时候可以用文字提示
3. title– 提示文本，当鼠标放在图片上的时候可以显示文字
4. width– 给图像设定宽度
5. height– 给图像设定高度
6. border– 给图像设定边框

h4>图像标签的使用h4>
img src="img0.jpg ">
br>

h4>alt-- 替换文本，当图片显示不出来的时候可以用文字提示h4>
img src="im.jpg" alt="这是一片郁金香花海">
br>

h4>title-- 提示文本，当鼠标放在图片上的时候可以显示文字h4>
img src="img0.jpg" alt="这是一片郁金香花海 " title=" 这张图片很美">
br>

h4>width-- 给图像设定宽度：h4>
img src="img0.jpg" alt="这是一片郁金香花海 " title=" 这张图片很美" width="500">
br>

h4>height-- 给图像设定高度：h4>
img src="img0.jpg" alt="这是一片郁金香花海 " title=" 这张图片很美" height="400">
p style="color: red;">高度和宽度只需设定一个，另一个会等比缩放p>
br>

h4>border-- 给图像设定边框：h4>
img src="img0.jpg" alt="这是一片郁金香花海 " title=" 这张图片很美" width="500" border = "15">

文件路径：

1. 同级路径，与 html 在同一文件夹下的图片
2. 下一级路径，在与 html 网页的文件夹的上一级文件夹下的图片
3. 上一级路径，在与 html 网页的文件夹的下一级文件夹下的图片
4. 绝对路径，直接从磁盘开始输入的路径或百度上的某个图片路径

img src="img.jpg">同级路径br>
img src="images/img.jpg">下一级路径br>
img src="../img.jpg">上一级路径br>
img src="https://image.baidu.com">绝对路径 C:webimglogo.jpgbr>

9、锚链接 (超链接) 标签

属性：

1. href– 最重要的属性，它指定链接的目标。
2. target– _blank，新窗口打开页面。默认为_self，在当前窗口打开页面。

target 打开窗口的方式。默认的值是_self 是在当前窗口打开页面，_blank 是新窗口打开页面。br>

h1>1. 外部链接 -- 外部网站的地址h1>
a href="http://www.qq.com" target="_blank">腾讯a> br> 

h1>2. 内部链接h1>
a href="vscode.html" target="_blank">vscodea>

h1>3. 空链接:#h1>
a href="#">这是一个空链接a>

h1>4. 下载链接：地址链接的是文件 .exe 或者 zip 等h1>
a href="img.jpg.zip">点击下载压缩包a>

h1>5. 网页元素的链接h1>
a href="http://www.baidu.com" target="_blank">img src="img.jpg" alt="空">a>

h1>6. 锚点链接：点击后跳转至该页面当前某一位置h1>
a href="#AAA">你好！a>
h1>sssssssh1>
h1>sssssssh1>
h1 id="AAA">你好！你好！你好！h1>
h1>sssssssh1>
h1>sssssssh1>

10、div 标签

‌HTML 中的 div 标签是一个块级元素，用于创建可包含其他元素的块或区域。‌ 它具有创建容器、分组内容、应用样式、创建布局和提供语义的用法。例如，可以使用 div 标签创建标题和正文的容器‌。

div 标签的主要用途包括：

• 组织内容‌：将相关内容分组，便于管理和维护。
• ‌应用样式‌：通过 div 标签和 CSS（层叠样式表），可以对页面布局和外观进行控制。
• ‌提供语义‌：虽然 div 本身没有语义，但通过合理的使用 id 或 class 属性，可以增强页面的语义化，有助于提高网站的可访问性和 SEO 优化‌。

div>div 标签用来布局，一行只能放一个，一个独占一行（大盒子）div>
div>AAAAAdiv>
div>BBBBBdiv>
div>CCCCCdiv>

11、span 标签

‌HTML 的 span 标签是一个行内标签‌，用于组合文档中的行内元素。它没有固定的格式表现，需要通过应用样式来产生视觉上的变化‌。

span 标签主要用于将文档中的文本或其他行内元素进行分组，以便统一应用样式。它支持 HTML 的全局属性，但本身无法提供视觉上的更改，需要通过类或 id 属性应用样式来实现特定的视觉效果‌。

span>用来布局，一行可以放多个 span 标签（小盒子）span>br>
span>AAAAAspan>
span>BBBBBspan>
span>CCCCCspan>

12、表格标签

属性：

1. align– left、center、right 规定表格相对周围元素的对齐方式
2. border– 规定表格单元是否拥有边框，默认无
3. cellpadding– 像素值 规定单元边沿与其内容之间的空白，默认为 1
4. cellspacing– 像素值 规定单元格之间的空白，默认为 2
5. width– 像素值或百分比 规定表格的宽度
6. rowspan– 上下单元格合并 跨行合并 ————最上侧单元格为目标单元格，写合并代码
7. colspan– 左右单元格合并 跨列合并 ————最左侧单元格为目标单元格，写合并代码

table align="center" cellspacing="0" cellpadding="8" border="1" width="500" height="249">
    
    thead>
        tr>   th>序号 th>   th> 姓名 th>   th> 性别 th>   th> 年龄th>   tr>
    thead>
        
    tbody>
        tr>   td>111td>   td>aaaatd>   td>mmmmtd>   td>12td>   tr>
        tr>   td>222td>   td>bbbbtd>   td>fffftd>   td>14td>   tr>
        tr>   td>333td>   td>cccctd>   td>mmmmtd>   td>13td>   tr>
        tr>   td>444td>   td>ddddtd>   td>mmmmtd>   td>12td>   tr>
        tr>   td>555td>   td>eeeetd>   td>fffftd>   td>12td>   tr>
    tbody>
table>



table border="1" cellspacing="0" width="500" height="249">
    tr>
        td>td>
        
        td colspan="2">td>
        
    tr>
    tr>
        
        td rowspan="2">td>
        td>td>
        td>td>
    tr>
    tr>
        
        td>td>
        td>td>
    tr>
table>

13、列表标签

无序列表

h1>无序列表h1>

h4>你的选项？h4>
ul>
    li>ali>
    li>bli>
    li>cli>
ul>

有序列表

h1>有序列表h1>

h4>粉丝排行榜h4>
ol>
    li>a   11li>
    li>b   22li>
    li>c   12li>
ol>

自定义列表

h1>自定义列表h1>

dl>
    dt>名词 1 dt>
    dd>名词解释 1 dd>
    dd>名词解释 2 dd>
    dd>名词解释 3 dd>
    dt>名词 2 dt>
    dd>名词解释 1 dd>
    dd>名词解释 2 dd>
    dd>名词解释 3 dd>
dl>

14、表单标签

表单控件

• input– 输入表单元素
• select– 下拉表单元素
• textarea– 文本域元素
• label– 增加表单触发面积，增强用户体验

input 标签的 type 属性

1. button– 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
2. checkbox– 定义复选框。
3. file– 定义输入字段和“浏览”按钮，供文件上传。
4. hidden– 定义隐藏的输入字段。
5. image– 定义图像形式的提交按钮。
6. password– 定义密码字段，该字段中的字符被掩码。
7. radio– 定义单选按钮。
8. reset– 定义重置按钮，重置按钮会清除表单中的所有数据。
9. submit– 定义提交按钮，提交按钮会把表单数据发送到服务器。
10. 10.text– 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符。

form action="xxx.php" method="get" name="name1">
    
    
    
    
    input type="text" name="username" value="请输入用户名" maxlength="6">
    br>
    
    input type="password" name="pwd">
    br>
    
    
    
    性别：男 input type="radio" name="sex" value="男 " checked="checked"> 女 input type="radio" name="sex" value=" 女">
    br>
    
    爱好：吃饭 input type="checkbox" name="hobby" value=" 吃饭 "> 睡觉 input type="checkbox" name="hobby" value=" 吃饭 "> 打豆豆 input type="checkbox" name="hobby" value=" 打豆豆">
    br>
    
    input type="submit" value="免费注册">
    br>
    
    input type="reset" value="重新填写">
    br>
    
    上传头像：input type="file">
    br>
    
    按钮：input type="button" value="点击">
    br>
    br>br>br>br>br>br>br>

    
    label for="text">用户名：label> 
    input type="text" id="text">
    br>

    label for="choose">aaalabel>
    input type="radio" name="choose" id="choose">

    label for="choose1">bbblabel>
    input type="radio" name="choose" id="choose1">

    label for="choose2">ccclabel>
    input type="radio" name="choose" id="choose2">
    br>
    
    籍贯：select>
        option>上海option>
        option>北京option>
        option selected="selected">安徽option>
        option>四川option>
        option>重庆option>
        option>天津option>
    select>
    br>

    label for="select">籍贯：label>
    select id = "select">
        option>上海option>
        option>北京option>
        option selected="selected">安徽option>
        option>四川option>
        option>重庆option>
        option>天津option>
        option>山东option>
        option>河南option>
        option>河北option>
        option>台湾option>
        option>香港option>
        option>黑龙江option>
        option>辽宁option>
        option>吉林option>
        option>内蒙古option>
        option>西藏option>
        option>山西option>
        option>陕西option>
    select>
    br>


    
    今日反馈：textarea cols="50" rows="5">这个反馈留言是用 textarea 做的textarea>
form>

15、注释与特殊字符

h1>
    注释的使用方法：快捷键 ctrl + /
    
h1>


a href="https://blog.csdn.net/jack_rose_me/article/details/124603494">特殊字符一览表a>
h4>空   格 符h4>
h4>大于>h4>
h4>小于h4>