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

最新推荐文章于 2024-02-28 14:16:11 发布
最新推荐文章于 2024-02-28 14:16:11 发布
阅读量1.4k 收藏 10
点赞数 4
分类专栏： 前端 文章标签： 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46318413/article/details/121248753
版权

HTML5

第一章 HTML5基础

HTML5文件是由一些标签语句组成的文本文件，标签标识了内容和类型，Web浏览器通过解析这些标签进行显示。HTML5文件可用任何的编辑器进行编辑，但是后缀必须为htm或者html。

1.1 HTML5文档结构

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>

效果
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、<!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定义文档中的行内元素

让我们写一篇简单的文章（我只写了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>
<!-- 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标签

属性值描述
hrefURL链接目标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元素常用属性：

属性值描述
coordsx1,y1,x2,y2;x,y,radius;x1,x1,y1,x2,y2,……,xn,yn定义可单击区域坐标，图像的左上角坐标为0,0
hrefURL定义此区域的目标URL
nohrefnohref规定此区域没有相关的链接
shapedefault;rect;circ;polydefault规定全部区域；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元素常用属性：

属性值描述
autoplayautoplay视频就绪后自动播放
controlscontrols显示视频播放器的控件
heightpixels播放器的高度
looploop循环播放
widthpixels播放器的宽度
posterURL定义视频下载时显示的图像，或用户点击按钮前显示的图像
preloadauto;metadata;none定义视频在页面加载时进行加载并预备播放，如果使用了autoplay，则preload属性失效。auto（默认值）：表示预加载全部的音频/视频；metadata：仅加载音频/视频的元数据；none：不加载音频/视频。
srcURL播放视频的URL
mutedmuted静音
<!--视频加载前先加载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>

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

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

第四章习题

1、关于下列两行HTML5代码，描述正确的是（D）。
< img src=“img.gif” alt=“picture” />
< a href=“image.gif”>picture< /a>
A、两者都是将图片链接到网页
B、前者是将图片链接到网页，后者在网页中直接显示图片
C、两者都是在网页中直接显示图片
D、前者在网页中直接显示图片，后者是将图片链接到网页
2、有关网页中的图像的说法不正确的是（C）。
A、网页中的图像并不与网页保存在同一个文件中，每个图像单独保存
B、HTML5图像标记可以描述图像的位置、大小等属性
C、HTML5图像标记可以直接描述图像上的像素
D、图像可以作为超链接的起始对象
3、若要在页面中创建一个图形超链接，要显示的图形为logo.gif，链接地址为http://www.sohu.com/，则以下用法正确的是（B）
A、< a href=“http://www.sohu.com/”>logo.gif< /a>
B、< a href=“http://www.sohu.com/”>< img src=“logo.gif”/>< /a>
C、< img src=“logo.gif”/>< a href=“http://www.sohu.com/”>< /a>
D、< a href=“http://www.sohu.com/”>< img src=“logo.gif” />< /a>
4、以下标签中，主要用来创建视频和Flash的是（B）。
A、object B、embed C、form D、marquee
5、为了解决浏览器对视频格式的兼容情况，可以使用（A）元素为同一个媒体数据指定多个播放格式与编码方式。
A、source B、audio C、video D、track

第五章 HTML5表格

       表格由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称为数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或者表格等元素。HTML5表格结构一般包含标题、头部、主体和脚部。

表格标签：

表格描述
table定义表格
caption表格标题
th表格的头部行
tr表格的行
td表格的单元格,colspan:单元格可横跨的列数；rowspan:单元格可横跨的行数；
thead表格的头部
tbody表格的主体
tfoot表格的脚部
col表格列的属性，对列进行定义属性，比如样式
colgroup表格列的组合

实操练习

<!--style-->
<style>
	th,
	td {
	    border: 1px black solid;
	}
