《Web前端技术H5+CSS3》第二章 HTML基础

《Web前端技术H5+CSS3》第二章 HTML基础「云图智联」

.1列表

1.1.1列表及其应用

1. 什么是列表
简单来说，列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来。

2. 列表的分类及其应用

无序列表，语法：

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

有序列表，语法：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表，语法：

<dl>
    <dt>标题</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dt>标题二</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

无序列表| 无序列表由ul标签和li标签组成，使用ul标签作为无序列表的声明，使用li标签作为每个列表项的起始。无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容

有序列表| 有序列表由ol标签和li标签组成，使用ol标签作为有序列表的声明，使用li标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能ol标签里面嵌套li标签。有序列表ol-li一般用于显示带有顺序编号的特定场合

定义列表|定义列表是一种很特殊的列表形式，它是标题及列表项的结合。定义列表的语法相对于无序和有序列表不太一样，它使用dl标签作为列表的开始，使用dt标签作为每个列表项的起始，而对每个列表项的定义则使用dd标签来完成。定义列表一般适用于带有标题和标题解释性内容的场合

列表的注意事项：
1.无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的页面内容。有序列表会依据列表项的顺序进行显示。
2.在实际的网页应用中，无序列表比有序列表应用更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合。
3.定义列表一般适用于带标题和标题解释性内容的场合。

1.1.2列表练习

示例：有序列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>有序列表的应用</h2>
<p>注意：有序列表列表项标记默认是1,有序的数字，可以使用type属性进行更改列表项标记</p>
<p>可选择的列表项标记有：a，A，i，I，1</p>
<ol type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<ol type="i">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
</body>
</html>

示例：无序列表：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>无序列表的应用</h2>
<p>注意：无序列表列表项标记默认是黑色圆点，可以使用type属性进行更改</p>
<p>可选择的列表项标记有：小黑点:disc（默认值）；方块:square；空心圆:circle。</p>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul type="square">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
</body>
</html>

示例：定义列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>定义列表的应用</h2>
<p>一般应用于带有标题和内容，标签dt声明标题，dd声明内容</p>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
</dl>
</body>
</html>

2.1表格

2.1.1为什么使用表格

1.简单通用
由于表格行列结构简单，以及在生活中使用广泛，因此对它的理解和编写都很方便。
2.结构稳定
表格通常每行的列数一致，同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐这种严格的约束形成了一个不易变形的合资结构，堆叠排列起来结构很稳定。

2.1.2 表格的基本语法

表格的基本结构：

单元格 | 单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格

行 | 一个或多个单元格堆叠成了行

列 | 由于表格单元格的宽度必须一致，因此单元格纵向列表形成了列

表格的语法结构：

<table>
    <tr>
        <!--th表示表头-->
        <th>星期</th>
        <th>科目</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>周二</td>
        <td>数学</td>
    </tr>
    </table>

创建表格的步骤：
1.创建表格标签table
2.在表格标签table创建行标签tr可以有多行
3.在第一行标签tr里创建单元格标签th可以创建表格标题
4.在行标签tr里创建单元格标签td可以有多个单元格
为了显示表格的轮廓，一般还需要设置table标签的border边框属性，指定边框的宽度,如下：

<table border="1" cellpadding="0" cellspacing="0">
<!--border：表格边框；cellpadding：指定表格各单元格之间的空隙；cellspacing：代表单元格边框到内容之间的距离-->

2.1.3 表格的跨行和跨列

-> 跨列：跨列是指单元格的横向合并

<table>
    <!--col为column的缩写，span为跨度，所以colspan的意思是跨列-->
    <tr>
        <td colspan="所垮的列数">单元格的内容</td>
    </tr>
</table>

-> 跨行：跨列是指单元格的纵向合并

<table>
    <!--row为行的意思，rowspan即跨行-->
    <tr>
        <td rowspan="所挎的行数">单元格内容</td>
    </tr>
</table>

示例：表格跨行和跨列的应用：课表制作

