-
【一起学前端：HTML5+CSS3】02-转义字符和语义化标签
2.1 标签中的属性
（1）自结束标签与注释
- 例如
- HTML的注释写法为
，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的，注释不能嵌套。
（2）属性
- 在标签中（开始标签或自结束标签）可以设置属性，属性是一个名值对，属性和标签名或其他属性应该使用空格隔开。
- 属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号（单引号双引号均可，统一）引起来。
示例如下：
<html> <head> <title>标签的属性title> head> <body> <h1>这是<font color="red" size="3">第二个font>网页h1> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.2 实体
有些时候，在HTML中不能直接书写一些特殊符号，如：
- 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）。
- 比如字母两侧的大于小于号（可能会被认为是标签并解析）。
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符），实体的语法：
&实体的名字;，如：显示结果 描述 实体名称 空格 < 小于号 < > 大于号 > " 引号 " ¥ 元 ¥ × 乘号 × ÷ 除号 ÷ 示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实体title> head> <body> <p> 今天 的 天气真不错！ p> <p> a<b<c p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
更多的实体，可以参考这两个文档：HTML字符实体和HTML ISO-8859-1 参考手册
2.3 meta标签
（1）meta主要用于设置网页中的一些元数据，元数据并不是给用户看的。
- charset ：指定网页的字符集。
- name ：指定的数据的名称。
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用
,隔开。 - description：表示网站的描述信息。
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用
- content ：指定的数据的内容，会作为搜索结果的超链接上的文字显示。
示例如下（以京东为例）：
<meta charset="utf8" version='1'/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>- 1
- 2
- 3
- 4
（2）http-equiv属性
- 如果设置了http-equiv属性，
元素就是一个pragma指令，提供的信息相当于一个类似名称的HTTP头所能提供的信息。 - content-security-policy：允许页面作者为当前页面定义一个内容策略。内容策略主要指定允许的服务器来源和脚本端点，这有助于防范跨站脚本攻击。
- content-type：声明文档的MIME类型和字符编码。如果指定，content属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了charset属性的
元素，并对文档中的位置有同样的限制。注意：只能在使用text/html的文档中使用，不能在使用XML MIME类型的文档中使用。 - default-style：设置默认的CSS样式表集的名称。
- x-ua-compatible： 如果指定，内容属性必须有 "IE=edge "的值。用户代理被要求忽略这个pragma。
- refresh：该指令指定页面重新加载及重定向的方式
- 直到页面应该被重新加载的秒数–只有当content属性包含一个正整数时。
- 直到页面重定向到另一个页面的秒数–只有当内容属性包含一个正整数，后面跟着字符串’
;url='，以及一个有效的URL。
2.4 语义化标签
在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
标签 作用 描述 块元素
Block Element标题 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签
一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1～h3，h4～h6很少用标题组 标签用来为标题分组，可以将一组相关的标题同时放入到段落 页面中的一个段落。由空行或第一行缩进将相邻的文本块分开 长引用 用缩进表示所包含文本 行内元素
Inline Element短引用 用一个简短的内联引号包围文本
大多数浏览器通过在文本周围加上引号来实现换行 强调 表示强调作用, 元素可以嵌套，每一级嵌套表示更高的强调程度元素效果与它相同，不过不属于语义标签重要 表示重要性、严肃性或紧迫性,浏览器通常以粗体字呈现内容 元素效果与它相同，不过不属于语义标签示例如下：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> <h4>四级标题h4> <h5>五级标题h5> <h6>六级标题h6> <hgroup> <h1>回乡偶书二首h1> <h2>其一h2> hgroup> <p>在p标签中的内容就表示一个段落p> <p>在p标签中的内容就表示一个段落p> <p>今天天气<em>真em>不错！p> <p>你今天必须要<strong>完成作业strong>！p> 鲁迅说： <blockquote> 这句话我是从来没有说过的！ blockquote> 子曰<q>学而时习之，乐呵乐呵！q> <br> <br> 今天天气真不错 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
2.5 块元素、行内元素、内容修正
（1）块元素
- 在网页中一般通过块元素来对页面进行布局。
（2）行内元素
- 行内元素主要用来包裹文字。
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。
- 块元素中基本上什么都能放，p元素中不能放任何的块元素。
（3）内容修正
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如
- 标签写在了根元素的外部。
- p元素中嵌套了块元素。
- 根元素中出现了除head和body以外的子元素等情况。
这个通过浏览器中的查看网页源代码并不能看到效果，但是使用F12进行开发者调试时是能够看到上述几种情况被修正的结果。
虽然浏览器能够对不规范的页面内容进行修正，但是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。
2.6 布局标签
网页的基本布局如下图所示：
下面对其中的标签进行解释说明：
-
header表示网页的头部（页眉），介绍性的内容。 -
main表示网页的主体部分（一个页面中只会有一个main）。 -
footer表示网页的底部（页脚），通常包含有关作者的信息、版权或文件链接。 -
nav表示网页中的导航，可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引。 -
aside和主体相关的其他内容（侧边栏），其内容与文档的主要内容只有间接的关系，经常以边栏或呼出框的形式出现。 -
article表示一个独立的文章，自成一体，独立分发，可重复使用。 -
section表示一个独立的区块，上边的标签都不能表示时使用section。 -
div块元素，没有任何的语义，就用来表示一个区块，目前来讲，div还是主要的布局元素。 -
span行内元素，没有任何的语义，一般用于在网页中选中文字。
2.7 列表
（1）有序列表
有序列表，使用
表示列表项。（2）无序列表
无序列表，使用
表示列表项。（3）定义列表
使用
来表示定义的内容，使用来对内容进行解释说明。列表之间可以互相嵌套，示例如下。
<ul> <li>结构li> <li>表现li> <li>行为li> ul> <ol> <li>结构li> <li>表现li> <li>行为li> ol> <dl> <dt>结构dt> <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd> <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd> <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd> dl> <ul> <li> aa <ul> <li>aa-1li> <li>aa-2 <ul> <li>aa-1li> <li>aa-2li> ul> li> ul> li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
2.8 超链接
（1）超链接简介
- 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
- 使用
标签来定义超链接，属性href指定跳转的目标路径，可以是一个外部网站的地址，也可以写一个内部页面的地址。 - 超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。
（2）相对路径
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径。
- 相对路径都会使用
./或..//开头，./可以省略不写，如果不写./也不写../则就相当于写了./。 ./表示当前文件所在的目录，../表示当前文件所在目录的上一级目录。
（3）其他用法
1.
target属性，用来指定超链接打开的位置。- _self 默认值 在当前页面中打开超链接。
- _blank 在一个新的要么中打开超链接。
2.可以直接将超链接的
href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置。3.如果想跳转到页面的指定位置，只需将
href属性设置#目标元素的id属性值，每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性。4.在开发中可以将
#作为超链接的路径的占位符使用，也可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生。2.9 图片
（1）图片标签
图片标签用于向当前页面中引入一个外部图片，使用
img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点），常见属性如下：src属性指定的是外部图片的路径（路径规则和超链接是一样的）。alt图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。width为图片的宽度 (单位是像素)，height为图片的高度，宽度和高度中如果只修改了一个，则另一个会等比例缩放。
注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）。
（2）图片格式
1.jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图。
- 一般用来显示照片。
2.gif
- 支持的颜色比较少，支持简单透明，支持动图。
- 颜色单一的图片，动图。
3.png
- 支持的颜色丰富，支持复杂透明，不支持动图。
- 颜色丰富，复杂透明图片（专为网页而生）。
4.webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。
- 它具备其他图片格式的所有优点，而且文件还特别的小。
- 缺点：兼容性不好。
5.base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
- 一般都是一些需要和网页一起加载的图片才会使用base64。
总结：效果一样，用小的；效果不一样，用效果好的。
2.10 内联框架
内联框架，用于向当前页面中引入一个其他页面。
src指定要引入的网页的路径。frameborder指定内联框架的边框。
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0">iframe>- 1
2.11 音视频
（1）音频
audio标签用来向页面中引入一个外部的音频文件，音视频文件引入时，默认情况下不允许用户自己控制播放停止，该标签主要属性如下：controls是否允许用户控制播放。autoplay音频文件是否自动播放。- 如果设置了
autoplay，则音乐在打开页面时会自动播放。 - 但是目前来讲大部分浏览器都不会自动对音乐进行播放。
- 如果设置了
loop音乐是否循环播放。
<audio src="./source/audio.mp3" controls autoplay loop>audio>- 1
（2）source元素与embed元素
除了通过
src属性来指定外部文件的路径以外，还可以通过<audio controls> 对不起，您的浏览器不支持播放音频！请升级浏览器！ <source src="./source/audio.mp3"> <source src="./source/audio.ogg"> audio>- 1
- 2
- 3
- 4
- 5
- 6
该音频在IE9、10、11下均可正常播放，但是在IE8下会出现自定义提示信息。
原因是IE8下不支持
audio元素，但是可以使用元素在文档中的指定位置嵌入外部内容，这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。<embed src="./source/audio.mp3">- 1
（3）视频
使用
video标签来向网页中引入一个视频，使用方式和audio基本上是一样的，通过iframe和embed的方式也引入视频。<video controls> <source src="./source/flower.webm"> <source src="./source/flower.mp4"> <embed src="./source/flower.mp4" type="video/mp4"> video> <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300">iframe>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 例如
-
相关阅读:
【附源码】Python计算机毕业设计视频网站
Fiddler和Proxifier的配合使用抓取window应用的所有包
利用Python爬虫 爬取金融期货数据
zemax---Tangential plane, meridian plane and sagittal plane（切线面，子午面与弧矢面）（完结）
边缘计算的优势
【香菇带你学Linux】Linux环境下gcc编译安装【建议收藏】
Node + Express 后台开发 —— 起步
Android Toast居中显示方法二
【网络安全】浅析跨域原理及如何实现跨域
关于#搜索引擎#的问题：是否可以在输入框中Tab键切换搜索引擎
- 原文地址：https://blog.csdn.net/qq_44528283/article/details/126077300
