目录
下级路径（在当前img文件夹下的图片）：./img/xxx.png
[alt: 替换文本.](#alt: 替换文本.)
[title: 提示文本.](#title: 提示文本.)
[width/height: 控制宽度高度.](#width/height: 控制宽度高度.)
[border: 边框, 参数是宽度的像素.](#border: 边框, 参数是宽度的像素.)
[外部链接: href 引用其他网站的地址](#外部链接: href 引用其他网站的地址)
[内部链接: 网站内部页面之间的链接. 写相对路径即可](#内部链接: 网站内部页面之间的链接. 写相对路径即可)
[空链接: 使用 # 在 href 中占位](# 在 href 中占位)
[下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)](#下载链接: href 对应的路径是一个文件. (可以使用 zip 文件))
[网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)](#网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中))
[锚点链接: 可以快速定位到页面中的某个位置](#锚点链接: 可以快速定位到页面中的某个位置)
知识引入
前端页面：
1.Web页面
2.PC端程序页面
3.移动端页面
什么是HTML页面？
特点：运行在浏览器里
HTML超文本标记语言
超文本：文本、声音、图片、视频、表格、链接
标记：由许许多多的标签组成
HTML结构
认识HTML标签
标签形式：
html
<body>hello</body>解释：
标签名：body
标签内容：hello
双标签：<body>+</body>
单标签：出现的少
html
<bodyid="myId">hello</body>标签属性：id属性≈给此标签设置了唯一的标识符（身份证号码）
HTML文件基本结构
html
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>解释：
html标签：根标签（最顶层标签）
head标签：页面属性
body标签：页面内容
title标签：页面标题
标签层次结构
父子关系+兄弟关系
html
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>解释：
所有标签都是html标签的子标签
父子：head父-title子
兄弟：head-body
查看页面结构
使用chrome开发者工具
开启开发者工具：F12或右键审查元素，切换到 Elements 标签, 就可以看到页面结构细节：
标签之间的结构关系 , 构成-> DOM 树
（ DOM 是 Document Object Mode ( 文档对象模型 ) 的缩写）
快速生成代码框架
html
<!DOCTYPE html><!--指定当前html版本5-->>
<html lang="en"><!--指定当前页面内容为英文，有些浏览器可提示是否翻译-->>
<head>
<meta charset="UTF-8"><!--浏览器解码规则-->>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端适配-->>
<title>Document</title>
</head>
<body>
</body>
</html>IDEA：！+Tab键
VSCode：！+Enter
细节处（了解即可）：（主要内容已在注释处给出）
HTML常见标签
注释标签
html
<!-- 我是注释 -->快捷键（生成/取消注释）：ctrl+/
标题标签：h1-h6
html
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>六个： h1 - h6. 数字越大 , 字体越小、越细
段落标签：p
html
<p>这是一个段落</p>使用前代码展示：
使用前页面效果：
使用后代码展示：
使用后页面效果：
注意：
①p 标签之间存在一个空隙
②当前的 p 标签描述的段落 , 前面还没有缩进 . ( 未来 CSS 会学 )
③自动根据浏览器宽度来决定排版 .
④html 内容首尾处的换行 , 空格均无效 .
⑤在 html 中文字之间输入的多个空格只相当于一个空格 .
⑥html 中直接输入换行不会真的换行 , 而是相当于一个空格 .
换行标签：br
①br 是 break 的缩写 . 表示换行 .
②br 是一个单标签 ( 不需要结束标签 )
③br 标签不像 p 标签那样带有一个很大的空隙 .
④<br/>是规范写法 . 不建议写成<br>
使用后代码展示：
使用后页面效果：
格式化标签
前者是强调作用：
加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签
效果图：
图片标签：img（key="value"形式）
img 标签必须搭配 src 使用 . 表示图片的路径 .
html
<img src="rose.jpg">相对路径：
同级路径（代码和图片在同一文件夹下）：./xxx.png
代码展示：
页面效果：
下级路径（在当前img文件夹下的图片）：./img/xxx.png
代码展示：
页面效果：
上级路径（在上一个文件夹下的图片）：../xxx.png
路径展示：与代码所在文件夹同级
代码展示：
页面效果：
绝对路径
磁盘图片路径
路径展示：
代码展示：
页面效果：
（注意：浏览器的安全策略会导致图片无法直接加载，如下图）
用绝对路径打开需要使用静态资源的方式去访问html文件：如下图
点击html文件：
最终效果图：
网络图片资源
获取到网路图片的网址：
代码展示：
页面效果：
img标签的其他属性
html
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">alt: 替换文本.
当文本 加载失败时 , 会显示一个替换的文字 .
代码展示：
页面效果：
title: 提示文本.
鼠标放到图片上, 就会有提示.
代码展示：
页面效果：
width/height: 控制宽度高度.
高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
代码展示：
页面效果：
border: 边框, 参数是宽度的像素.
但是一般使用 CSS 来设定.
代码展示：
页面效果：
注意：属性间无固定顺序：
页面效果：一样的
超链接标签：a
href属性
href: 必须具备, 表示点击后会跳转到哪个页面
html
<a href="http://www.baidu.com">百度</a>代码展示：
页面效果：
超链接标签：a的href展示
target属性
target: 打开方式 . 默认是 _self. 如果是 _blank 则用新的标签页打开
代码展示：
页面效果：
超链接标签：a的target演示
链接的形式
外部链接: href 引用其他网站的地址
html
<a href="http://www.baidu.com">百度</a>内部链接: 网站内部页面之间的链接. 写相对路径即可
html
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接: 使用 # 在 href 中占位
html
<a href="#">空链接</a>下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
html
<a href="test.zip">下载文件</a>网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
html
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>锚点链接: 可以快速定位到页面中的某个位置
html
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>表格标签
快速复制粘贴快捷键：shift+alt+↓
基本使用
表头：thead；表体：tbody
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>葱源</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>小甘</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>淘宝</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>CoderYanger</td>
<td>男</td>
<td>21</td>
</tr>
</table>
</body>
</html>页面效果：
调整格式后代码：
调整格式后的页面效果：
thead里的内容居中+加粗展示
代码展示：
页面效果：
合并单元格
跨行合并：rowspan="n"
跨列合并：colspan="n"
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1"width="500"height="300"cellspacing="0"cellpadding="50" align="center">
<thead><!--表头信息-->>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr> -->
<tr>
<td>葱源</td>
<td rowspan="2">男</td>
<td>20</td>
</tr>
<tr>
<td>小甘</td>
<!-- <td>男</td> -->
<td>20</td>
</tr>
<tr>
<td colspan="2">淘宝/男</td>
<!-- <td>男</td> -->
<td>20</td>
</tr>
<tr>
<td>CoderYanger</td>
<td>男</td>
<td>21</td>
</tr>
</tbody>
</table>
</body>
</html>页面效果：
注意：不必死记硬背，出现有串行串列的情况时，慢慢调试改就行了
列表标签
VSCode快捷键：快速生成列表
回车后效果：
也可以来HTML参考手册来查找相关细节：HTML参考手册
无序列表
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是无序列表</h1>
<ul>
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
</ul>
<ul type="disc">
<!-- 浏览器默认：实心圆 -->
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
</ul>
<ul type="square">
<!-- 方块 -->
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
</ul>
<ul type="circle">
<!-- 空心圆 -->
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
</ul>
</body>
</html>页面效果：
有序列表
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是有序列表</h1>
<!--a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示数字编号(默认)-->
<!-- start表示起始编号 -->
<ol>
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
<ol type="a">
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
<ol type="A" start="2">
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
<ol type="I">
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
<ol type="i"start="4">
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
</body>
</html>页面效果：
自定义列表
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>自定义列表展示</h1>
<dl>
<dt> 我的小弟们
<dd>咬人猫</dd>
<dd>兔总裁</dd>
<dd>阿叶君</dd>
</dt>
</dl>
</body>
</html>页面效果：
表单标签
用表单标签来完成服务器的一次交互：让用户输入信息二点重要途径
表单域：form标签
包含表单元素的区域
html
<form action="test.html">
... [form 的内容]
</form>
表单控件：
input标签
输入框、提交按钮等
1.文本框
html
<input type="text">代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 单行输入 -->
姓名<input type="text">
</form>
</body>
</html>页面效果：
2.密码框
html
<input type="password">代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 单行输入 -->
姓名<input type="text">
<br>
密码<input type="password">
</form>
</body>
</html>页面效果：
input标签密码框演示
3.单选框
html
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女注意 : 单选框之间必须具备相同的 name 属性 , 才能实现 多选一 效果 .
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 单行输入 -->
姓名<input type="text">
<br>
密码<input type="password">
<br>
<!-- name相同时保证只能是男或女 -->
<!-- checked保证默认值，男和女都设置默认值时，具体默认值取决于浏览器的判断 -->
性别<input type="radio"name="gender"checked="checked">男
<input type="radio"name="gender">女
</form>
</body>
</html>页面效果：
4.复选框
html
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 单行输入 -->
姓名<input type="text">
<br>
密码<input type="password">
<br>
<!-- name相同时保证只能是男或女 -->
<!-- checked保证默认值，男和女都设置默认值时，具体默认值取决于浏览器的判断 -->
性别<input type="radio"name="gender"checked="checked">男
<input type="radio"name="gender">女
<br>
爱好
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">玩游戏
</form>
</body>
</html>页面效果：
5.普通按钮
html
<input type="button" value="我是个按钮">当前点击了没有反应 . 需要搭配 JS 使用 ( 后面会重点研究 )
html
<input type="button" value="我是个按钮" onclick="alert('hello')">代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 单行输入 -->
姓名<input type="text">
<br>
密码<input type="password">
<br>
<!-- name相同时保证只能是男或女 -->
<!-- checked保证默认值，男和女都设置默认值时，具体默认值取决于浏览器的判断 -->
性别<input type="radio"name="gender"checked="checked">男
<input type="radio"name="gender">女
<br>
爱好
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">玩游戏
<br>
<!-- value表示在按钮上显示的文字，alert表示按此按钮之后弹出的页面 -->
<input type="button" value="这是一个普通按钮" onclick="alert('hello')">
</form>
</body>
</html>页面效果：
6.提交按钮
html
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 将输入的课程信息提交到对应网址里去 -->
<form action="https://blog.csdn.net/Miraitowa_6?type=blog">
课程<input type="text"name="course">
<input type="submit">
<br>
</form>
</body>
</html>提交前页面效果：
？后是填写的数据
提交后页面效果：
7.清空按钮
html
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>清空按钮必须放在 form 中 . 点击后会将 form 内所有的用户输入内容重置
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 将输入的课程信息提交到对应网址里去 -->
<form action="https://blog.csdn.net/Miraitowa_6?type=blog">
课程<input type="text"name="course">
<input type="submit">
<input type="reset">
<br>
</form>
</body>
</html>页面效果：
8.选择文件
html
<input type="file">
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 将输入的课程信息提交到对应网址里去 -->
<form action="https://blog.csdn.net/Miraitowa_6?type=blog">
课程<input type="text"name="course">
<input type="submit">
<input type="reset">
<input type="file">
<br>
</form>
</body>
</html>打开文件页面效果：
选择文件后页面效果：
label标签
搭配 input 使用 . 点击 label 也能选中对应的单选 / 复选框 , 能够提升用户体验
for 属性 : 指定当前 label 和哪个相同 id 的 input 标签对应 . ( 此时点击才是有用的 )
html
<label for="male">男</label> <input id="male" type="radio" name="sex">代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- for的作用：把当前的包裹的内容与哪一个元素进行关联 -->
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<!-- 关联之后点击"男"这个字就能达到点小圆圈的效果 -->
<label for="female">女</label>
<input type="radio" name="sex" id="female">
</body>
</html>页面效果：
select标签
下拉菜单
option 中定义 selected="selected" 表示默认选中 .
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- for的作用：把当前的包裹的内容与哪一个元素进行关联 -->
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<!-- 关联之后点击"男"这个字就能达到点小圆圈的效果 -->
<label for="female">女</label>
<input type="radio" name="sex" id="female">
<select name="" id="">
<option value="">--请选择年份--</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>
</body>
</html>页面效果：
默认值设置为1993的代码展示：
默认值设置为1993的页面效果：
textarea标签
代码展示：
页面效果：
也是有滚轮的
无语义标签
无语义没有固定的用途，拿这个标签啥都可以干
div 标签 , division 的缩写 , 含义是 分割
span 标签 , 含义是跨度
代码展示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div>
<span>吃饭</span>
<span>睡觉</span>
<span>玩游戏</span>
<span>运动</span>
</div>
<div>吃饭</div>
<div>睡觉</div>
<div>玩游戏</div>
<div>运动</div>
</div>
</body>
</html>页面效果：