<table border=1 align="center">
<!--align='center':设置表格内容居中显示-->
<caption align="center"><strong>成绩表</strong></caption>
<tr>
    <th></th>
    <th colspan=5 align="center">课程</th>
    <th colspan=2 align="center">周末</th>
</tr>
<tr>
    <th>星期</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期天</th>
</tr>
<tr>
    <td rowspan="3">上午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td rowspan=6 align="center" colspan="2">休息</td>
</tr>
<tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
</tr>
<tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
</tr>
<tr>
    <td rowspan=2>下午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
</tr>
<tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
</tr>

</table>

3.1 HTML的媒体元素

3.1.1媒体元素概述

网络发展日新月异，用计算机，平板，手机打开网页就可以浏览视频，听音乐。
在HTML5问世前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。HTML5的出现改变了这一状况，在页面中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了。

视频元素

HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式。

格式 | IE | Firefox | Opera | chrome | Safari --- |---|---|---|---|--- Ogg | No |3.5+ | 10.5+ |5.0+|NO MPEG 4 | 9.0+ |No | No |5.0+|3.0+ WebM | No |4.0+ | 10.6+ |6.0+ |NO

Ogg ：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 ：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM ：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

应用：

<video src="视频路径" controls="controls"></video>

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放，暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度，如果浏览器不支持video元素，可以在video元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户看。具体操作如下：

<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持！
</video>
</body>
</html>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">   
    您的浏览器不支持！
</video>
</body>
</html>

video标签的属性

属性 | 值 | 描述

autoplay | autoplay|如果出现该属性，则视频在就绪后马上播放。

controls|controls|如果出现该属性，则向用户显示控件，比如播放按钮。

height| pixels|设置视频播放器的高度。

loop| loop| 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload| preload|如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src| url|要播放的视频的 URL。

width| pixels|设置视频播放器的宽度。

音频元素

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。

当前，audio 元素支持三种音频格式：

格式 | IE 9|Firefox 3.5 | Opera 10.5|Chrome 3.0|Safari 3.0 ---|---|---|---|---|--- Ogg Vorbis| |√|√|√| MP3| √|||√|√ Wav| |√|√||√

应用：

<audio src="音频路径" controls="controls"></video>

其中src属性用于指定要播放的音频文件的路径，controls属性用于提供播放、暂停和音量控制，此外，还可以用width和height设置音频的宽度和高度。如果浏览器不支持audio元素，那么可以在audio元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户

<audio src="音频路径" controls="controls">你的浏览器不支持audio标签</audio>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持audio标签
</audio>

audio标签的属性

属性 | 值 | 描述

---|---|---

autoplay | autoplay|如果出现该属性，则音频在就绪后马上播放。

controls|controls|如果出现该属性，则向用户显示控件，比如播放按钮。

loop| loop| 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload| preload|如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src| url|要播放的音频的 URL。

4.1 HTML5的结构元素

4.1.1 页面布局分析

当要制作一个页面时，如何入手来进行页面布局呢？
大家容易产生的错误做法如下：自上而下用相应的标签把内容添加进去。
这样做为什么不对呢？
正确的做法如下：先不用像上面一样直接用标签去写内容，而是先分析页面的大体结构。不难发现，大部分网站都是分成上中下结构，三部分。即页面头部，页面主体，页面底部。分好结构后再向这三块里加入对应的内容。
可能到这里有人就会疑惑了，为什么要在它外面套层壳再写内容？直接写不是更省事？给大家举例子：“一个人到超市买了很多东西，他就开始一样一样地往家里搬，搬了好久才搬完。另外一个人也买了很多东西，这个人就买了个购物袋，把这些东西放到购物袋中一次性就提回家了”。其实网页布局之所以要先划分结构，就是为了后面更容易地将一大块的内容移动到想要放的位置，而不是每个元素都要分别移动，这样能提高开发效率，降低开发难度。

4.1.2 HTML5提供了新的元素来创建更好的页面结构

标签 | 描述

---|---

header|定义了文档的头部区域

nav|定义导航链接的部分。

article| 定义页面独立的内容区域。

aside| 定义页面的侧边栏内容。

section | 定义文档中的节（section、区段）。

footer| 定义 section 或 document 的页脚。

bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。

command| 定义命令按钮，比如单选按钮、复选框或按钮

details| 用于描述文档或文档某个部分的细节

dialog| 定义对话框，比如提示框 summary| 标签包含 details 元素的标题

figure| 规定独立的流内容（图像、图表、照片、代码等等）。

figcaption| 定义 figure 元素的标题 mark| 定义带有记号的文本。

meter| 定义度量衡。仅用于已知最大和最小值的度量。

progress| 定义任何类型的任务的进度。

ruby |定义 ruby 注释（中文注音或字符）。

rt |定义字符（中文注音或字符）的解释或发音。

rp| 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

time|定义日期或时间。 wbr|规定在文本中的何处适合添加换行符。

4.1.3 iframe框架

frame 元素会创建包含另外一个文档的内联框架（即行内框架）。在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。提示：您可以把需要的文本放置在 iframe 标签之间，这样就可以应对无法理解 iframe 的浏览器。

<iframe width=500 height=250 frameborder=0 scrolling=auto src="URL"></iframe>

iframe属性的使用： iframe内联框架的常用属性包括name、width、height。其中name属性可以和前面学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下:

1.在被打开的框架上name属性，关键代码如下：

 <iframe name="mainFram" src="subframe/the_second.html"/>

2.在超链接上设置target目标窗口属性为希望显示框架窗口名，关键代码如下：

<a href="subframe/the_second.html"target="mainFram">下边显示第二页</a>

4.1.4 iframe应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>iframe的使用</title>
</head>
<body>  
<h1>使用iframe嵌套网页</h1>
<p><a href="http://www.baidu.com" target="mainFrame">点击打开百度</a><br /><br />
<a href="https://www.yuntuzhilian.com/" target="mainFrame">点击打开云图智联</a><br /><br />
<a href="subframe/the_first.html" target="mainFrame">点击打开另一个HTML页面</a><br />
</p>
<iframe name="mainFrame" width="1000px" height="700px"  src="subframe/the_first.html" />
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>page1</title>
</head>
<body>
我是另外一个HTML页面
</body>
</html>

5.1 总结

1、无序列表由ul和li标签组成，使用无序列表的内容没有顺序之分，每个列表项独占一行，列表前默认有实心小黑圆点；

2、有序列表由ol和li标签组成，使用有序列表排列的内容通过显示顺序编写，每个列表项独占一行；

3、定义里标由dl、dt、dd标签组成，通常用于带有标题和标题解释性内容的场合，dt表示标题，dd表示标题主实行内容；

4、掌握表格的基本使用方法：
1.使用table、tr、td创建表格
2.制作跨列、跨行的表格
1.跨列：colspan="横向跨的单元格数"
2.跨行：rowspan="纵向跨的单元格数"

5、网页中的媒体元素包括video视频元素和audio音频元素；

6、媒体元素共有的属性：src（链接地址）、controls（控件播放控件）；

7、可以让媒体元素在不同浏览器下都支持播放的元素（source）；

8、语义化结构元素（header、section、article、nav、aside、footer）的使用；

9、常用的框架技术iframe内联框架；

10、配合使用a标签和target属性及iframe标签的name属性，可以实现窗口间的关联。

(想要了解更多的职场,职业规划方面的经验,文章第一时间发布于云图智联官网)

结构性元素

用于布局和结构.

div : 单纯的容器
header : 页眉
footer : 页脚
section : 一块独立区域
article : 相对独立的文章
nav : 页面导航

内联框架iframe

iframe标签可以在页面上任意位置嵌入另一个页面.

常见属性:

src : 另一个页面的地址
width
height
frameborder : 是否显示边框
scrolling : 是否显示滚动条

内联框架使用案例：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>

<a href="http://www.baidu.com" target="iframeContent">百度</a> |
<a href="http://www.qq.com" target="iframeContent">QQ</a>
<hr />
<iframe name="iframeContent" src="" width="100%" height="600"></iframe>
</body>
</html>

们先来看个例子：

在这个网页中，同时在一个页面中展示了三个网站：千锋教育官网、千锋教育HTML5大前端官网、千锋教育HTML5大前端好程序员官网。这是如何做到的呢？

