、
十五、表单标签
知识点
标签
用于创建HTML表单，常用属性如下：
action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
元素
元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的
类型
描述
text
普通文本框，一般默认20个字符宽度
textarea
多行文本框
button
普通按钮
radio
单选框
checkbox
多选框
reset
表单重置按钮
submit
表单提交按钮
password
密码输入框，密码字段使用圆点或星号代替
标签
用于为input标签提供标注，点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上，label标签的for属性值应当与相关元素的id属性值相同。
标签
用于创建下拉列表
select元素中的标签用于定义列表的可选项
元素
用于定义普通按钮
习题
表单标签-01
现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段
密号：<input type=“text” name=“country_code” pattern=“[0-9]{3}” ________=“请输入三位数字” />
题解：pattern属性规定用于验证输入字段的正则。
title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。input元素使用title属性可以在输入内容不符合该正则时，给出提示语判断输入是否正确的提示语句只在表单提交时显示
答案：title
表单标签-02
现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段
题解：input中属性type表单提交按钮是submit，表单重置按钮是reset。普通按钮是button。
答案：submit
表单标签-03
怎么用input标签创建一个表单重置按钮补齐这段代码
答案：reset
表单标签-04
怎么用input标签创建一个密码输入框补齐这段代码
题解：placeholder 属性规定可描述输入字段预期值的简短的提示信息，placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
答案：password
表单标签-05
现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到https://ac-api.csdn.net/login，请补全代码片段
十六、转义字符
知识点
在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。
显示
实体名称
实体编号
说明
空格
半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格
/p>
/p>
半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格
/p>
/p>
全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<
<
<
小于号
>
>
>
大于号
&
&
&
&符号
“
“
“
双引号
’
——
‘
单引号
/p>
/p>
版权符号
/p>
/p>
商标符号
/p>
/p>
注册商标符号
$
——
$
美元符号
￥
￥
￥
人民币符号
×
×
×
乘号
÷
&divi de;
÷
除号
习题
转义字符-01
在HTML源代码中用什么实体名称表示版权符号 /p>
答案：/p>
转义字符-02
在HTML源代码中用什么实体名称表示商标符号
答案：/p>
转义字符-03
在HTML源代码中用什么实体名称表示注册商标符号
答案：/p>
转义字符-04
在HTML源代码中用什么实体名称表示大于号>
答案：>
转义字符-05
在HTML源代码中用什么实体名称表示乘号x
答案：×
十七、Head头
知识点
head标签中一般可以包含以下标签：
、
属性
属性值
描述
href
URL
设置目标链接的文件路径
rel
stylesheet、icon、sidebar、prev等
规定当前文档与链接文档之间的关系
type
MIME_type
目标连接文档的MIME类型
用于给文档引入CSS样式信息，将样式表包含在style开始与结束标之间。 用于给页面添加js脚本，可以直接在script开始和结束标签之间包含JavaScript脚本。也可以通过script的src属性链接外部脚本文件。
提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。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】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
用于为页面中的所有相对链接设置默认URL或默认target属性。
target=“_blank” 在浏览器新窗口打开文档。
习题
Head头-01
现需要在html文件中引入JS脚本文件，补全代码
十八、CSS引入方式
知识点
行内样式
直接使用HTML元素的style属性引入CSS样式
例：<p style=＂font-size: 16px; color: #333;＂>软件工程师能力认证
内嵌样式
使用
外部样式
链接样式（最常用）
在标签中，使用标签链接外部的CSS文件
link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为stylesheet表示链接样式表，type属性设置为text/css
例：
导入样式
使用@import url()引入CSS文件
在CSS文件中直接使用@import url()
在HTML文件中需要在
// 在CSS文件中导入
@import url(style.css);
习题
CSS引入方式-01
现需要导入外部样式表，请补全代码片段
答案:stylesheet
CSS引入方式-02
现需要导入外部样式表，请补全代码片段
十九、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（默认）：允许水平和垂直方向重复（平铺）背景图片
repeat-x：只允许水平方向重复（平铺）背景图片
repeat-y：只允许垂直方向重复（平铺）背景图片
background属性
简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表
background: #ff0000 url(‘smiley.gif’) no-repeat cover;
习题
CSS背景属性-01
现需要设置div的背景图高宽为50px，请补全代码片段
答案：cover
二十、CSS文本属性
知识点
color属性
用于设置文本的颜色，可设置的值有：颜色名，如【red】、十六进制值，如【#FFFFFF】、RGB值，如【rgb(255, 0, 0)】、rgba值，如【rgba(255, 0, 0, 0.9)】
font-size属性
用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等。字体大小未设置时默认字体大小为16px
font-weight属性
用于设置文本的粗细，可设置的值有：
属性值
说明
normal
标准字符（默认）
bold
粗体字符
bolder
更粗的字符
lighter
更细的字符
100、200、300、400、500、
600、700、800、900
400相当于normal
700相当于bold
数值越大字体越粗
font-family属性
用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推。
text-align属性
用于设置文本的水平对齐方式，可设置的值有：
center（居中对齐）
left（左对齐）
right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐
line-height属性
用于设置行间距，可设置的值如下
数字：行间距为当前字体大小乘此数字
固定值：设置固定的行间距，如20px
百分比：行间距为当前字体大小乘百分比
text-indent属性
用于指定首行缩进值，可设置的值如下
固定值：设置固定首行缩进，如20px
百分比：首行缩进值为父元素宽度乘此百分比
letter-spacing属性
用于设置字间距，设置固定值为字间距，如10px
word-spacing属性
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px。
text-decoration用于设置文本的装饰线，是下表属性的简写
属性
属性值
描述
text-decoration-line
none
无线条
设置要使用哪种文本装饰的类型（下划线、上划线、删除线）。
underline
下划线
overline
上划线
line-through
删除线
text-decoration-color
颜色名、十六进制颜色、rgb等
设置装饰线颜色
text-decoration-style
solid
实线
设置装饰线的样式
double
双实线
dotted
点划线
dashed
虚线
wavy
波浪线
例：text-decoration: underline wavy red; /* 表示为红色波浪形下划线 */
text-transform属性
用于设置文本大小写字母，常用属性如下
uppercase：全部文本均为大写字母
lowercase：全部文本均为小写字母
capitalize：文本的每个单词首字母为大写字母
writing-mode属性
设置文本在水平或垂直方向的排布方式
horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向
sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）
sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）
vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致
white-space属性
用于设置文本的空白符处理方式，属性值如下
属性值
描述
normal
合并空格，换行符转化为一个空格，允许自动换行
nowrap
合并空格，换行符转化为一个空格，不允许自动换行
pre
保留空格，保留换行符，不允许自动换行
pre-line
合并空格，保留换行符，允许自动换行
pre-wrap
保留空格，保留换行符，允许自动换行
break-spaces
保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间
习题
CSS文本属性-01
现需要实现英文小写转大写，请补全代码片段
hello world
答案：text-transform
CSS文本属性-02
现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段
盒模型由里到外包括四个部分：内容部分，padding（内边距），border（边框），margin（外边距）
内容部分一般用来显示图像或文字，在标准盒模型中（默认），内容部分的宽高可以通过width、height属性设置
padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小
border指的是盒子模型的边框。border除了可以使用border-width设置边框大小外，可以使用border-style设置边框的样式，如实线、虚线，使用border-color设置边框颜色
margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小
标准和怪异模型是由区分的
box-sizing: content-box; 是默认值，标准模型
box-sizing: border-box;怪异模型
box-sizing: inherit;// 规定从父元素继承此值
标准的盒子模型如下
在怪异盒模型中，给盒模型设置的width和height就是盒模型的实际大小，宽高已经包含了border和padding
怪异盒模型的实际大小 = 盒模型设置的width、height（包含border和 padding）
在怪异盒模型中，内容部分的实际宽高是盒模型的宽高减去padding和border
习题
盒子模型-01
现有如下代码片段，请问标准盒模型中div的实际占位高度为_______px
div {
width: 100px;
height: 100px;
margin: 5px;
}
题解：题目中，该盒模型只设置了height和margin，所以，div的实际占位高度 = height + margin-top + margin-bottom
答案:110
盒子模型-02
现有如下代码片段，请问标准盒模型中div的实际占位高度是________px
div {
width: 100px;
height: 100px;
margin-top: 10px;
padding-top: 10px;
}
题解：100+10+10=120
答案：120
盒子模型-03
如下代码片段，请问标准盒模型中div的实际占位高度为______px
div {
width: 100px;
height: 100px;
margin: 5px 10px;
}
题解：margin: 5px 10px;表示上下5px,左右10px.
答案：110
盒子模型-05
现有以下代码，请问最终div的实际高度是_______px
div {
box-sizing: content-box;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
}
题解：box-sizing: content-box;表示div为标准盒模型。div实际高度 = height + padding-top + padding-bottom + border-top + border-bottom（盒子实际占位高度和实际高度不一样的）
答案：160
二十七、定位
知识点
什么是脱离文档流
文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流
元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流的上方，此时元素层级发生变化
position定位
position属性用于指定元素的定位类型，属性值可为
static（默认定位）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）
sticky（粘性定位）
设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置
static定位
页面上的每个盒子从上到下、从左到右依次排列的布局
relative定位
相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变
absolute定位
元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流
fixed定位
相对于浏览器窗口进行定位，元素脱离文档流
常用于顶部导航栏、顶部搜索框、侧边联系客服等板块
sticky定位（存在兼容性问题）
根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合
常用于页面的搜索工具栏，初始加载在默认位置（相当于relative），页面向下滚动时，工具栏固定在页面头部（相当于fixed），页面重新向上滚动，工具栏也会回到默认位置
层级属性z-index
用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）
习题
定位-01
使div.box2定位在div.box1上方，横线处可填写的最大整型数字是
题解：z-index属性值越高，层级越高，层级高的元素会覆盖层级低的元素。z-index值相同时，后面的元素会覆盖前面的。所以，box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在box1上方。
答案：9
定位-02
使类名为top的div定位在类名为bottom的div上方，横线处可填写的最小整数是/p>
题解：为了不让后边的覆盖前边的，不能等于9
答案：10
定位-03
现要求“Hello，World！”文本相对于div向左偏移20px，显示效果如下图，请补全代码片段
Hello，World！
来源：普通网友
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！