基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 非关闭型 |
| p | 段落标签 | 关闭型，块级标签，前后有明显间隔 |
| h1、h2、h3...h6 | 标题标签 | 按照h1到h6逐渐变小，块级标签，加粗显示 |
| pre | 预格式化文本标签 | 保留编码的格式 |
| div | 分区标签 | 常作用容器来使用，一般用来页面布局，块级标签 |
| span | 范围标签 | 默认没有任何效果，一般设置行内的特殊样式 |
| ol、li | 有序列表 | 有顺序的项目列表 |
| ul、li | 无序列表 | 无顺序的列表 |
| dl、dt、dd | 定义列表 | 对术语、图片等进行描述定义 |
| hr | 水平线标签 | 非关闭型 |
| img | 图像标签 | 非关闭型 |
其他标签
| 标签 | 含义 | 说明 |
|---|---|---|
| i | 斜体标签 | italic |
| em | 强调的内容 | 在浏览器中显示时一般为斜体 |
| address | 地址 | 在浏览器中显示时一般为斜体,块级标签 |
| b | 加粗显示 | bold |
| strong | 强调的内容 | 在浏览器中显示一般为加粗 |
| del | 删除线 | delete |
| ins | 下划线 | |
| sub | 下标 | |
| sup | 上标 | |
| bdo | 设置文本方向 | 通过属性dir="rtl"设置文本从右到左显示right to left |
| abbr | 设置文字缩写 | 通过title属性设置当属性停留在文字上时显示的提示信息 |
| small | 相当于当前字号减小一号 | |
| big | 相当于当前字号增加一号 |
为了更好的语义化
头部标签
- meta定义网页的摘要信息：如字符编码、关键字、描述、作者等
- title定义网页的标题
- sytle定义内部css样式
- link引用外部css样式
- script定义或引用脚本
- base定义基础路径
默认当前页面文件所在的位置为相对路径的参照
有序列表
ol:orderd list
li:list item
默认使用阿拉伯数字，从1开始标记，可以通过属性进行修改
- type属性：设置列表的符号标记，取值:数字1(默认)、字母a或A、罗马数字i或I
- start属性:设置起始值，值必须是数字
无序列表
ul:unordered list
li:list item
默认使用实心圆作为符号标记，可以通过属性进行修改
- type属性：设置列表前的符号标记，取值：disc实心圆（默认）、circle空心圆,square正文形、nono不显示符号
定义列表
dl:definition list
dt:definition title
dd:definition description
水平线标签
hr:horizontal
常用属性
- color:颜色
两种写法：
颜色名称：如red、green、blue、white、black、pink、orange等
16进制的RGB：Red、Green、Blue,用法：#RRGGBB，每个颜色的范围是0-255，转换为16进制为00-FF
如#FF0000,#00FF00,#0000FF,#FFFFFF,#000000,#CCCCCC
- size粗细，数值
- width宽度
两种写法
像素：绝对值（固定值）
百分比，相对值，相对于父容器宽度的百分比
- align对齐
取值：center(默认)，left,right
图像标签
img:image
常见图片格式：.jpg、.png、.gif、.bmp
常见属性：
- src:source指定图片的路径（来源），必须有
如果图片与html页面在同一个文件中，可以直接写图片名称
习惯上，会将多个图片放到统一一文件夹中，如images,此时需要在图片名称的前面 添加文件夹的名称images/
- alt:当图片无法显示时的提示信息
- title:当鼠标停留在图片上时显示的提示信息
- width/height:设置图片的宽和高
默认图片原尺寸显示
如果只设置其中的一个，则另一个按比例缩放
如果同时设置宽和高，可能会导致图片变形
两种写法
像素：绝对值（固定值）
百分比：相对值，相对于父容器的尺寸的百分比
标签嵌套
一个标签中嵌套着另一个标签
标签不能瞎嵌套，如以下嵌套是错误的：<p><div></div></p>
浏览器渲染后显示的页面代码与编码时有所不同
浏览器提供的开发工具，用来帮助开发人员查看和调试页面
如何打开：
- 在页面中右击-检查/审查元素/查看元素
- 按F12
常用工具
- Elements:从浏览器的角度查看页面，浏览器渲染页面时的结构内容
- Console:控制台，显示各种警告和错误信息
- Network:查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源花费的时间