🚀一、基础标签
Hyper Text Markup Language
(超文本标记语言)的缩写,是构成Web页面的基本元素HTML模板的基本含义
<!DOCTYPE html> <!--规定了浏览器文档使用哪种规范,以前需要在后面写上很长一串规范地址,现今HTML5规范无须额外指定-->
<html lang="zh-cn"> <!--所有网页最大的结构 网页中所有的标签存放在html标签中-->
<head> <!--网页的头部 告诉浏览器一些相关的信息-->
<meta charset="UTF-8"> <!--表示网页编码格式 推荐UTF-8国际编码,常用的还有gbk国标-->
<title>Title</title> <!--网页标题-->
</head>
<body> <!--网页的主体 我们所看的网页结构 都是在body中的-->
</body>
</html>
属性="值"
的各种属性设置en
,代表网页是一个英文网页(不管你后续写的内容是不是英文),浏览器打开该网页会弹出翻译提示框zh-cn
,代表网页是一个中文网页,浏览器打开该网页不会弹出翻译提示框zh-cn
<!--注释-->
HTML规范中有很多很多的标签,常用的标签并不多。
meta标签写在head标签中,是一个辅助标签,根据属性不一样所表示的含义也不一样,常用的有:
<meta charset="utf-8">
<meta name="keywords" content="关键词1 关键词2">
用于表示该网页的关键词,便于搜索引擎的抓取(结合百度搜索进行理解)。
<meta name="description" content="网页的描述">
对该网页的简介,搜索引擎在搜索结果中会展示出来,便于用户了解信息(结合百度搜索进行理解)。
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
根据当前浏览器类型强制以特定内核进行渲染,如果是IE浏览器则使用最新内核,如果是双核浏览器则使用chrome内核。IE7及以下版本不支持这个属性。
div标签用于将文档划分为独立的、不同的部分,从而构成一个完整的网页。网页的主体骨架一般由div标签搭建(HTML5标准中有很多新标签也可代替div搭建骨架),每一个单独的div模块中也可继续用div搭建局部的骨架。
Tip:结合英文单词更好理解哦! division 分开;分隔。
h1~h6标签用于表示网页内容的标题,标签中的文字默认会出现不同程度的加粗与增大。
在一个网页中h1标签最好是有且仅有一个(有利于SEO优化),其他h标签可以根据需要出现多次。
Tip:结合英文单词更好理解哦! heading (页首或章节开头的)标题。
<!--举例:展示新闻信息-->
<ul>
<li>31省市区新增确诊15例</li>
<li>DWG战队获得S10全球总决赛冠军</li>
<li>拜登当选新一任美国总统</li>
<li>2020天猫双11成交额4982亿</li>
</ul>
ul列表前默认有实心圆点符号,可以通过修改type属性来改变这个符号(但是更推荐通过css来对其进行修改,这样更符合结构与样式分离的理念,后续学习中再介绍通过css来改变的写法):
<!--
type="disc" 实心圆点
type="circle" 空心圆点
type="square" 实心方块
type="none" 不显示符号
-->
<ul type="circle">
<li>31省市区新增确诊15例</li>
<li>DWG战队获得S10全球总决赛冠军</li>
<li>拜登当选新一任美国总统</li>
<li>2020天猫双11成交额4982亿</li>
</ul>
ol有序列表标签
ol标签用于展示有序的列表内容,规范上,其子标签必须是li。
<ol>
<li>打开冰箱门</li>
<li>将大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>
ol列表前默认有数字符号,可以通过修改type属性来改变这个符号(同上,更推荐使用css来改变):
<!--
type="1" 数字顺序
type="A" 或者 type="a" 字母顺序
type="I" 或者 type="i" 罗马数字顺序
-->
<ol type="A">
<li>打开冰箱门</li>
<li>将大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>
各个列表之间允许互相嵌套。
p标签中通常用来放置一段文字。终点注意:p标签中不可以放div标签(任意块标签),这会导致在浏览器中p标签被分隔成两个。
<p>被那迎面而来的温热香风吹在脸庞上,萧炎有着瞬间的失神,狠狠的甩了甩头,将心中的旖念压下,手掌拍了拍面前几乎和自己同样身高的少女的小脑袋,无奈的道:“你就不能让我说出来,也好满足一下我的虚荣心么?”</p>
Tip:结合英文单词更好理解哦!paragraph 美 [ˈpærəɡræf] 段落。
span标签通常用于包裹文字,视觉上不会产生任何变化,但是我们可以配合css添加特殊的样式:
<p>让span包裹的文字<span style="color:red">变红色</span></p>
a标签最常用于形成一个可点击的超链接:
<a href="https://www.baidu.com">点我跳转到百度</a>
通过添加target
属性可以指定打开链接的位置
<!--
target="_blank" 新标签页打开
target="_new" 新标签页打开,但所有的new只会打开一个新标签页
target="_self" 默认,在当前标签页打开
-->
<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>
a标签还常用与创建锚点链接,用于在当前页面跳转到指定位置:
(讲解标签的id命名方式)
<a href="#wrap">点我页面滚动到id为wrap的标签所在的位置</a>
锚点也可以配合name属性使用:
<a href="#abc">点我页面滚动到name为abc的标签位置></a>
......
<a name="abc">滚到这里</a>
Tip:结合英文单词更好理解哦! anchor 美 [ˈæŋkər] 锚。
img标签用于在网页中引入一张图片:
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
img是一个单标签,不需要结束标签,但是我们可以用 /
作为img的结尾:
<!--
两种写法都可以
在HTML5的新标准中,明确的指出了不需要 / 来结束单标签,所以,更推荐大家不写/
-->
<img src="xxx">
<img src="xxx" />
img标签的四个重要属性:
./
或者 ../
开头(详细讲解),或者直接以文件名或目录名开头。
所有写路径的地方都适用相对路径和绝对路径的写法,比如上面讲过的a标签herf属性。
<img src="xxx" width="200" height="100">
width与height一般情况下和图片原始尺寸保持一致(像素单位的简单介绍),不过不一致也是允许的,但是即使使用width和height缩小图片,也仅仅是视觉上的缩小,浏览器还是需要加载原始的图片资源(并不能减轻请求压力),所以当我们有图片缩放的需求时,应当提前用图片处理软件处理好了之后,再引入图片。
<img
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605197183333&di=087c5c556d4151b324e5485ad280d29a&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180705%2F142fb8fac6f846a995bf9951bc604e92.jpeg"
alt="新垣结衣"
>
除上述四条属性之后,img中常用的属性还有 title
,当鼠标指针移动到图片上时,title能够显示出提示文字,增强用户体验。title
属性并不仅仅用于img标签,其他常见的标签都可以使用title
。
b
标签 strong
标签
文字加粗,b标签仅为视觉上的加粗,strong还能够被搜索引擎检索。
i
标签 em
标签
文字斜体,i标签仅为视觉上的斜体,em还能够被搜索引擎检索。
br
标签
用于文本换行。
hr
标签
横线分隔。
del
标签
删除线。
在HTML书写某些特殊字符的时候,可能会遇到问题,比如要在网页里面显示出字符 < >,就有可能和我们的标签冲突,所以有些特殊字符需要用对应代替的写法(字符实体)表示:
< > 使用 <
和 >
代替
连续的空格会被忽略,如果确实需要连续空格,使用
代替
更多符号请参考:HTML实体符号手册 ;
很多特殊字符即使不用实体符号也不会出错,但是在键盘上打出这些符号有点困难,实体符号存在的意义就是为这些字符提供替代的输入方式。