HTML5
1、深入了解网站开发
UI设计师
设计稿
web前端开发工程师（H5开发）
设计稿–>代码
数据库里的数据–>显示到页面
HTML ：结构
CSS ：样式
JavaScript ：用户交互行为
web后端开发工程师
数据库
2、HTML基本结构和属性
HTML：超文本 标记 语言
超文本：文本内容 + 非文本内容（图片、视频、音频）
标记：<单词>
语言：编程语言
标记也叫做标签，分为单标签和双标签
html常见标签：HTML5 元素标签含义大全(元素周期表)—HTML5星空 (html5star.com)
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>
<header title="hello">hello world</header> <footer title="bye">see you world</footer>
设置title后当光标移至该语句时会出现该标题
3、HTML初始代码
每一个html文件都需要添加初始代码（符合html文件的规范写法），初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
！+ tab键：快捷创建html的初始代码
<!DOCTYPE html><!---文档声明：告诉浏览器这是一个html文件---> <html lang="en"> <!--- html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站，lang="zh-CN"表示一个中文网站 ---> <head> <meta charset="UTF-8"> <!--- 元信息：是编写网页的一些赋值信息 charset="UTF-8"国际编码，让网页不出现乱码的情况 ---> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><!---网页的标题---> </head> <body> <!---显示网页内容的区域---> </body> </html>
凡是跟网页头部相关的信息都在标签里书写，凡是和网页正文内容有关的信息都放在标签里书写
4、HTML注释
：在浏览器中看不到，只能在代码中看到
意义
- 把暂时不用的代码注释起来，方便以后使用。
- 对开发人员进行提示。
快捷添加删除注释
- ctrl + / ：给当前行内容加上注释
- shift + alt + a : 创建新的注释
5、HTML语义化
所谓html语义化指的是根据网页中内容的结构，选择适合的html标签进行编写
好处
- 在没有CSS的情况下，页面也能呈现出很好的内容结构
- 有利于SEO，让搜索引擎爬虫更好的理解网页
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）
- 便于团队开发与维护
6、标题与段落
h标签
p标签
标题 --> 双标签 ：
…
在一个网页中，h1标签最重要，并且一个.html文件中只能出现一个h1标签
h5，h6标签在网页中不经常使用
段落 --> 双标签 ：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>first</title> </head> <body> <h1>简介</h1> <h2>基本信息</h2> <p>男，2xxx年x月x日出生于xx</p> <p> xxxxxxxxxxxx </p> <h2>早年经历</h2> <p>从小就帅</p> <h2>个人生活</h2> <p>美女环绕3</p> </body> </html>
7、文本修饰标签
- 强调 --> 双标签 ：（加粗）
- ：（斜体）
strong的强调性更强，em稍弱。
- 下标 ：
- 上标 ：
- 删除文本 ：
- 插入文本 ：
一般情况下，删除文本都是和插入文本配合使用的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>second</title> </head> <body> <p> 北京著名的高档百货店————<em>赛特购物中心</em>即将闭店。昨天，赛特购物中心总台服务人员表示“<strong>如果手里有购物卡，请尽快到店消费</strong>”。据这位服务人员介绍，目前购物中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>，<ins>现清仓价只需1999元！</ins> </p> <p> 勾股定理：a <sup>2</sup> + b <sup>2</sup> = c <sup>2</sup> </p> <p> 水分子：H<sub>2</sub>O </p> </body> </html>
实现效果：
8、图片标签与图片属性
img --> 单标签
- src：引入图片的地址
- alt：当图片出现问题的时候，可以显示一段友好的提示文字
- title：提示信息（鼠标放置时出现）
- width、height：图片的大小（在有带宽高属性时，图片未加载时段落间距便已经固定，未设置该属性则图片未加载时前后两段罗没有间距）
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>third</title> </head> <body> <img src="https://itenant/amp/entityid/AAMqqyx.img?h=416&w=624&m=6&q=60&o=f&l" alt="图片出现错误" title="男乒夺冠"> <!---该图片地址不存在---> </body> </html>
实现效果：
如果alt=“”则什么都没有出现，无法到此处存在图片。
9、引入文件的地址路径
相对路径
.在路径中表示当前路径
,.在路径中表示上一级路径（…/…/img/1.jpg表示当前文件的外面两层中的img文件夹中的1图片）
绝对路径
E:/ke/qf_dl2021/img/animal/dog.jpg
http://cms-bucket.ws.126.net/2019/04/16/7a5b31e0ce5474a7517.jpeg
10、跳转链接
a --> 双标签
- herf属性：链接的地址
- herf属性：链接的地址
- target属性：可以改变链接打开的方式，默认情况下当前页面打开（
_self），新窗口打开（_blank)
base --> 单标签：改变标签的默认行为
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>forth</title> <base target="_blank"> </head> <body> <!-- <a href="http://www.baidu.com" target="_self">访问百度</a> --> <a href="http://www.baidu.com" title="访问百度"> <img src="1.png" alt=""> <br> 手机 </a> </body> </html>
11、跳转锚点
不产生新的页面，只是在当前页面不同位置进行跳转，即书签链接。
实现一
#号+id属性（加给h标签）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fifth</title> </head> <body> <a href="#语文书">语文</a> <a href="#数学书">数学</a> <a href="#英语书">英语</a> <h2 id="语文书">这是一本语文书</h2> <p>模拟段落</p> <h2 id="数学书">这是一本数学书</h2> <p>模拟段落</p> <h2 id="英语书">这是一本英语书</h2> <p>模拟段落</p> </body> </html>
实现二
#号+name属性（加给a标签）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fifth</title> </head> <body> <a href="#语文书">语文</a> <a href="#数学书">数学</a> <a href="#英语书">英语</a> <a name="语文书"></a> <h2>这是一本语文书</h2> <p>模拟段落</p> <a name="数学书"></a> <h2>这是一本数学书</h2> <p>模拟段落</p> <a name="英语书"></a> <h2>这是一本英语书</h2> <p>模拟段落</p> </body> </html>
12、特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，或者往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在html中，为它们准备了专门的代码。
作用：解决冲突，左右尖括号，添加多个空格
重点符号：&it,>,
13、列表
无序列表
<ul>、<li>：列表的最外层容器、列表项ul和li必须是组合出现的，他们之间是不能有其他标签的
<!---正确写法---> <ul> <li>第一项</li> <li>第二项</li> </ul>
<!---错误写法---> <ul> <p> <li>第一项</li> </p> </ul>
type属性：改变列表标记的样式，可以放在ul标签统一更改中，也可以放在p标签中更改（一般都是用CSS去控制）
tip：使用li*5后按tab键可以快速创建五个li标签
有序列表
<ol>、<li>：列表的最外层容器、列表项有序列表用的少，经常用的是无序列表，无序列表可以去代替有序列表。
定义列表
列表项需要添加标题和对标题进行描述的内容
<dl>：定义列表<dt>：定义专业术语或名词<dd>：对名词进行解释和描述
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sixth</title> </head> <body> <dl> <dt>HTML</dt> <dd>超文本标记语言</dt> <dt>CSS</dt> <dd>层叠样式表</dt> <dt>JavaScript</dt> <dd>网页脚本语言</dt> </dl> </body> </html>
运行结果：
嵌套列表
列表之间可以互相嵌套形成多层级列表
快捷方式：ul>li*4>ul>li*5+tab（>表示下一层嵌套）
删除多行的缩进：shift+tab
鼠标左键，shift+alt，鼠标左键，出现同一列（或者Ctrl+左键）
14、表格
表格标签
<table>：表格的最外层容器<tr>：定义表格行<th>：定义表头<td>：定义表格单元<caotion>：定义表格标题
他们之间有嵌套关系，要符合嵌套规范
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>seventh</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<thead><!---语义化标签--->
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody><!---语义化标签--->
<tr>
<td>2021年8月7日</td>
<td>天气晴</td>
<td>适合出行</td>
</tr>
<tr>
<td>2021年8月8日</td>
<td>有小雨</td>
<td>出门注意带伞</td>
</tr>
</tbody>
<tfoot><!---语义化标签--->
</tfoot>
</table>
</body>
</html>
运行结果
语义化标签：<thead>,<tbody>,<tfoot>（无实际作用，只是为了更规范）在一个table中tbody是可以出现多次的，但是thead和tfoot只能出现一次
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)