</style>
<!--body-->
<table>
    <col style="background-color: rgb(218, 125, 4);">
    <col span="2" style="background-color: brown;">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表格头部</th>
            <th>表格头部</th>
            <th>表格头部</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>表格脚部</th>
            <th>表格脚部</th>
            <th>表格脚部</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="2">横跨2行</td>
            <td rowspan="2">横跨2列</td>
        </tr>
        <tr>
            <td>表格体</td>
            <td>表格体</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

第五章习题

1、表格的主要作用是（B）
A、网页排版布局 B、显示数据 C、处理图像D、优化网站
2、如果要让表格的边框不显示，应设置boder的值是（B）
A、1 B、2 C、3 D、4
3、定义单元格的是（A）
A、< td>< /td> B、< tr>< /tr>
C、< table>< /table> D、< caption>< /caption>
4、跨行的单元格是（D）
A、< th colspan=“2”> B、< th rowspan=“2”>
C、< td colspan=“2”> D、< td rowspan=“2”>
5、表格的脚部是（B）
A、< tbody>< /tbody> B、< tfoot>< /tfoot>
C、< thead>< /thead> D、< caption>< /caption>

第六章 HTML5 表单

       表单时一个包含表单域的容器。表单元素允许用户在表单中使用表单域（如文本域、下拉列表、单选按钮和复选框等）输入信息。一个表单可以看成三个组成部分：表单标签、表单域和表单按钮。
注：表单控件的name属性必须写，否则无法将控件的内容传到服务器。

6.1 form标签

form标签常用属性：

属性值描述
actionURL表单向何处提交
methodget；post定义如何发送表单数据
autocompleteon；off是否启用表单的自动完成功能
novalidatenovalidate提交时不进行验证

1、action属性
      该属性将表单的内容提交到action指定的服务器端脚本程序进行处理。
2、method属性
POST：在http请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。
GET：浏览器会与服务器建立连接，然后将表单数据直接附在actionURL之后，通过URL在一个传输中发送所有的表单数据，URL和表单数据之间用问号进行分隔。
使用GET数据量不要过大，URL的长度限制在8192个字符以内，否则超出的部分会被截断。
如何选择POST和GET？
a、如果希望获得最佳表单传输性能，可以采用GET方法发送比较少的数据。
b、对有许多表单或是有很长文本域的表单，应该采用POST方法来发送
c、如果考虑安全性的话，建议选用POST，因为GET方法将表单数据直接暴露在URL中，安全性高。
3、autocomplete属性
该属性确定表单是否启用自动完成功能，相当于提交表单之后自动保存数据，下次输入的会与以前键入的值进行匹配。

<form action="" method="get" autocomplete="on">
    <input type="text" name="text" />
    <input type="submit" value="点击" />
</form>

如果autocomplete=“on”，以前键入的值都会记录下来。
在这里插入图片描述

6.2 表单域标签

标签描述
input输入域
textarea多行文本域
label标签
fieldset分组或字段域
legend分组或字段域的标题
select列表
option列表项
optgroup列表选项组
button按钮
datalist下拉列表
keygen生成密钥（废弃）
output输出

1、input标签
      input标签用于输入信息，根据不同的type值，会有不同的形式。

input标签常用属性：

属性值描述
acceptmime_type文件上传提交的文件类型，只能在type="file"时使用
alttext图像的替换文本
autocompleteon；off是否使用输入字段的自动完成功能（自动保存）
autofocusautofocus字段在页面加载时是否获得焦点。不适用于type=“hidden”
checkedcheckedinput元素首次加载时被选中
disableddisabledinput元素加载时禁用此元素
formformname规定输入字段所属的一个或多个表单
maxnumber；date规定输入的最大值，与min配合使用
maxlengthnumber规定输入字段的最大长度
minnumber；date规定输入字段的最小值，与max配合使用
namefiel_nameinput元素名称
multiplemultiple可以选择多个值，只能用在type=“file或者email”
patternregexp_pattern规定输入字段值的模式或格式（正则表达式），如果设置了novalidate不验证，该属性将无效
placeholdertext帮助用户填写输入字段的提示
readonlyreadonly输入的字段为只读，无法进行修改，可以选中
requiredrequired输入的字段值是必需的，如果设置了novalidate不验证，该属性将无效
stepnumber规定输入字段的合法数字间隔，适用于type=“number、date等”，不适用于type=“text”
type见下表input元素的类型
valuevalueinput元素的值

