C1认证之web基础知识及习题——我的学习笔记
Posted ice三分颜色
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了C1认证之web基础知识及习题——我的学习笔记相关的知识，希望对你有一定的参考价值。
文章目录
目录
前言
前言
大家好，我是ice三分颜色。
个人主页：ice三分颜色的博客
本文讲了C1认证的web基础相关的知识以及习题，篇幅很长，建议收藏。
走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流，努力什么时候开始都不算晚，那不如就从这篇文章开始！
大家一起成长呀！笔芯
Web基础
十四、语义化标签
知识点
| 元素 | 说明 |
| article | 定义独立的来自外部的文档，如新闻投稿、博客文章、论坛帖子等 |
| aside | 一般用于网页中的侧边栏或者文章内部的标注框 |
| header | 页面的头部区域，通常包括网站logo、链接导航、搜索框、banner |
| nav | 页面的导航链接区域 |
| main | 定义文档主要内容 |
| section | 定义文档的区域 |
| footer | 文档的页脚 |
| mark | 标记、突出显示文本 |
| ul | 无序列表 |
| form | 创建html表单 |
| button | 定义按钮 |
| i | 用于表示区分普通文本的其他文本，浏览器通常会将其内容显示为斜体 |
习题
语义化标签-01
现需要设置一个按钮，请填写语义化标签补全代码片段（仅填写一个标签名即可）
<_____>点我!</_____>
A. input
B . button
c. a
D. div
题解：input是html中规定用户可以在其中输入数据的输入字段，<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。Input可以设置提交按钮，但要通过type属性。
在 <button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
a是超链接，用属性href指定连接的目标
div是块级元素
答案B
语义化标签-02
在HTML中一般用哪个语义化标签表示斜体文本效果
A. i
B. p
C. span
D. h4
题解：i斜体
P段落标签
span行内标签
h4标题标签
答案A
语义化标签-03
在HTML中一般用哪个语义化标签表示头部导航
A. a
B . header
c. link
D. nav
题解
nav是页面导航的链接区域，写在body标签内，做页面的头部导航部分
header是页面的头部区域，<header> 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
link是定义文档与外部资源的关系，最常见的用途是链接样式表。存在于head部分可出现任何次数
a是超链接，用属性href指定连接的目标
答案D
语义化标签-04
在HTML中一般用哪个语义化标签定义无序列表<______>?
A. div
B. ul
c. ol
D. section
题解：div块级元素，ul无序列表，ol有序列表，section定义文档的区域（<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。）
答案B
语义化标签-05
在HTML中一般用哪个语义话标签定义表单<_______>?
A. aside
B. main
c. form
D. section
题解： <aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容关。
<main> 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。<form>表单。section定义文档的区域
答案C
十五、表单标签
知识点
<form></form>标签
用于创建HTML表单，常用属性如下：
action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
<input />元素
<input />元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的
类型
描述
text
普通文本框，一般默认20个字符宽度
textarea
多行文本框
button
普通按钮
radio
单选框
checkbox
多选框
表单重置按钮
submit
表单提交按钮
password
密码输入框，密码字段使用圆点或星号代替
<label></label>标签
用于为input标签提供标注，点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上，label标签的for属性值应当与相关元素的id属性值相同。
<select></select>标签
用于创建下拉列表
select元素中的<option></option>标签用于定义列表的可选项
<button></button>元素
用于定义普通按钮
习题
表单标签-01
现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段
<form action="/example/html5/demo_form.asp">
密号：<input type="text" name="country_code" pattern="[0-9]3" ________="请输入三位数字" />
<input type="submit" />
</form>
题解：pattern属性规定用于验证输入字段的正则。
title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。input元素使用title属性可以在输入内容不符合该正则时，给出提示语判断输入是否正确的提示语句只在表单提交时显示
答案：title
表单标签-02
现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段
<input type="________" value="提交">
题解：input中属性type表单提交按钮是submit，表单重置按钮是reset。普通按钮是button。
答案：submit
表单标签-03
怎么用input标签创建一个表单重置按钮？请补齐这段代码
<input type="________" value="重置">
答案：reset
表单标签-04
怎么用input标签创建一个密码输入框？请补齐这段代码
<input type="________" placeholder="请输入密码">
题解：placeholder 属性规定可描述输入字段预期值的简短的提示信息，placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
答案：password
表单标签-05
现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到https://ac-api.csdn.net/login，请补全代码片段
<form _______="https://ac-api.csdn.net/login" method="get">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="提交">
</form>
题解：form 的属性action，属性值是URL，规定当提交表单时向何处发送表单数据。向url的网址发送表单数据。
答案：action
十六、转义字符
知识点
在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。
| 显示 | 实体名称 | 实体编号 | 说明 |
| 空格 | |   | 半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致 |
| 空格 |   |   | 半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致 |
| 空格 |   |   | 全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致 |
| < | < | < | 小于号 |
| > | > | > | 大于号 |
| & | & | & | &符号 |
| " | " | " | 双引号 |
| ' | ------ | ' | 单引号 |
| © | © | © | 版权符号 |
| ™ | ™ | ™ 或 ™ | 商标符号 |
| ® | ® | ® | 注册商标符号 |
| $ | ------ | $ | 美元符号 |
| ¥ | ¥ | ¥ | 人民币符号 |
| × | × | × | 乘号 |
| ÷ | &divi de; | ÷ | 除号 |
习题
转义字符-01
在HTML源代码中用什么实体名称表示版权符号 ©？
答案：©
转义字符-02
在HTML源代码中用什么实体名称表示商标符号 ™
答案：™
转义字符-03
在HTML源代码中用什么实体名称表示注册商标符号 ®
答案：®
转义字符-04
在HTML源代码中用什么实体名称表示大于号>
答案：>
转义字符-05
在HTML源代码中用什么实体名称表示乘号x
答案：×
十七、Head头
知识点
head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>
<title></title>用于定义文档的标题，该标题会出现在浏览器窗口的标题栏或状态栏上，把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
<link />用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标。<link />是空元素，仅包含属性，只在<head>标签内。
| 属性 | 属性值 | 描述 |
| href | URL | 设置目标链接的文件路径 |
| rel | stylesheet、icon、sidebar、prev等 | 规定当前文档与链接文档之间的关系 |
| type | MIME_type | 目标连接文档的MIME类型 |
<style></style>用于给文档引入CSS样式信息，将样式表包含在style开始与结束标之间。
<script></script>用于给页面添加js脚本，可以直接在script开始和结束标签之间包含javascript脚本。也可以通过script的src属性链接外部脚本文件。
<meta />提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性。值作为元数据的名称，content作为元数据的值。keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一
| 名称 | 值 | 描述 | |
| keywords | 关键字 | 描述网页关键字，使用逗号分隔 | |
| description | 描述内容 | 网站主要内容的简短描述 | |
| author | 作者 | 描述网站作者 | |
| viewport | width | viewport视口宽度，设置为device-width表示为设备的宽度 | 定义viewport的初始大小，仅用于移动设备 |
| height | viewport视口高度 | ||
| maximum-scale | 最大缩放比例 | ||
| initial-scale | 初始缩放比例 | ||
| minimum-scale | 最小缩放比例 | ||
| user-scalable | 是否允许用户缩放 | ||
charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：content-type：规定文档的字符编码，等同于charset属性设置字符编码
default-style：设置默认CSS样式表组的名称
refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
<base />用于为页面中的所有相对链接设置默认URL或默认target属性。
target="_blank" 在浏览器新窗口打开文档。
习题
Head头-01
现需要在html文件中引入JS脚本文件，补全代码
<script _____="./index.js"><script>
答案：src
Head头-02
head中一般使用哪个标签引入外部的CSS样式表文件？
<_____ rel="stylesheet" href="style.css" type="text/css" />
答案：link
Head头-03
现有以下代码片段，要求实现定义SEO的关键字， 请补全代码片段
<meta name="_______" content="CSDN，CSDN能力认证中心"/>
答案：keywords
Head头-04
在移动端设备中想要定义视口宽度为屏幕宽度，请补全代码片段
<head>
<meta name="viewport" content="width=________, initial-scale=1.0">
</head>
答案：device-width
Head头-05
需定义文档的字符编码为utf-8，请补全代码片段
<head>
<meta _______="UTF-8">
</head>
答案：charset
十八、CSS引入方式
知识点
行内样式
直接使用HTML元素的style属性引入CSS样式
例：<p style=＂font-size: 16px; color: #333;＂>软件工程师能力认证</p>
内嵌样式
使用<style></style>标签引入样式
例
<style>
p
color: #333;
font-size: 16px;
</style>
外部样式
链接样式（最常用）
在<head></head>标签中，使用<link />标签链接外部的CSS文件
link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css
例：<link rel="stylesheet" href="style.css" type="text/css" />
导入样式
使用@import url()引入CSS文件
在CSS文件中直接使用@import url()
在HTML文件中需要在<style></style>标签中使用@import url()
在HTML初始化时，@import url()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分
// 在HTML文件中导入
<style>
@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);
习题
CSS引入方式-01
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link rel="________" href="style.css" />
</head>
答案:stylesheet
CSS引入方式-02
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" ______="style.css" />
</head>
答案:href
CSS引入方式-03
现有以下代码片段，需要在行内引入CSS样式，补全代码片段
<p _______="color: #333; font-size: 16px;">CSDN能力认证中心</p>
答案:style
CSS引入方式-04
现需要在index.css中引入文件style.css，补全代码片段
/* index.css */
________ url('style.css')
p
font-size: 16px;
/* style.css */
p
color: red;
答案:@import
CSS引入方式-05
现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="_______" rel="stylesheet" href="style.css" />
</head>
答案:text/css
十九、CSS背景
知识点
| 属性 | 属性值 | 说明 |
| background-color | 颜色值，如rgb，rgba，十六进制表示等，设置为transparent表示背景透明 | 设置背景颜色 |
| background-image | url( filepath ) 或 none | 设置背景图像 |
| background-size | 宽高、百分比宽高、contain、cover | 设置背景图片尺寸 |
| background-repeat | repeat/ repeat-x/ repeat-y | 设置背景图片重复方式 |
| background-position | top left/ top center/ center等 | 设置背景图片的位置 |
background-size属性
contain：保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示，有可能出现图片无法完全覆盖背景区域
cover：保持图片纵横比不变，最大程度覆盖背景区域，有可能导致背景图片部分区域无法显示
background-repeat属性
repeat（默认）：允许水平和垂直方向重复（平铺）背景图片
C1认证学习四（多媒体基础参数）