块级元素 和 行内元素
- 块级元素，特点独占一行
- 行内元素，特点不独占一行
- 规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）
- 规则2：行内元素中能写：行内元素，但不能写：块级元素
- 特殊规则：h1-h6不能互相嵌套
- 特殊规则：p标签中不能写块级元素
<marquee> 标签已经废弃
常用标签
<em></em> 语义：着重阅读的内容，斜体字
<strong></strong> 语义：十分重要的内容 ， 粗体字
<span></span> 语义：
不常用标签
| 标签名 | 标签语义 |
|---|---|
| cite | 作品标题（书籍、歌曲、电影...） |
image.png
image.png
相对路径和绝对路径
// 相对路径
./ 表示：当前位置(可以省略不写)
文件夹名/ 表示：下一级
../ 表示： 上一级
// 绝对路径，分为两类：本地绝对路径、网络绝对路径
// 本地绝对路径
E:/demo/1.png
// 网络绝对路径
https://demo.com/1.png
图片常用格式
- jpg格式，扩展名； .jpg 或 .jpeg；是一种有损的压缩格式。占用空间小
- png格式，扩展名： .png; 是一种无损的压缩格式。占用空间略大
- bmp格式，扩展名：.bmp; 不进行压缩，在最大程度上保留图片更多细节。占用图片极大
- gif格式：扩展名：.gif； 仅支持256种颜色，色彩呈现不是很完整，支持动态图
- webp格式：扩展名：.webp，谷歌退出的一种格式，专门用来在网页中呈现图片，但兼容性不太好，支持动态图
- base64格式：本质：一串特殊的文本，要通过浏览器打开，传统中看图应用无法打开。原理：把图片进行base64编码，形成一串文本。不挑文件位置随时可以打开查看
超链接 锚点应用
- 区分大小写
<a href="#htl" >跳到锚点</a>
// 第一种
<a name="htl"></a> // name属性只能在 `a` 标签中生效使用，具有name属性的a标签是瞄点
// 第二种
<p id="htl"></p>
// 回到顶部
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
- 唤起应用
<a href="tel:10086">电话联系</a>
<a href="mailto:123@qq.com">邮箱联系</a>
<a href="sms:10086">短信联系</a>
超文本
- 含义：是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容。
列表
- 有序列表（Ordered List）
<h2>要把大象放冰箱需要几步？</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
<ol>
- 无序列表（Unordered List）
<h2>想去哪几个城市？</h2>
<ul>
<li>上海</li>
<li>杭州 </li>
</ul>
- 定义列表（Definition List）
<h2>如何学习好？</h2>
<dl>
<dt>做好笔记</dt> // 术语名称
<dd>笔记是我们复习的一个抓手</dd> // 术语描述
<dt>多练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
</dl>
- 📢注意事项
1. li标签最好写在ul或ol中，不要单独使用
2. 嵌套时，务必把解构写完整
3. 一个dt 可以有多个dd
表格
- 定义
表格: <table>
表格标题: <caption>
表格头部: <thead>
表格主体: <tbody>
表格脚注: <tfoot>
每一行: <tr>
每一个单元格: <th>、<td>（表格头部中用th，表格主体、表格脚注中用 td） - table 常用属性
border：表格边框，值 > 1 需要的则是表格外边框，不能设置单元格边框
width：表格宽度
height：表格高度，表格头部、表格脚注 不生效
cellspacing: 单元格间的间隙
align: 水平方向对齐方式 center、left、right
valign：垂直方向对其方向 bottom、top、middle - thead 常用属性
height、align（默认居中）、valign - tbody 常用属性
height、align（默认靠左）、valign - tfoot 常用属性
height、align（默认靠左）、valign - th、td 常用属性
width、 height、align、valign、rowspan: 指定要跨的行数、colspan：指定要跨的列数
标签
<br> 换行
<hr> 分割线
<pre></pre> 按原文显示(一般用于页面中前端大段代码)
表单
// method: 方法；get、post ...，默认是get
// action： 动作
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" /> // name为百度后端工程师固定的
<button>搜索</button>
</form>
框架标签
- <iframe src="https://www.baidu.com" width="100" height="100"></iframe>
// 与超链接的target属性配合使用
<a href="https://www.toutiao.com" target="tt">点我看新闻</a>
<iframe name="tt" frameborder="0" width="900" height="400"></iframe>
// 与表单的target属性配合使用
<form action="https://so.toutiao.com/search" target="container">
<input type="type" name="keyword">
<input type="submit" value="搜索" >
</form>
<iframe name="container" frameborder="0" width="900" height="400"></iframe>
字符实体
含义：用一种特殊的形式表达某个符号
官方列表
“ ” = “Ӭ” = 空格
“<” 小于号
“>” 大于号
“&” = &
“¥” = ￥
“©” 版权所有©
“×” 乘法符号
“÷ ;” 除法符号
“™” 商标TM
全局属性
- id，标签指定唯一标识，不能重复
- class，标签指定类名，随后通过css就可以给标签设置样式
- dir，内容方向
- title，给标签设置一个文字提示
- lang，给标签指定语言
meta 元信息
// 配置字符编码
<meta charset="UTF-8">
// 针对IE浏览器的一个兼容性设置，IE8以上强制用edge
<meta http-equiv="X-UA-compatible" content="IE=edge" >
// 针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语" >
// 配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关" >
// 针对搜索引擎爬虫配置
<meta name="robots" content="见下表1">
// 配置网页自动刷新，10秒跳到百度，跳转无法进行后退
<meta http-equiv="refresh" content="10; url=http://www.baidu.com" >
表1
