三,常用标签
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