其实也不难，使用 iframe 就可以实现了。 iframe的作用是，用来在一个网页中显示另一个网页。

iframe 是个双标签，基本语法为：尖角号iframe，尖角号 /iframe。

iframe 标签有五个基本属性：

src 属性，资源的意思，用以引入其他网站的页面，值是一个页面路径。

width 属性，宽度的意思，用以控制引入页面的宽度，值是一个数字。

height 属性，高度的意思，用以控制引入页面的高度，值是一个数字。

frameborder 属性，框架边框的意思，默认引入的框架带有边框，通常情况下将该属性值设置为0，来取消框架的边框。

scrolling[?skr??l??] 属性，滚动的意思，用来控制是否显示框架的滚动条，值有三个：

auto，在需要的情况下出现滚动条，也是默认值。

yes，始终显示滚动条。

no，从不显示滚动条。

我们来做个例子。

打开编辑器，新建一个 iframe-demo.html 文件，补全基础代码，在 body 里添加 iframe 标签，首先定义 src 属性，值为 http://www.qfedu.com，frameborder 属性的值设置为1，显示边框。保存页面。

在浏览器中打开页面。千锋教育的官网在 iframe 的默认大小的窗口里显示了。

返回编辑器，给 iframe 定义属性 width 等 800，height 等于 600，保存。

回到浏览器，刷新，iframe 的窗口变大了。可以通过滚动条查看网站内容。

返回编辑器，如果给iframe 定义一个scrolling 属性，值为 no 的话，滚动条就不见了。

回到浏览器，刷新。此时就不能查看窗口隐藏的内容了。

iframe 也可以作为一个链接的目标框架。链接的 target 属性必须设置为 iframe 的 name 属性。

比如给 iframe 定义 name 属性的值为 iframe_a，链接 a 的 target 属性值也设置为 iframe_a。这样，当点击链接时，千锋教育的官网就在这个 iframe 窗口里打开了。

我们再来看个例子，当点击三个链接，iframe 里显示了相应链接的网站。

我们来实现这个例子。

回到编辑器，创建一个 iframe-example.html 文件，补全基本代码，在 body 里添加一个 div 容器，在容器里添加一个 iframe，定义属性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在浏览器中打开页面，一个 iframe 框架做好了。

回到编辑器，在 body 里的第一行再添加一个 div 容器，在容器里书写 emmet 命令：a 中括号 href 空格 target 等于 iframe_a 大于号 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 键自动补全代码。很明显，这不是我们要的代码。

这怎么办呢？聪明的你一定想到了，在小学数学里，通过添加小括号来设置运算优先级的法则。

我们在 a 的前面，b 的后面填上一对括号， (a[href target=iframe_a]>b)*3 我们把这个 emmet 放到注释里保存一下。

将光标移至 emmet 语句的结尾，按下 tab。期望的代码生成了。

如果你是完美主义者，这个代码你也不满意，能不能换行显示三个 a 标签呢？大家跟我一起做：

点击 VSCode 左下角的齿轮图标，再点击设置，打开设置窗口。

点击扩展菜单，再点击 emmet，找到 Syntax(森太课思) Profiles，在 settings（赛ten 思）.json 中编辑。

在这里输入 html 冒号大括号，在大括号里写入 inline_break 冒号 2，表示标签数大于两组，就折行显示。

"html": {

"inline_break": 2

关闭设置。

把刚才保存的 emmet 命令再拷贝过来，按下 tab 键，完美的代码生成了！

给三个a 标签填好链接地址和文本内容。

这里需要注意，a 链接的地址可以是互联网的网站地址，也可以是你自己制作的本地页面地址，这些页面都可以在 iframe 中显示。

我们发现三个链接的target属性都指向了同一个iframe。保存一下页面。

回到浏览器，刷新。分别点击三个链接，iframe 里分别显示了三个网站的页面。

文章配套视频链接「链接」

在线咨询

上一篇：京东后台：订单履约系统设计（下）
下一篇：JavaScript中 eval函数

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商