文章目录
2.1 标签中的属性
(1)自结束标签与注释
- 例如
<img><input>
,这些都是自结束标签,标签一般成对出现,但是自结束标签只有一个。 - HTML的注释写法为
<!-- 内容 -->
,注释中的内容会被浏览器所忽略,不会在网页中直接显示,但是可以在源码中查看注释,注释用来对代码进行解释说明的,注释不能嵌套。
(2)属性
- 在标签中(开始标签或自结束标签)可以设置属性,属性是一个名值对,属性和标签名或其他属性应该使用空格隔开。
- 属性不能瞎写,应该根据文档中的规定来编写,有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号(单引号双引号均可,统一)引起来。
示例如下:
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<h1>这是<font color="red" size="3">第二个</font>网页</h1>
</body>
</html>
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>
更多的实体,可以参考这两个文档: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,相机,数码,配件,手表,存储卡,京东"/>
(2)http-equiv属性
- 如果设置了http-equiv属性,
<meta>
元素就是一个pragma指令,提供的信息相当于一个类似名称的HTTP头所能提供的信息。 - content-security-policy:允许页面作者为当前页面定义一个内容策略。内容策略主要指定允许的服务器来源和脚本端点,这有助于防范跨站脚本攻击。
- content-type:声明文档的MIME类型和字符编码。如果指定,content属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了charset属性的
<meta>
元素,并对文档中的位置有同样的限制。注意:只能在使用text/html的文档中使用,不能在使用XML MIME类型的文档中使用。 - default-style:设置默认的CSS样式表集的名称。
- x-ua-compatible: 如果指定,内容属性必须有 "IE=edge "的值。用户代理被要求忽略这个pragma。
- refresh:该指令指定页面重新加载及重定向的方式
- 直到页面应该被重新加载的秒数–只有当content属性包含一个正整数时。
- 直到页面重定向到另一个页面的秒数–只有当内容属性包含一个正整数,后面跟着字符串’
;url=
',以及一个有效的URL。
2.4 语义化标签
在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式。
标签 | 作用 | 描述 | |
---|---|---|---|
块元素 Block Element |
<h1> <h2> <h3> <h4> <h5> <h6> |
标题 | 一共有六级标题 从 h1 ~ h6 重要性递减,h1 最重要,h6 最不重要h1在网页中的重要性仅次于 title 标签一般情况下一个页面中只会有一个 h1 一般情况下标题标签只会使用到 h1 ~ h3 ,h4 ~ h6 很少用 |
<hgroup> |
标题组 | <hgroup> 标签用来为标题分组,可以将一组相关的标题同时放入到<hgroup> |
|
<p> |
段落 | 页面中的一个段落。由空行或第一行缩进将相邻的文本块分开 | |
<blockquote> |
长引用 | 用缩进表示所包含文本 | |
行内元素 Inline Element |
<q> |
短引用 | 用一个简短的内联引号包围文本 大多数浏览器通过在文本周围加上引号来实现 |
<br/> |
换行 | ||
<em> |
强调 | 表示强调作用,<em> 元素可以嵌套,每一级嵌套表示更高的强调程度<i> 元素效果与它相同,不过<i> 不属于语义标签 |
|
<strong> |
重要 | 表示重要性、严肃性或紧迫性,浏览器通常以粗体字呈现内容<b> 元素效果与它相同,不过<b> 不属于语义标签 |
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</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>
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)有序列表
有序列表,使用<ol>
标签来创建有序列表,使用<li>
表示列表项。
(2)无序列表
无序列表,使用<ul>
标签来创建无序列表,使用<li>
表示列表项。
(3)定义列表
使用<dl>
标签来创建一个定义列表,使用<dt>
来表示定义的内容,使用<dd>
来对内容进行解释说明。
列表之间可以互相嵌套,示例如下。
<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-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
2.8 超链接
(1)超链接简介
- 超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置。
- 使用
<a>
标签来定义超链接,属性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>
2.11 音视频
(1)音频
audio
标签用来向页面中引入一个外部的音频文件,音视频文件引入时,默认情况下不允许用户自己控制播放停止,该标签主要属性如下:
controls
是否允许用户控制播放。autoplay
音频文件是否自动播放。- 如果设置了
autoplay
,则音乐在打开页面时会自动播放。 - 但是目前来讲大部分浏览器都不会自动对音乐进行播放。
- 如果设置了
loop
音乐是否循环播放。
<audio src="./source/audio.mp3" controls autoplay loop></audio>
(2)source元素与embed元素
除了通过src
属性来指定外部文件的路径以外,还可以通过<source>
元素来指定文件的路径。
<audio controls>
对不起,您的浏览器不支持播放音频!请升级浏览器!
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>
该音频在IE9、10、11下均可正常播放,但是在IE8下会出现自定义提示信息。
原因是IE8下不支持audio
元素,但是可以使用 <embed>
元素在文档中的指定位置嵌入外部内容,这个内容是由外部应用程序或其他互动内容的来源提供的,如浏览器插件。
<embed src="./source/audio.mp3">
(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>