代码语言：HTML
自动换行
AI代码解释
<html> <head> <title>网页标题</title> </head> <body> ...... </body> </html>
注释: <!-- -->
注意：注释不可以嵌套
文档声明：<!DOCTYPE html>
作用：告诉浏览器当前网页的版本
注意：文档声明，必须写在网页的第一行，且在html标签的外侧
排版标签：
标签名 |
标签含义 |
单/双标签 |
h1~h6 |
标题 |
双 |
p |
段落 |
双 |
div |
没有任何含义，用于整体布局 |
双 |
注意:
- 1. h1 最好写一个， h2~h6 能适当多写。
- 2. h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
- 3. p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。
块级元素 与 行内元素：
区分：块级元素：独占一行；行内元素：不独占一行
使用原则:
1.块级元素中能写行内元素和块级元素2.行内元素中能写行内元素，但不能写块级元素3.一些特殊的规则：h1~h6不能互相嵌套，p 中不要写块级元素
文本标签：
文本标签通常都是行内元素
标签名 |
标签含义 |
单/双标签 |
em |
要着重阅读的内容 |
双 |
strong |
十分重要的内容（语气比em要强） |
双 |
span |
没有语义，用于包裹短语的通用容器 |
双 |
图片标签：
标签名 |
标签语义 |
单/双标签 |
img |
图片 |
单 |
常用属性：
- src ：图片路径（又称：图片地址）——图片的具体位置
- alt ：图片描述
- width ：图片宽度，单位是像素，例如：200px 或 200
- height ：图片高度，单位是像素，例如：200px 或 200
路径的分类：
符号 |
含义 |
./ |
同级 |
/ |
下一级 |
../ |
上一级 |
绝对路径：
1. 本地绝对路径：例：E:/a/b/c/奥特曼.jpg。（很少使用） 2. 网络绝对路径：例：http://www.atguigu.com/images/index_new/logo.png
常见图片形式：
- jpg：支持的颜色丰富、占用空间较小，不支持透明背景、不支持动态图，对图片细节没有极高要求
- png：支持丰富的颜色、占用空间略大、支持透明背景，不支持动态图，对图片有较高的要求
超链接：
实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用
标签名 |
标签语义 |
单/双标签 |
a |
超链接 |
双 |
常见属性：
- href ：指定要跳转到的具体目标。
- target ：控制跳转时如何打开页面，常用值如下：
_self ：在本窗口打开_blank：在新窗口打开
- id ：元素的唯一标识，可用于设置锚点。
- name ：元素的名字，写在 a 标签中，也能设置锚点。
跳转到页面
代码语言：HTML
自动换行
AI代码解释
<!-- 跳转其他网页 --> <a href="https://www.jd.com/" target="_blank">去京东</a> <!-- 跳转本地网页 --> <a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
跳转到文件
代码语言：HTML
自动换行
AI代码解释
<!-- 浏览器能直接打开的文件 --> <a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a> <!-- 浏览器不能打开的文件，会自动触发下载 --> <a href="./resource/内部资源.zip">内部资源</a> <!-- 强制触发下载 --> <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意：
- 1. 若浏览器无法打开文件，则会引导用户下载。
- 2. 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
跳转到锚点
代码语言：HTML
自动换行
AI代码解释
// 1.设置锚点 <!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性 --> <h2 id="test2">我是一个位置</h2> // 2.跳转锚点 <!-- 跳转到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>
注意：
- 1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
- 2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。
唤起指定应用
代码语言：HTML
自动换行
AI代码解释
<!-- 唤起设备拨号 --> <a href="tel:10010">电话联系</a> <!-- 唤起设备发送邮件 --> <a href="mailto:10010@qq.com">邮件联系</a> <!-- 唤起设备发送短信 --> <a href="sms:10086">短信联系</a>
列表：
分类：有序列表 无序列表 自定义列表
代码语言：HTML
自动换行
AI代码解释
<!-- 有序列表 --> <h2>要把大象放冰箱总共分几步</h2> <ol> <li>把冰箱门打开</li> <li>把大象放进去</li> <li>把冰箱门关上</li> </ol> <!-- 无序列表 --> <h2>我想去的几个城市</h2> <ul> <li>成都</li> <li>上海</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>
表格：
涉及的标签：
table ：表格caption ：表格标题thead ：表格头部tfoot ：表格注脚tr ：每一行th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
常用属性：
标签名 |
标签语义 |
单/双标签 |
table |
表格 |
双 |
caption |
表格标题 |
双 |
thead |
表格头部 |
双 |
tbody |
表格主体 |
双 |
tr |
每一行 |
双 |
tfoot |
表格脚注 |
双 |
td |
普通单元格 |
双 |
th |
表头单元格 |
双 |
table：
width ：设置表格宽度。height ：设置表格最小高度，表格最终高度可能比设置的值大。border ：设置表格边框宽度。cellspacing ： 设置单元格之间的间距。
thead，tbody，tr，tfoot：
height ：设置表格头部高度。align ： 设置单元格的水平对齐方式，值如下：
选项 |
描述 |
left |
左对齐 |
center |
中间对齐 |
right |
右对齐 |
valign ：设置单元格的垂直对齐方式，值如下：
选项 |
描述 |
top |
顶部对齐 |
middle |
中间对齐 |
bottom |
底部对齐 |
td，th：
width ：设置单元格的宽度height ：设置单元格的高度align ：设置单元格的水平对齐方式。valign ：设置单元格的垂直对齐方式。rowspan ：指定要跨的行数。colspan ：指定要跨的列数。
常见的标签补充：
标签名 |
标签含义 |
单/双标签 |
br |
换行 |
单 |
hr |
分隔线 |
单 |
pre |
按原文显示（一般用于页面中嵌入大段代码） |
双 |
表单：
标签名 |
标签语义 |
单/双标签 |
form |
表单 |
双 |
input |
输入框 |
单 |
button |
按钮 |
双 |
常用属性：
form：
action ：用于指定表单的提交地址（需要与后端人员沟通后确定）。target ：用于控制表单提交后，如何打开页面，常用值如下：
_self ：在本窗口打开_blank ：在新窗口打开
method ：用于控制表单的提交方式
input：
type ：设置输入框的类型，目前用到的值是 text ，表示普通文本。name ：用于指定提交数据的名字，（需要与后端人员沟通后确定）。
常见表单控件：
1. 文本输入框
代码语言：HTML
自动换行
AI代码解释
<input type="text"> 常用属性如下： - name 属性：数据的名称。 - value 属性：输入框的默认输入值。 - maxlength 属性：输入框最大可输入长度。
2. 密码输入框
代码语言：HTML
自动换行
AI代码解释
<input type="password"> 常用属性如下： - name 属性：数据的名称。 - value 属性：输入框的默认输入值（一般不用，无意义）。 - maxlength 属性：输入框最大可输入长度。
3. 单选框
代码语言：HTML
自动换行
AI代码解释
<input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="male">男 常用属性如下： - name 属性：数据的名称，多个 radio 的 name 属性值要保持一致以实现单选。 - value 属性：提交的数据值。 - checked 属性：让该单选按钮默认选中。
4. 复选框
代码语言：HTML
自动换行aly.zapafly.net99
AI代码解释
<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. 隐藏域
代码语言：HTML
自动换行
AI代码解释
<input type="hidden" name="tag" value="100"> 用户不可见的输入区域，用于提交一些固定数据。 - name 属性：指定数据的名称。 - value 属性：提交的数据。
6. 提交按钮
代码语言：HTML
自动换行
AI代码解释
<input type="submit" value="点我提交表单"> <button>点我提交表单</button> 注意： - button 标签的 type 属性默认是 submit。 - button 不要设置 name 属性。 - input 按钮使用 value 属性设置按钮文字。
7. 重置按钮
代码语言：HTML
自动换行aly.seapac.net22
AI代码解释
<input type="reset" value="点我重置"> <button type="reset">点我重置</button> 注意： - button 不要设置 name 属性。 - input 按钮使用 value 属性设置按钮文字。
8. 普通按钮
代码语言：HTML
自动换行
AI代码解释
<input type="button" value="普通按钮"> <button type="button">普通按钮</button> 注意： - 普通按钮的 type 值为 button，若不写会是 submit，可能会提交表单。
9. 文本域
代码语言：HTML
自动换行aly.mtgcss.com66
AI代码解释
<textarea name="msg" rows="22" cols="3">我是文本域</textarea> 常用属性： - rows ：默认显示的行数，影响高度。 - cols ：默认显示的列数，影响宽度。 - 不能设置 type 属性，其他属性与输入框类似。
10. 下拉框
代码语言：HTML
自动换行
AI代码解释
<select name="from"> <option value="黑">黑龙江</option> <option value="辽">辽宁</option> <option value="吉">吉林</option> <option value="粤" selected>广东</option> </select> 常用属性： - name ：数据的名称。 - option 设置 value，未设置则提交中显示 option 内文字。 - 设置 selected 表示默认选中。
禁用表单控件
- 通过在控件标签中加
disabled属性，禁用对应控件。 - 支持控件：
input、textarea、button、select、option。
label 标签
- 与表单控件相关联，通过点击标签文字获取焦点。
- 方式：
- 设置
label的for属性的值等于控件的id。 - 将控件嵌套在
label标签内。
fieldset 与 legend 的使用（了解）
fieldset用于表单分组。legend为分组提供标题。