type的种类：

值描述
button按钮
checkbox复选框
file文件域，包括输入字段和“浏览”按钮，供文件上传
hidden隐藏域
image图像形式的提交按钮
password密码域，密码被掩码
radio单选按钮
reset重置按钮，重置表单中所有数据
submit提交按钮，将表单中的数据传到服务器
text单行文本
email规定email地址的输入域，自带邮箱验证
url规定包含URL地址的输入域
number规定包含数值的输入域
range规定包含一定范围内数字值的输入域
date pickers日期选择域（包括data、month、week、time、datetime、datetime-local）
color颜色选择域
search搜索域
<form action="" method="get" autocomplete="on">
    <label>账号：<input type="text" name="username" required /></label><br>
    <label>密码：<input type="password" name="password" required /></label><br>
    <!--label标签的for属性可以实现与其属性值相同的id值的元素上去-->
    <label>单选：<input type="radio" name="radio" value="是" id="yes" /><label for="yes">是</label> <input
            type="radio" name="radio" value="否" id="no" /><label for="no">否</label></label><br>
    <label>多选：<input type="checkbox" name="checkbox" value="1" id="1"/><label for="1">选项1</label><input type="checkbox" name="checkbox"
            value="2" id="2"/><label for="2">选项2</label></label><br>
    <label>隐藏域（存储一些用户看不到的信息，但是里面的默认值会被传到服务器，可以作为验证）：<input type="hidden" name="hidden" /></label><br>
    <label>文件：<input type="file" name="file" multiple /></label><br>
    <label>按钮：<input type="button" name="button" value="点击" onclick="alert('点我')" /></label><br>
    <label>邮箱：<input type="email" name="email" /></label><br>
    <label>url：<input type="url" name="url" /></label><br>
    <label>数字(间隔10)：<input type="number" name="number" step="10" /></label><br>
    <label>范围：<input type="range" name="range" max="200" id="range" />数字显示（本人的可视化手段）：<span
            name="rangevalue"></span></label><br>
    <label>日期：<input type="datetime-local" name="date-pickers" /></label><br>
    <label>搜索：<input type="search" name="search" id="search" /></label><br>
    <label>颜色：<input type="color" name="color" id="color" /></label><br>
    <!-- 分组 -->
	<fieldset>
	    <legend>表单按钮
	    </legend>
	    <label>提交：<input type="submit" name="submit" value="提交" /></label><br>
	    <label>图像：<input type="image" name="image" src="xxx.png" alt="图像" /></label><br>
	    <label>重置：<input type="reset" name="reset" id="reset" /></label><br>
	</fieldset>
    <textarea name="textarea" id="textarea" cols="10" rows="10"
        wrap="soft">可以显示10列，10行的数据，多出来的数据需要自行滚动才能显示</textarea>
</form>
<script>
    let range = document.getElementsByName('range');
    let reset = document.getElementById('reset');
    let rangebtn = document.getElementById('range');
    let num = document.getElementsByName('rangevalue');
    let defalut = range[0].value
    num[0].textContent = defalut
    //range点击事件
    rangebtn.onclick = () => {
        num[0].textContent = range[0].value
    }
    //重置点击事件
    reset.onclick = () => {
        num[0].textContent = defalut
    }
</script>

在这里插入图片描述
在写表单控件的时候最好把name和id都写上，例如<input type="text" name="text" id="text"/>
2、textarea标签
textarea标签定义多行文本区域。

textarea标签常用属性：

属性值描述
colsnumber可见列数
rowsnumber可见行数
wraphard;soft规定提交表单时，文本区域的文本换行模式。wrap="soft"时，用户手动输入的回车会被忽略掉，hard不会。
disableddisabled禁用该文本区域
name（自取）文本区域的名称
readonlyreadonly只读
maxlengthnumber最大字符数
<textarea name="textarea" id="textarea" cols="10" rows="10" wrap="soft">可以显示10列，10行的数据，多出来的数据需要自行滚动才能显示</textarea>

