一、列表标签
列表是一个父子组合标签,上阵父子兵,不能单独出现。
当HTML标签形成嵌套,必须注意代码的缩进(Tab键),<li>
标签不能单独使用,它必须放到<ul>
或者<ol>
中使用,<ul>
和<ol>
的子标签只能是<li>
,绝对不能出现其它任何标签。<li>
标签是容器,内部可以放任何其他标签。
1.1 无序列表 <ul>
无序列表使用<ul></ul>
标签,每个列表项都是<li></li>
标签。
- 无序列表有
type
属性,可以定义前导符号的样式,但是在HTML5中已经被废弃,建议使用CSS替代。
type属性值 | 描述 |
---|---|
disc | 默认值,实心圆 |
circle | 空心圆 |
square | 实心方块 |
<ul>
<li>牛奶</li>
<li>
咖啡
<!-- <li>标签里面可以有其他标签 -->
<p>有的咖啡会很苦</p>
</li>
<li>
水果
<!-- <li>标签里面可以嵌套<ul>标签 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
</li>
</ul>
1.2 有序列表 <ol>
有序列表使用<ol></ol>
标签,每个列表项都是<li></li>
标签。
- ol标签可以设置
type
属性,用来设置编号的类型:
type属性值 | 描述 |
---|---|
a | 表示小写英文字母编号 |
A | 表示大写英文字母编号 |
i | 表示小写罗马数字编号 |
I | 表示大写罗马数字编号 |
1 | 表示大写罗马数字编号 |
start
属性值必须是一个整数,指定了列表编号的起始值,此属性的值应为阿拉伯数字,尽管列表条目的编号类型 type属性可能指定为了罗马数字编号等其他类型的编号。reversed
属性指定列表中的条目是否是倒序排列的,reversed属性不需要值,只需要写reversed单词即可,这是HTML5的全新特性
<ol type="1" start="10" reversed>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
1.3 定义列表 <dl>
、<dt>
和<dd>
需要逐条给出定义描述的列表,就是定义列表,<dl>
是定义列表标签,内容交替出现<dt>
、<dd>
标签。也允许<dt>
和<dd>
不交替出现,而是分别处于不同的定义列表中。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠式样式表</dd>
</dl>
<dl>
<dt>js</dt>
<dd>js脚本程序</dd>
</dl>
二、多媒体和语义化标签
相对路径:
描述从网页出发,如何找到图片。随着网页和图片的位置关系不同,插入图片的代码随之改变。如果需要回退层级,使用“../
”这样的写法。
<img src="images/gugong.jpg">
绝对路径:
描述图片精准地址。不管网页在哪里,绝对路径不需要改变。
<img src="https://www.arbor.com/static/img/index/logo-recommended.png">
2.1 图片 <img>
<img>
标签用来在网页中插入图片,图片必须要复制到项目文件夹中,一般将图片保存到项目文件夹中的images子文件夹中。
图片本质上没有被插入到网页中,只是被引入到了网页中,所以将来要将图片也一起上传到服务器上,将图片复制到项目文件中,即可整体上传。
<img>
标签的src
属性,是source(来源)的缩写,参数是图片的存储目录和完整文件名。<img>
标签的alt
属性是alternate“替代品”的缩写,它是对图像的文本描述,不是强制性的。如果由于某种原因无法加载图像,浏览器会在页面上显示alt属性中的备用文本。供视力不方便的朋友使用的网页朗读器,也会朗读alt中的文本。<img>
标签的width
、height
属性分别设置宽度和高度,单位是像素,但是不需要写单位。如果省略其中一个属性,则表示按原始比例缩放图片。
网页上支持的图片格式:
格式 | 描述 |
---|---|
.bmp | windows画图软件默认保存的格式,位图 |
.gif | 支持动画(比如表情包) |
.jpeg(.jpg) | 有损压缩图片,用于照片 |
.png | 便携式网络图像,用于logo、背景图形等,支持透明和半透明 |
.svg | 矢量图片 |
.webp | 最新的压缩算法非常优秀的图片格式 |
<img src="images/tupian.jpg" alt="这是一个图片">
<img src="images/tupian.jpg" alt="这是一个图片" width="200">
2.2 超级链接 <a>
超级链接是将网页和网页连结到一起的方法,是互联网成“网”的原因,使用<a>
标签制作超级链接。
href
属性支持相对路径和绝对路径title
属性用于设置鼠标的悬停文本target
属性设置为blank
,即可在新标签页中打开网页,HTML4代,blank之前有一个下划线- 图片也可以设置超级链接,只需要用
<a>
标签包裹img
标签即可 - 较长的页面,可以适当的给
h
系列标签添加id
属性,它将成为页面的“锚点”,当网址后面添加#时,页面将自动滚动到锚点所在位置,其他页面的超级链接,可以链接到指定锚点
<h1 id="wuxi">无锡美景</h1>
<a href="lvyou.html#wuxi">看无锡美景</a>
- 指向exe、zip、rar等文件格式的链接,将自动成为下载链接
- 有
mailto:
前缀的链接是邮件链接,系统将自动打开Email相关软件
<a href="mailto:me@test.com">给小编发邮件</a>
- 有
tel:
前缀的链接是电话连接,系统将自动打开拨号盘
<a href="tel:12306">打电话买火车票</a>
2.3 音频 <audio>
在浏览器中插入音频需要使用标签,兼容到IE9。常用音频格式是mp3和ogg格式
controls
:显示播放控件
<audio controls src="音频地址">
抱歉,您的浏览器不支持audio标签,请升级浏览器 <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</audio>
autoplay
属性:声明autoplay
属性,音频会自动播放,常用的浏览器为了不打扰用户,可能会不允许自动播放音乐,必须让用户手动点击之后才能播放loop
属性:声明loop属性,将循环播放音频
2.4 视频 <video>
在浏览器中插入视频需要使用<video>
标签,兼容到IE9。常用音频格式是mp4、ogv、webm等格式。
controls
:显示播放控件
<video controls src="视频地址" loop autoplay>
抱歉,您的浏览器不支持video标签,请升级浏览器 <!-- 标签对中是对不兼容audio标签的浏览器的显示文字-->
</video>
autoplay
属性:声明autoplay
属性,视频会自动播放loop
属性:声明loop
属性,将循环播放视频
2.5 区块标签
HTML5推出了众多新的区块标签。
区块标签 | 描述 |
---|---|
<section> |
文档的区域,语义比div大 |
<article> |
文档的核心文章内容,会被搜索引擎主要抓取 |
<aside> |
文档的非必要相关内容,比如广告等 |
<nav> |
导航条 |
<header> |
页头 |
<main> |
网页核心部分 |
<footer> |
页脚 |
2.6 语义化标签
2.6.1 <span>
标签
<span>
标签是文本中的“区块”标签,本身没有任何特殊的显示效果,可以结合CSS来丰富样式
<p>
<span>北京</span>的区号是<span>010</span>
</p>
<p>
<span>上海</span>的区号是<span>021</span>
</p>
2.6.2 <b>
、<u>
、<i>
标签
<b>
、<u>
、<i>
标签充满浓浓的“样式”意味,已经被CSS替代,但是在网页中也可以表示需要强调的文本
标签 | 描述 |
---|---|
<b> |
被加粗的文字,CSS已经替代了它的功能 |
<u> |
加下划线的文字,CSS已经替代了它的功能 |
<i> |
倾斜的文字,CSS已经替代了它的功能 |
2.6.3 <strong>
、<em>
、<mark>
标签
<strong>
、<em>
、<mark>
标签均表示强调语
标签 | 描述 |
---|---|
<strong> |
代表特别重要文字 |
<em> |
代表强调文字 |
<mark> |
代表一段需要被高亮的文字 |
2.6.4 <figure>
、<figcaption>
标签
<figure>
元素代表一段独立的内容, 与说明<figcaption>
配合使用, 它是一个独立的引用单元,比如建议读者拓展视野的图片等,当这部分转移到附录中或者其他页面时不会影响到主体
<p>
北京是一个美丽的城市
<figure>
<img src="images/tupian.jpg" width="500">
<figcaption>北京的鸟巢</figcaption>
</figure>
</p>
三、盒子标签 <div>
div是英语division“分割”的缩写,<div></div>
标签对用来将相关的内容组合到一起,以和其他内容分割,使文档结构更清晰。
比如,网页的头部要放到一个<div></div>
标签对中,轮播图也要放到一个<div></div>
标签对中,文章内容也要放到一个<div></div>
标签对中。<div></div>
是最常见的HTML标签,因为它可以结合CSS使用,实现网页的布局,这种布局形式叫做“DIV+CSS”。<div></div>
像是一个容器,什么都可以容纳,因此工程师也习惯称呼<div></div>
为“盒子”。
<div>
<div>网站的logo</div>
<h1>北京简介</h1>
</div>
<div>
标签可以添加class属性表示“类名”,类名服务于CSS
区域 | 类名 |
---|---|
页头 | header |
logo | logo |
导航条 | nav |
横幅 | banner |
内容区域 | content |
页脚 | footer |