标签
1.双标签（对标签）：
a:成双成对出现，可以包含内容；
b:有开始标签，有结束标签，结束标签在单词前有“/”；
2.单标签：
a:只有开始标签，没有结束标签
b:单标签在开始标签中结束，通常应该在单标签的大于号前加“/”表示结束。
c:单标签的功能需要使用属性来实现
元素
元素：
1.从开始标签到结束标签中的所有代码（内容）
2.单标签中的所有代码
元素内容：
1.从开始标签到结束标签中的内容（不包括标签）
2.单标签没有元素内容
元素属性：
1.属性是帮助标签完善功能
2.写在开始标签中，和标签名之间有空格。
3.属性名="属性值"，引号要使用英文状态的符号
4.标准属性：通用于几乎所有标签的属性
5.特殊属性：不通用于所有标签的属性
代码书写规范
1.所有代码全部使用小写
2.所有标签都要正常关闭
3.所有代码必须在英文半角状态输入(很重要)
4.<!DOCTYPE html>必须要写在最前面
link标签
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
link:引入外部文件
rel ：定义当前文档与被链接文档间的关系
type：定义被链接文档的mime类型
href：定义被链接文档的路径
标题栏图标设置
标题栏图标设置：16X16像素
1.网站根目录下放一个名称：favicon.ico图片文件。浏览器会自动显示在标题栏中。
2.使用ico图标作为标题栏图标
可以用工具生成ico图标
<!--<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>-->
3.使用jpg格式的图片作为标题栏图标
<!--<link rel="icon" type="image/jpeg" href="img/favicon.jpg"/>-->
4.使用png格式的图片作为标题栏图标
<link rel="icon" type="image/png" href="img/favicon.png"/>
5.使用gif格式的图片作为标题栏图标
meta标签关键字和描述
<meta name="keywords" content="a关键字,b关键字,c关键字"/>
<meta name="description" content="要设置的描述内容，建议不超过100字"/>
关键字设置：
meta标签
name="keywords"
content="要设置的关键字，可以使用多个，建议不超过5个。多个关键字用英文状态的“,”分隔。"
描述设置：
meta标签
name="description"
content="要设置的描述内容，建议不超过100字"
关键字和描述：
1.关键字和描述不是给人看，是用于供搜索引擎使用
2.关键字和描述是网页优化很重要的部分
meta标签自动跳转
页面自动跳转语法：
<meta http-equiv="refresh" content="多少秒后执行跳转;url=要跳转的地址"/>
页面自动刷新语法：
<meta http-equiv="refresh" content="多少秒后执行跳转"/>
样式使用
设置样式语法：
<style type="text/css">
css样式内容
</style>
引入样式文件语法（用得最多）：
<link rel="stylesheet" type="text/css" href="文件路径"/>
超链接
<a href="https://www.baidu.com" target="_blank">百度</a>
超链接:从一个网页链接到另一个网页
语法：<a href="要链接的地址">我要自学网</a>
href:要链接的地址
target:指定在哪里打开目标页面
_blank：在新窗口中打开目标页面
_self: 在当前窗口中打开目标页面（默认值）
_parent : 把文档载入父窗口或包含了超链接引用的框架的框架集
_top: 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
ID属性
<a id="a1">A1</a>
换行符：<br />
<a id="a2">A2</a>
<p id="a3">A3</p>
<style type="text/css">
#a3{
color: red;
}
</style>
ID属性：
1.是元素唯一标识
2.同一个页面中不能有相同的id
3.同一页面中，不同元素有相同id也不行
class属性
<a class="dyz" href="https://www.baidu.com" target="_blank">张三</a>
<a class="dyz" href="https://www.baidu.com" target="_blank">李四</a>
<p class="dyz ntx">王小花</p>
<p class="dyz ntx">赵小美</p>
<style type="text/css">
.dyz{
font-size: 50px;
color: red;
}
.ntx{
font-weight: 600;
}
</style>
class属性(类)：
1.相同的元素，不同的元素可以有相同的类名（）class值
2.同一个元素可以有多个类名，用空格隔开
3.主要用来选择一堆元素，定义样式
4.规定类名时，类名不能以数字开头
title、style属性
<a href="https://www.baidu.com" title="百度">百度</a>
<a href="https://www.baidu.com" style="color: blue;font-weight: 600;">百度</a>
title属性：
1.规定元素的额外信息
2.鼠标移到元素上时显示提示文字
style属性：
1.规定元素的行内样式
2.style设置的样式会覆盖其它方式设置的样式
3.可以设置多个属性值，用";"隔开
自定义属性
自定义属性：
1.自己定义属性名，属性值
2.定义属性用得不多
自定义数据属性：
1.用于存储页面或应用程序的私有自定义数据
2.data-*属性包括两部分：
a."*"表示自定义的属性名，在data-之后必须包含至少一个字符
b.属性值可以是任何字符串
3.在微信小程序中用得多
<a href="https://www.51zxw.net" a="a">a</a>
<a href="https://www.51zxw.net" data-a="a">a</a>
文件下载
<a href="a.rar">文件下载</a>
<a href="a.png" download="a图片">图片下载</a>
<文件下载：
<a href="文件路径" download="设置文件名称">文件下载</a>
href属性：指定文件下载路径
download属性：指定下载文件名称
不添加download属性时：浏览器不能识别文件，可以直接下载。如果浏览器能识别文件，会直接显示
添加download属性时：不管浏览器是否可以识别文件，都会直接下载
锚链接
1.当网页内容太长，需要跳转到具体位置时，可以使用锚链接
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<a href="#three">第三章</a>
<p id="one">······</p>
<p id="two">······</p>
<p id="three">······</p>
空链接
<a href="#">返回顶部（空链接）</a>
外部锚链接
跳转到其它页面具体位置锚链接
1.目标页面具体位置要设置锚点
2.用a标签中的href属性指定目标页面的路径+指定位置的id
<a href="other.html/#one">第一章</a>
<a href="other.html/#two">第二章</a>
<a href="other.html/#three">第三章</a>
这篇博客详细介绍了HTML的基本元素，包括标签、ID和class属性的使用，以及link、meta、超链接和样式的相关知识。还涵盖了标题栏图标设置、元数据描述、文件下载和各种类型的链接操作。
扫一扫
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