提交前后的对比
3、select、option、optgroup标签
这三个标签组合使用可以实现下拉列表的功能。

select标签常用属性：

属性值描述
disableddisabled禁用列表
multiplemultiple可选择列表多个选项
name（自取）列表名称
sizenumber列表中可见选项的数目，默认为1

option标签常用属性：

属性值描述
disableddisabled选项再首次加载时被禁用
labeltext使用optgroup时的标注
selectedselected选项表现为选中状态
valuetext送往服务器的选项值

代码如下：

<form>
	<select name="select">
        <optgroup label="类别1" disabled>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </optgroup>
        <optgroup label="类别2">
            <option value="1" disabled>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </optgroup>
    </select>
</form>

由于“类别1”的optgroup标签和“类别2”中的1被禁用，所以默认显示“类别2”中的2。效果如下图：
在这里插入图片描述
4、button标签
      button标签定义了一个按钮，在button内部可以放置内容，比如文本或图像。这是该元素与使用input创建的按钮不同之处。

button标签常用属性：

属性值描述
disableddisabled禁用按钮
name（自取）按钮名称
typebutton；submit；reset按钮类型
valuetext按钮显示的初始值

注意：1.按钮需要定义type，不同浏览器默认的type值不同。2.表单中使用button标签，不同浏览器会提交不同的值。

5、datalist标签
定义选项列表。

代码如下：

<input type="text" list="linkList" name="link" />
    <datalist id="linkList">
      	<option value="www.baidu.com" label="百度"></option>
      	<option value="movie.runningdog.top" label="看视频的外挂"></option>
    </datalist>

效果图如下：
在这里插入图片描述
6、keygen标签 已废弃

第六章习题

1、在HTML5中，< form action=?>的action表示（C）。
A、提交的方式 B、表单所用的脚本语言
C、提交的URL地址 D、表单的形式
2、下列能实现列表项多选的是（A）。
A、< select multiple=“multiple”>
B、< samp>< /samp>
C、< select disabled=“disabled”>
D、< textarea wrap=“off”>< /textarea>
3、在HTML5中，用于规定输入字段必填的属性是（A）。
A、required B、formvalidate C、validate D、placeholder
4、（D）输入类型定义滑块控件。
A、search B、controls C、slider D、range
5、若要产生一个4行30列的多行文本域，以下方法中，正确的是（C）。
A、< input type=“text” rows=“4” cols=“30” name=“txtintrol”>
B、< textarea rows=“4” cols=“30” name=“txtintrol”>
C、< textarea rows=“4” cols=“30” name=“txtintrol”>< /textarea>
D、< textarea rows=“30” cols=“4” name=“txtintrol”>< /textarea>

接下去要更新的是前端三剑客之二 —— CSS。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。

