资讯详情

【前端基础知识】web前端设计基础（前端三剑客之一 —— HTML5，包含课后习题）

HTML5

  • 第一章 HTML5基础
    • 1.1 HTML5文档结构
    • 1.2 元素与标签
    • 1.3 属性
    • 1.4 语法规则
    • 第一章习题
  • 第二章 HTML5内容结构和文本
    • 2.1 结构标签
    • 2.2 基础标签
    • 2.3 列表
    • 第二章习题
  • 第三章 HTML5超链接
    • 3.1 a标签
    • 3.2 id属性
    • 3.3 HTML字符集和颜色
    • 第三章习题
  • 第四章 HTML5多媒体
    • 4.1 HTML5图像
    • 4.2 HTML5 音视频
    • 第四章习题
  • 第五章 HTML5表格
    • 实操练习
    • 第五章习题
  • 第六章 HTML5 表单
    • 6.1 form标签
    • 6.2 表单域标签
    • 第六章习题

第一章 HTML5基础

HTML有一些文件文本文件，标签标记内容和类型，Web通过分析这些标签来显示浏览器。HTML任何编辑器都可以编辑文件，但后缀必须是。

1.1 HTML5文档结构

HTML5基本结构由和组成，代码如下：

<!-- 声明文档类型 --> <!DOCTYPE html> <!-- HTML5元素 --> <html lang="en"> <!-- 头元素 --> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <!-- 页面标题 -->     <title>HTML5 Demo</title> </head> <!-- 体元素 --> <body>      </body>

</html>

<! DOCTYPE html>是强制使用的，位于首行，这样浏览器才能获知文档类型，它不属于HTML标签。

1.2 元素与标签

元素是标记语言的基本单元。
元素按照有无元素内容分为非空元素和空元素两类，对应的标签为非空标签和空标签。

元素和标签怎么区分呢？下面通过举一个例子来区分：

<span>元素的内容</span>

这一个代码行代表一个元素，其中<span>是起始标签，</span>是终止标签，span是元素名，元素的内容是该元素的内容。

语法：<元素名 [属性名=“属性值”]…>元素内容</元素名> 例： <title>这是页面标题</title> <a href="https://blog.csdn.net/weixin_46318413">这是我的CSDN博客中心</a> 语法：<元素名 [属性名=“属性值”]… /> 例：<br /> <hr /> 点击查看所有的HTML标签

1.3 属性

常用的属性有：class（绑定class样式），id（绑定id），style（行内样式），title（提示工具的显示文本），contenteditable（元素内容是否可编辑），draggable（元素是否可以拖动）。下面见代码：

<!-- 文档类型声明 -->
<!DOCTYPE html>
<!-- HTML5元素 -->
<html lang="en">
<!-- 头元素 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>HTML5 Demo</title>
    <!-- 定义样式 -->
    <style> /* class的定义方式(.) */ .demoClass { 
           /* 字体颜色为红色 */ color: red; } /* id的定义方式(#) */ #demo { 
           /* 加粗 */ font-weight: bold; } </style>
</head>
<!-- 体元素 -->

<body>
    <span title="demo" class="demoClass" id="demo" style="cursor:pointer;" contenteditable="false" draggable="true">演示demo</span>
</body>

</html>

效果 的效果：鼠标移动到文字上会出现demo的提示。 的效果：因为在style标签写了一个demoClass的样式，所以字体颜色变红色。 定义了元素的唯一id，在style标签里写#id也代表定义了一个样式，所以字体会变粗。 属性里也可以直接样式，但是开发的时候尽可能的都写到class里去，尤其是公用的样式。 规定了元素是否可以编辑，值为true的时候，点击可以修改文字内容，默认为false。 规定了元素是否可以拖动，默认为auto。

1.4 语法规则

1、元素必须正确嵌套 < div>< a>< /a>< /div> √ < div>< a>< /div>< /a> × 2、元素标签必须被关闭 < br/> √ < br> × 3、元素标签名和属性名最好小写（虽然不区分大小写） < INPUT TYPE=“button” /> × < input type=“button” value=“按钮” /> √ 4、属性值最好加引号 < progress max=“100” value=“20”>< /progress> √ < progress max=100 value=20>< /progress> × 5、属性最好有值 < input type=“checkbox” checked=“checked”/> √ < input type=“checkbox” checked=""/> ×

第一章习题

1、关于HTML5基本语法说法错误的是B A、在文档开始要定义文档的类型 B、在< html>元素中应声明命名空间 C、空标签要加/来关闭 D、所有属性值必须用" "括起来。 2、<!DOCTYPE>元素的作用是A A、用来定义文档类型 B、用来声明命名空间 C、用来搜索引擎声明网站关键字 D、用来向搜索引擎声明网站作者 3、A标签是文件头的开始 A、< html> B、< head> C、< font> D、< frameset> 4、一下代码完全符合HTML5标准的是D A、< input type=text> B、< input TYPE=“text”> C、< input type=“text” disabled> D、< input type=“text” disabled=“disabled” />

