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

时间：2023-10-05 22:37:03 c2h4变送器

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任何编辑器都可以编辑文件，但后缀必须是htm或者html。

1.2 元素与标签

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

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

<span>元素的内容span>

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

非空元素与标签
语法：<元素名 [属性名=“属性值”]…>元素内容
例：
这是页面标题
这是我的CSDN博客中心
空元素与标签
语法：<元素名 [属性名=“属性值”]… />
例：

点击查看所有的HTML标签

1.3 属性

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


DOCTYPE html>

<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 Demotitle>
    
    <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">演示demospan>
body>

html>

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

让我们写一篇简单的文章（我只写了body里的内容）

<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>

<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>内容1li>
            <li>内容2li>
        ul>
    aside>
    
    <footer class="flex-center">
        <nav>
            <span>热门链接：span>
            <a href="https://blog.csdn.net/weixin_46318413/article/details/120635016">JavaScripta> |
            <a href="https://blog.csdn.net/weixin_46318413/article/details/120865619">Ajaxa>
        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>
    
    article>

2.3 列表

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

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

<aside>
        <span>列表span>
        <ul>
            <li>无序列表1li>
            <li>无序列表2li>
        ul>
        <ol>
            <li>有序列表1li>
            <li>有序列表2li>
        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">跳转到1a>
        <a href="#c2">跳转到2a>
        <p style="padding: 500px 0;">
            <a id="c1">1a>
        p>
        <p style="padding: 500px 0;">
            <a id="c2">2a>
        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>

常用的字符实体：

显示结果	描述	实体名称
	空格
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
‘’	引号	`"`
￥	人民币	`¥`
©	版权	`©`

注：如果文档中输了n个空格，HTML5会自动删除n-1个空格，所以要想要有多个空格的效果就要使用

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、 B、<C、>D、©
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	静音


<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>

HTML5使用audio元素用来播放音频，其常用属性与video一样。

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

第四章习题

1、关

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

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

HTML5

相关文章