@Dai
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
H5/CSS 笔试面试考题（1-10）
m0_74407084的博客
02-01 409
推荐指数： ★★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。
1.10Web前端基础笔记——练习
m0_64838786的博客
03-18 221
字体族、行高、文本样式... ＋顶部导航栏练习
Web前端开发试卷及答案.pdf
07-14
Web前端开发试卷及答案.pdf
第一章 HTML基础 ② 代码练习
Liu_wen_wen的博客
06-06 2081
HTML基础 多种标签的代码
H5/CSS 笔试面试考题（101-110）
m0_74407084的博客
02-28 816
推荐指数： ★★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 初级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题。推荐指数： ★★★ 试题难度： 初级 试题类型： 选择题。
Web前端开发基础：使用HTML标记语言设计一个网页.ppt
06-06
Macromedia公司开发的是一套强大的网页编辑工具 由Dreamweaver，Fireworks，Flash组成，俗称三剑客 这三种软件能相互无缝合作 专业的可视化网页设计编辑、网站管理、维护的工具 特点：能够快速创建各种静态、动态...
前端基础三剑客HTML，css，js
04-21
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现UI/UX设计的各种效果，从而让用户获得更好的使用体验。它主要负责页面的展示样式...
前端三剑客（html+css+js）加vue部分基础运用2
最新发布
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
前端学习黑马程序的基础包括html和css.zip
03-24
这个名为“前端学习黑马程序的基础包括html和css.zip”的压缩包，显然是一个专门为初学者设计的前端学习资源，包含了HTML和CSS的学习资料，其中大部分代码可能已经附带了注释，便于理解。 HTML是网页内容的结构语言...
web.zip，前端三剑客等等教程
08-11
VSCode下载与安装使用教程、HTML、列表、表格、媒体元素、基础、CSS 基础、CSS 美化网页元素、CSS浮动、CSS 网页动画、CSS 盒子模型、JavaScript 基础、JavaScript 函数、JavaScript BOM、JavaScript DOM、...
《web前端开发技术》练习题
__surtr的博客
12-16 7398
练习1 HTML是一种（超文本标记）语言 世界上第一个网页是（http://info.cern.ch） 访问FTP站点使用的协议类型是（ftp） 下列不是开发HTML网页的软件是（Visual Basic），开发软件有：EditPlus, Notepad, TextPad, Sublime Text, WebStorm, HBuilder, AdobeDreamweaver 设计JavaScript语言的公司是（Netscape） 练习2 下列标记用于设置页面标题的标记是（<title>）
web前端技术练习题
在深度学习的路上不断探索
07-01 3942
web技术练习题
HTML web 前端练习题
yikaluosidexizhe的博客
11-10 426
web三道练习题
Web前端—入门篇—练习题
SeanYBLL的博客
08-02 6042
一、简答题 html 中 title 属性和 alt 属性的区别? 【1】Alt属性 1、Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。 2、使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就...
html5 笔试题 选择题,HTML5面试笔试题分享
weixin_31041583的博客
06-09 232
该楼层疑似违规已被系统折叠隐藏此楼查看此楼1、页面导入样式时，使用link和@import有什么区别？答案：差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。差别2：加载顺序的差别：当一个页面被加载的时候(就是被浏览者浏览的时候)，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加...
JavaWeb测试选择题带答案解析（二）
张艳霞
10-21 8445
1、【单选题】 下列关于有关request对象说法正确的是？ A.request对象是一个代表HTTP请求的对象。 B.HttpServletRequest是接口，可以创建request对象。 C.ServletRequest没有子实现类，所以只能通过HttpServletReques接口创建对象。 D.request对象可以获取ServletContext中的域属性。 【正确答案】A 【答案解析】此题目考查的是request对象的特性及概念。request是一个HTTP请求对象。是由HttpServlet
html经典代码题
cx330_az的博客
02-01 310
代码题
html5编程题,前端开发实习笔试题（编程题）（持续更新）
weixin_31246141的博客
06-15 760
1.用JS写一个快速排序算法function quickSort(arr){if(arr.length === 0){return [];}var left = [];var right = [];var pivot = arr[0];for(var i = 1; i < arr.length; i++){if(pivot >= arr[i]){left.push(arr[i]);}e...
html5引擎笔试题,最新！HTML5经典面试题型（附答案）
weixin_28834765的博客
06-03 150
HTML已更新至HTML5，那么HTML5的测试题您也应该知道，这篇文章可以作为您的参考。1.doctype有什么作用呢？如何区分其混合模式和标准模式？所有这些都意味着什么？Doctype的作用是告诉浏览器使用HTML规范的哪个版本来渲染文档。如果DOCTYPE格式不正确或不存在，将导致HTML文档呈现为混合模式。标准型模式(Standardsmode)在最高标准下运行，浏览器支持；混合模式(Qu...
Docker三剑客之Docker Compose应用案例一：Web负载均衡
04-21
Docker Compose是Docker官方提供的一个用于定义和运行多个器应用的工具。它使用YAML文件来配置应用的服务、网络和卷等信息，可以方便地定义和管理多个容器之间的关系。 对于Web负载均衡的应用案例，我们可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值