第二章 HTML5内容结构与文本

2.1 结构标签

标签 描述
article 定义文章
aside 定义页面内容之外的内容
footer 定义页脚
header 定义页眉
nav 定义导航链接
div 定义文档中的节
span 定义文档中的行内元素 

<article>
	<header>
		<h1>What Does WWF Do?</h1>
		<p>WWF's mission:</p>
	</header>
	<p>WWF's mission is to stop the degradation of our planet's natural environment, and build 	a future in which humans live in harmony with nature.</p>
</article>


<!-- 文档类型声明 -->
<!DOCTYPE html>
<!-- HTML5元素 -->
<html lang="en">
<!-- 头元素 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>HTML5 Demo框架</title>
    <!-- 定义样式 -->
    <style> body { 
           margin: 0; padding: 0; } .flex-center { 
           display: flex; align-items: center; justify-content: center; } header { 
           display: flex; flex-direction: row; background-color: khaki; } header>a { 
           width: 10%; height: 50px; cursor: pointer; } header>a:hover { 
           background-color: rgb(238, 225, 109); } article { 
           height: 650px; text-align:center; } footer { 
           height: 50px; } aside { 
           position: fixed; bottom: 90px; right: 50px; border: rgb(238, 225, 109) 1px solid; padding: 20px; } </style>
</head>
<!-- 体元素 -->

<body>
    <!---页眉--->
    <header>
        <a class="flex-center">首页</a>
        <a class="flex-center">标题一</a>
        <a class="flex-center">标题二</a>
        <a class="flex-center">标题三</a>
    </header>
    <article>这里是内容</article>
    <!---悬浮--->
    <aside>
        <span>悬浮内容</span>
        <ul>
            <li>内容1</li>
            <li>内容2</li>
        </ul>
    </aside>
    <!---页脚--->
    <footer class="flex-center">
        <nav>
            <span>热门链接：</span>
            <a href="https://blog.csdn.net/weixin_46318413/article/details/120635016">JavaScript</a> |
            <a href="https://blog.csdn.net/weixin_46318413/article/details/120865619">Ajax</a>
        </nav>
    </footer>
</body>

</html>

div标签可以把文档分割为独立的、不同的部分，是一个容器标签。

2.2 基础标签

标签 描述
h1~h6 标题1~标题6
p 定义段落
br 换行
hr 水平线
!- - 注释

以下代码只需修改掉上面框架代码的class为content的div标签里的内容。

<article>
        <h1>这是标题1的样子</h1>
        <h2>这是标题2的样子</h2>
        <h3>这是标题3的样子</h3>
        <h4>这是标题4的样子</h4>
        <h5>这是标题5的样子</h5>
        <h6>这是标题6的样子</h6>
        <p>这里定义了一个段落：<span>span是行内元素，不会换行</span>
        <br/><span>如果加了一个br就可以实现换行了</span>
    <hr/>这里加了一条水平线</p>
    <!-- <span>注释的内容不会在页面上呈现</span> -->
    </article>

2.3 列表

标签 描述
ol 有序列表
ul 无序列表
li 列表项

以下代码只需修改掉上面框架代码的aside标签里的内容。

<aside>
        <span>列表</span>
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
        </ul>
        <ol>
            <li>有序列表1</li>
            <li>有序列表2</li>
        </ol>
    </aside>

第二章习题

1、在下面的标签中，C是HTML5新增的标记。 A、< br /> B、< break /> C、< header> D、< head> 2、在HTML5中，注释标签是A A、< !----> B、/**/ C、// D、’ 3、HTML5中列表不包括D A、无序列表 B、有序列表 C、定义列表 D、公用列表 4、在HTML5文档中，使用C标签标记定义列表 A、< ol> B、< ul> C、< dl> D、< list> 5、下面标签中，A是通用元素 A、< span> B、< p> C、< ol> D、< pre>

第三章 HTML5超链接

3.1 a标签

属性 值 描述
href URL 链接目标URL
target _blank 在新的窗口打开该URL
target _self 默认值，在相同的窗口打开该URL 
<a href="https://blog.csdn.net/weixin_46318413" target="_blank">新窗口跳转</a>

	相对路径：包含当前文档所在的文件夹，也就是以当前文档所在的文件夹为基础开始计算路径。如：./img.png
	绝对路径：包括通信协议名、服务器名、路径及文件名的完全路径。如：file:///D:/Desktop/HTML5-Demo.html 、https://blog.csdn.net/weixin_46318413

3.2 id属性

		<a href="#c1">跳转到1</a>
        <a href="#c2">跳转到2</a>
        <p style="padding: 500px 0;">
            <a id="c1">1</a>
        </p>
        <p style="padding: 500px 0;">
            <a id="c2">2</a>
        </p>

