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

云图智联

于 2020-07-20 15:43:34 发布

阅读量275

点赞数

分类专栏：前端文章标签：列表 css html html5 javascript

内容来源于云图智联优课平台:https://e.yuntuzhilian.com，转载请注明出处

本文链接：https://blog.csdn.net/weixin_36303817/article/details/107465060

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.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属性，可以实现窗口间的关联。

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

云图智联

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《Web前端技术H5+CSS3》第二章 HTML基础[云图智联]

1.1列表1.1.1列表及其应用1. 什么是列表简单来说，列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来。2. 列表的分类及其应用无序列表，语法：<ul><li>第一项</li><li>第二项</li><li>第三项</li></ul>有序列表，语法：<ol> <li>第一项</l...
复制链接

扫一扫