三，常用标签
1.基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 非关闭型 |
| p | 段落标签 | 关闭型，块级标签，前后有明显的间隔 |
| h1,h2....h6 | 标题标签 | 按照h1到h6逐渐变小，块级标签，加粗显示 |
| pre | 预格式化文本标签 | 保留编码时的格式 |
| div | 分区标签 | 常作用容器来使用，一般用来页面布局，块级标签 |
| span | 范围标签 | 默认没有任何效果，一般用来设置行内的特殊样式 |
| ol,li | 有序标签 | 有顺序的项目列表 |
| ul,li | 无序标签 | 无顺序的项目列表 |
| dl,dt,dd | 定义列表 | 对术语、图片等进行描述定义的列表 |
| hr | 水平线标签 | 非关闭型、块级标签 |
| img | 图像标签 | 非关闭型、行级标签 |
1.1 有序列表
ol: 全称是ordered list li: 全称是list item 定义：表示有序列表，通常渲染为一个带编号的列表。 默认使用阿拉伯数字，从1开始标记，可以通过属性（type）进行修改
-
type属性：设置列表前的符号标记，取值：数字1（默认）、字母a或A、罗马数字i或I
-
start属性：设置起始值，值必须是数字
用法：
<ol type="值" start="1"> <li>内容</li> <li>内容</li> <li>内容</li> </ol>
案例：
<ol>
<li> 网页</li>
<li>咨询</li>
<li>知乎</li>
<li>贴吧</li>
<li>视频</li>
</ol>
案例：
1.2 无序列表
ul: 全称是unordered list li: 全称是list item 定义：表示一系列无序的列表项目，通常渲染为项目符号列表 默认使用实心圆作为符号标记，可以通过属性进行修改
-
type属性：设置列表前的符号标记，取值：disc实心圆（默认）、circle空心圆、square正文形、none不 显示符号
用法:
<ul type="disc"> <li>内容</li> <li>内容</li> <li>内容</li> </ul>
案例：
<ul>
<li> 网页</li>
<li>咨询</li>
<li>知乎</li>
<li>贴吧</li>
<li>视频</li>
</ul>
案例：
1.3 定义列表
自定义列表以 <dl>标签开始。每个自定义列表标题以 <dt> 开始。每个自定义列表项的描述以 <dd>开始。 dl:全称是definition list dt: 全称是definition title dd: 全称是definition description 用法：
<dl> <dt>标题</dt> <dd>描述</dd> <dt>标题</dt> <dd>描述</dd> ...... </dl>
案例：
<dl>
<dt>水果</dt>
<dd>梨子</dd>
<dd>西瓜</dd>
<dd>草莓</dd>
<dt>数码产品</dt>
<dd>手机</dd>
<dd>相机</dd>
<dd>电脑</dd>
</dl>
运行结果:
1.4 水平线标签
hr: horizontal 定义：在页面上显示一条水平线。 常用属性：
-
color：颜色 两种写法：
-
颜色名称，如red、green、blue、white、black、pink、orange等
-
16进制的RGB：Red、Green、Blue，用法：#RRGGBB，每个颜色的范围是0255，转换为16进制 为00FF 如#FF0000、#00FF00、#0000FF、#FFFFFF、#000000、#CCCCCC、#FF7300。
-
-
size 粗细，数值
-
width 宽度 两种写法： 像素，绝对值（固定值） 百分比，相对值，相对于父容器的宽度的百分比
-
align 对齐 取值：center（默认）、left、right
作用：表示文档中的主题性内容更改 案例：
<hr color="red" size="5" width="200px">
运行说明：
1.5图像标签
img: image 定义：将一张图片嵌入文档 常见图片格式：.jpg、.png、.gif、.bmp 语法：
<img src="url">
常用属性：
-
src：source 指定图片的路径（来源），必须有 如果图片与html页面在同一个文件夹中，可以直接写图片名称 习惯上，会将多个图片放到统一的文件夹中，如images，此时需要在图片名称的前面添加文件夹的名称 images/
-
alt：当图片无法显示时的提示信息
-
title：当鼠标停留在图片上时显示的提示信息
-
width/height：设置图片的宽和高
-
默认图片原尺寸显示 如果只设置其中的一个，则另一个按比例缩放 如果同时设置宽和高，可能会导致图片变形
-
两种写法： 像素，绝对值（固定值） 百分比，相对值，相对于父容器的尺寸的百分比
案例：
<img src="../images/rabbit.jpg" width="200px" height="150px" alt="兔子" title="rabbit">
运行结果:
2.其他标签
| 标签 | 含义 | 说明 |
|---|---|---|
| i | 斜体标签 | 全称是italic |
| em | 强调的内容 | 在浏览器中显示时一般为斜体 |
| address | 地址 | 在浏览器中显示时一般为斜体，块级标签 |
| b | 加粗显示 | 全称是bold |
| strong | 强调的内容 | 在浏览器中显示时一般为加粗 |
| del | 删除线 | delete |
| ins | 下划线 | |
| sub | 下标 | |
| sup | 上标 | |
| bdo | 设置文本方向 | 通过属性dir="rtl"设置文本从右到械显示 right to left，也可以反过来 |
| abbr | 设置文字缩写 | 通过title属性设置当属性停留在文字上时显示的提示信息 |
| small | 相当于当前字号减小一号 | |
| big | 相当于当前字号增加一号 |
3.头部标签
meta 定义网页的摘要信息，如字符编码、关键字、描述、作者等
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置关键字 -->
<meta name="keywords" content="it,HTML,CSS..">
<!-- 设置描述信息 -->
<meta name="description" content="做专业的教育。。。。。">
<!-- 设置作者 -->
<meta name="author" content="小明">
<!-- 实现刷新跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> -->
</head>
-
title 定义网页的标题
-
style 定义内部CSS样式
-
link 引用外部CSS样式
<!-- 引用外部CSS样式文件 -->
<link rel="stylesheet" href="CSS样式文件的路径">
-
script 定义或引用脚本
-
base 定义基础路径 默认以当前页面文件所在位置为相对路径的参照
<!-- 定义基础路径 -->
<base href="images/">
<!-- 载入图片时，可以直接引用在images中的图片，不需在前面加入images,修改了现在的路径 -->
4.标签嵌套
一个标签中嵌套着另一个标签 标签不能瞎嵌套，如以下嵌套是错误的：
<p style="width: 300px;height: 300px;background: green;"> <div style="width: 200px;height: 200px; background: blue;">world</div> </p>
浏览器渲染后显示的页面代码与编码时有所不同 浏览器提供的开发工具：用来帮助开发人员查看和调试页面 如何打开：
-
在页面中右击——>检查/审查元素/查看元素
-
按F12
常用工具：
-
Elements：从浏览器的角度查看页面，浏览器渲染页面时的结构内容
-
Console：控制台，显示各种警告和错误信息
-
Network：查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源花费的时间
四、超链接
1.简介
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 使用超链接可以从一个页面跳转到另一个页面，实现页面间的导航
当鼠标移动到超链接文本上时，鼠标箭头会变成一只小手
超链接的有三种类型：
-
普通链接/页面间链接，跳转到另一个页面
-
锚链接，跳转到锚点
-
功能性链接，实现特殊功能
2.基本用法
使用标签创建超链接 语法：
<a href="链接地址" target="链接打开位置">链接文本或图像</a>
常用属性：
-
href 链接地址/路径，链接地址
-
target 链接打开位置，取值： self（自身、当前，默认值）、blank(空白、新的)、parent（父层框架）、top（顶层框架）、自定义
路径分类：
-
相对路径
相对于当前文件的所在路径 不是以根开始的路径 . 表示当前路径 .. 表示上一级路径
-
绝对路径
以根开始的路径 http://www.baidu.com D:/Software/b.html
2.1 超链接属性
target属性 在 标签中使用 target 属性，你可以规定在何处打开链接文档。 target 属性值有：
-
_blank：在新窗口中打开被链接文档。
-
_self：默认。在相同的框架中打开被链接文档。
-
_parent：在父框架集中打开被链接文档。
-
_top：在整个窗口中打开被链接文档。
-
framename：在指定的框架中打开被链接文档。
实例：
<a href="https://www.baidu.cn" target="_blank">访问百度</a>
title属性 title提示文本 鼠标放到链接上显示的文字
<a href="https://www.baidu.cn" target="_blank" title="w3cschool">访问百度</a>
3.锚链接
3.1 简历
点击链接后跳转指定的位置（锚点 anchor） 锚链接的分类：
-
页面内的锚链接
-
页面间的锚链接
3.2 页面内的锚链接
步骤：
-
定义锚点（标记）
<a name="锚点名称">目标位置</a>
-
链接锚点
<a href="#锚点名称">链接文本</a>
3.3 页面间的锚链接
<a href="目标页面#锚点名称">链接文本</a>
4.功能性链接
5.URL
5.1 简介
URL：Uniform Resource Locator 统一资源定位符，用来定位资源所在位置，最常见的就是网址
https://t1.huanqiu.cn/4ac5853976fa0f2a7fbdac13593ddb32.jpg https://www.baidu.com/img/bd_logo1.png https://www.w3cschool.cn/
5.2 组成
https://www.baidu.com:80/web/html/images/logo.png?name=tom&age=21&sex=male#first https://www.baidu.com/s?ie=utf•8&f=8&rsv_bp=1&rsv_idx=1&rsv_sug1=10&rsv_sug7=100&bs=ssl file://d:\Users\User\Desktop\code\day02 ftp://ftp.itany.com/note/HTML.md https://www.w3cschool.cn/ http://xiazai.zol.com.cn/btzhongzi_soft_index/btzhongzi_page_1.html
一个完整的URL由8个部分组成：
-
协议 protocol，如： http 超文本传输协议，用来访问Web网站 HyperText Transfer Protocol https 更加安全的协议 ftp 文件传输协议，用来访问服务器上的文件，实现文件的上传和下载 File Transfer Protocol file 文件协议，用来访问本地文件
-
主机名 hostname 服务器地址，如www.baidu.com、ftp.itany.com
-
端口 port 位于主机名的后面，使用冒号隔开 不同的协议使用不同的端口号，如：http使用80，https使用443，ftp使用21 如果使用的是默认端口，则端口可以省略 如果使用的不是默认端口，则必须指定端口
-
路径 path 目标文件所在的路径结构，如：/web/html/images/
-
资源 resource 要访问的目标文件，如：logo.png
-
查询字符串 query string，也称为参数 在资源后面使用?开头的一组名称/值 名称和值之间以=隔开，多个之间以&隔开，如：?name=tom&age=21&sex=male
-
锚点 anchor，在资源后面使用#开头的文本，如：#first
-
身份认证 authentication，指定身份信息，如：ftp://账户:密码@ftp.itany.com/note/HTML.md
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