3.3 HTML字符集与颜色

        现代浏览器默认的字符集是ISO-8859-1，如果网页使用不同于ISO-8859-1的字符集，应在< meta>标签进行指定。UTF-8是网页和电子邮件的首选编码，UTF-16主要用于操作系统和软件开发环境中。HTML5支持UTF-8和UTF-16。

<head>
	<meta charset="UTF-8">
</head>

常用的字符实体：

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
‘’ 引号 &quot;
￥ 人民币 &yen;
© 版权 &copy; 
注：如果文档中输了n个空格，HTML5会自动删除n-1个空格，所以要想要有多个空格的效果就要使用&nbsp;

THM5颜色：颜色有红色(red)、绿色(green)、蓝色(blue)组成，颜色值由一个“#”号和六位十六进制数表示。如#ffffff（白色）、#000000（黑色）。 HTML5颜色名：有16种颜色名被W3C的HTML5标准所支持。常用的有black、blue、gray、green、red、white等。

第三章习题

1、已知services.html与text.html在同一服务器上，但不在同一文件夹中。假如文档services.html在文件夹infomation中，现要求在text.html文档中编写一个超链接，链接到文档services.hml的proposals书签中，下面语句正确的是（B）。 A、< a href=“services.html#proposals”>Link< /a> B、< a href="/infomation/services.html#proposals">Link< /a> C、< a href=“proposals”>Link< /a> D、< a href=“information#proposals”>Link< /a> 2、在HTML5文档中，超链接的基本形式是（B）。 A、< a link=“URL”>< /a> B、< a href=“URL”>< /a> C、< a URL=“URL”>< /a> D、< a http=“URL”>< /a> 3、在HTML5文档中，若有名为"end"的锚点，则（C）是建立至该锚点的超链接。 A、< a name=“end”>页尾< /a> B、< a href=“end”>页尾< /a> C、< a href="#end">页尾< /a> D、< a href=“self#end”>页尾< /a> 4、（A）是空格字符实体。 A、&nbsp; B、&lt;C、&gt;D、&copy 5、在下面的颜色值中，（D）是正确的颜色值。 A、&FF0000 B、#FFHH00 C、#FF00GG D、#FFBB00

第四章 HTML5多媒体

4.1 HTML5图像

标签 描述
img 定义图像
map 定义带有可单击区域的图像映射
area 定义图像地图中的可单击区域
figure 定义媒介内容的分组，以及她们的标题
figcaption 定义figure元素的标题

area元素常用属性：

属性 值 描述
coords x1,y1,x2,y2;x,y,radius;x1,x1,y1,x2,y2,……,xn,yn 定义可单击区域坐标，图像的左上角坐标为0,0
href URL 定义此区域的目标URL
nohref nohref 规定此区域没有相关的链接
shape default;rect;circ;poly default规定全部区域；rect规定矩形区域；circ定义圆形；poly定义多边形区域。
target _blank;_self 规定在何处打开链接文档。_blank是新窗口打开；_self是当前窗口打开； 
<img src="https://img-blog.csdnimg.cn/img_convert/3e8f307e0fd3415cead484174ee806cb.png" alt="map内容" usemap="#mapimg"/>
<map name="mapimg">
     <!-- 矩形区域 -->
     <area shape="rect" coords="100,175,790,190" href="https://blog.csdn.net/weixin_46318413/article/details/120881703" alt=""/>
</map>

在红色区域内，鼠标会变成手，点击可跳转到相应链接。 figure和figcaption标签的使用：

<figure>
    <figcaption>图片标题</figcaption>
    <img src="https://img-blog.csdnimg.cn/img_convert/3e8f307e0fd3415cead484174ee806cb.png" alt="map内容">
</figure>

4.2 HTML5 音视频

音频/视频元素：

标签 描述
audio 定义音频
source 定义媒介源
track 定义用在媒体播放器中的文本轨道
video 定义视频

video元素常用属性：

属性 值 描述
autoplay autoplay 视频就绪后自动播放
controls controls 显示视频播放器的控件
height pixels 播放器的高度
loop loop 循环播放
width pixels 播放器的宽度
poster URL 定义视频下载时显示的图像，或用户点击按钮前显示的图像
preload auto;metadata;none 定义视频在页面加载时进行加载并预备播放，如果使用了autoplay，则preload属性失效。auto（默认值）：表示预加载全部的音频/视频；metadata：仅加载音频/视频的元数据；none：不加载音频/视频。
src URL 播放视频的URL
muted muted 静音 
<!--视频加载前先加载poster的图片，加载完毕后会进行视频的自动静音播放-->
<video src="http://files.runningdog.top/test3d/video/background.mp4" controls="controls" muted="muted" autoplay="autoplay" poster="https://img-blog.csdnimg.cn/img_convert/3e8f307e0fd3415cead484174ee806cb.png"></video>


<audio controls>
   <source src="xx.mp3" type="audio/mpeg">
</audio>

第四章习题

1、关

标签： c2h4变送器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台