一文梳理总结HTML+CSS琐碎知识点
1 前端三要素
前端三要素如下:
HTML:结构层,从语义角度去搭建网页结构
CSS:样式层,从美观角度去修饰网页样式
JavaScript:行为层,从交互角度去描述网页行为
本文主要陈述HTML+CSS。
2 HTML
2.1 HTML骨架
HTML基本骨架如下所示。
<!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>Document</title>
</head>
<body>
<h1>
hello,world
</h1>
</body>
</html>
DOCTYPE
表明文档类型,作为文本类型定义(Document Type Definition, DTD)必须在.html文件的首行声明,以告知浏览器文件格式。
<html>与</html>标签限定了一个html文档的首末,其属性lang(language)表示改网页的主题语言,en表示英语,zn、cn、zh-CN表示中文。
<html>与之间是文档头和文档体。文档头部由<head>标签定义,其中定义了该html文档的属性配置。其中,基本配置由meta标签引导,例如基本框架中的:
(1) 字符集配置charset
修改字符集的方法是同时修改charset属性和编辑器编码模式。
字符集 | 字库大小 | 中文特点 | 举例 |
---|---|---|---|
UTF-8 | 涵盖地球上所有国家、民族的语言文字,是一个全面的国际化字库 | 每个汉字占3字节,对中文受众,打开网页速度慢 | 新华网 |
gb2312 | 只有汉语和少量其他符号 | 每个汉字占2字节 | |
gbk | gb2312的升级,包含汉语更全面 | 每个汉字占2字节 | 腾讯网 |
(2) 浏览器私有设置
http-equiv是http响应头,与content组成键值对,当服务器向浏览器发送文档时会先发送这些键值对设置。基本框架中的私有设置含义为,尽可能用高级核浏览器打开网页。
(3) 视口标签viewport
(4) 网页标题title
(5) 网页关键字keywords
(6) 页面描述description
以腾讯网为例说明(4)~(6)含义,其在<head>中的定义如下,效果如图2.1所示。
<title>腾讯首页</title>
<meta content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent" name="Keywords">
<meta name="description" content="腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道,充分满足用户对不同类型资讯的需求。同时专注不同领域内容,打造精品栏目,并顺应技术发展趋势,推出网络直播等创新形式,改变了用户获取资讯的方式和习惯。">
2.2 HTML标签的基本概念
HTML语法由一系列标签组成,描述网络资源的组织关系。
标签按是否成对出现分为单标签和双标签。单标签由一个标签组成,例如<br/>;双标签由“开始标签”和“结束标签”两部分构成,例如<p></p>,其中开始标签<p>表示一个段落的开始,结束标签</p>表示一个段落的结束。
标签按能否具有嵌套关系分为文本级和容器级。文本级标签内部只能包含文本,如超链接;容器级标签内部则可以嵌套其他任何标签。
标签间对空白、换行、缩进不敏感,HTML语法只关注标签的首末及嵌套关系。多余的空白会占用内存,影响传输效率,工程中应尽量减少不必要的空白,压缩代码。另外,普通文本间由空格、换行、缩进导致的空白会仅被折叠为一个空白占位显示,称为空白折叠现象,因此有意的多个空白占位应用专门的语法表达,例如空白占位符 
。
2.3 HTML基础标签
(1) 标题标签(headline, h)
h系列标签属于容器级双标签,用于给内部内容赋予权重级别的语义。从标题标签内部看,其共分为h1~h6六级标题,权重依次递减;从外部看,标题标签权重比<body></body>中其他标签都高。搜索引擎除了会首先提取meta标签配置的基本属性外,还会优先提取标题内容,h1标题权重最高且约定一个页面仅使用一对h1标签,通常赋予h1标签网页LOGO等职责。
(2) 段落标签(paragraph, p)
p标签属于文本级双标签,用于给内部内容赋予一个完整段落的语义。
(3) 图片标签(image, img)
属于文本级单标签,用于插入图片。img标签的常用属性如表所示。
序号 | 关键字 | 含义 |
---|---|---|
1 | src | 表明图片的引入路径,可为本地路径或HTTP路径 |
2 | alt | 表明图片未成功加载时的替换文本 |
3 | width | 设置图片的宽度(Unit: pix) |
4 | height | 设置图片的高度(Unit: pix,只设置图片宽高之一时,图片等比例缩放) |
5 | title | 设置图片的悬停文本 |
6 | border | 设置图片边框(Unit: pix),仅为黑色故不常用 |
示例代码:
<img src="img/src1.jpg" title="test img" alt="Not Found" width="500"/>
(4) 锚点标签(anchor, a)
属于文本级双标签,用于给内部内容添加超链接的语义以进行跳转。a标签的常用属性如表所示。
序号 | 关键字 | 含义 |
---|---|---|
1 | href | 设置为内容添加的超链接路径,页面内跳转则以#开头链接到a标签的name属性,或其他标签的id属性 |
2 | target | 设置是否新建标签页以打开链接,值为“_blank” |
3 | title | 设置文字的悬停文本 |
4 | name | 设置页面内锚点,实现页面内跳转 |
示例代码:
<a href="https://www.baidu.com" target="_blank" title="百度">跳转</a>
(5) 链接标签(link)
属于文本级单标签,用于定义本html文档与外部资源的关系。link标签的常用属性如表所示。
序号 | 关键字 | 含义 |
---|---|---|
1 | href | 设置为内容添加的超链接路径 |
2 | rel | 设置当前文档与被链接文档之间的关系,常用的有图标icon、样式表stylesheet、证书license等 |
3 | sizes | 设置被链接资源的尺寸,仅适用于rel=“icon” |
2.4 HTML高级标签
2.4.1 列表
列表是HTML中由一组标签组成的一种数据结构,分为由ul(Unordered List
标签引导定义的无序列表、由ol(Ordered List)
标签引导定义的有序列表、由dl(Definition List)
标签引导定义的定制列表。约定ul或ol标签内部只能嵌套li(List Item)
标签,而li内部则可嵌套其他任何标签;dl标签内部只能嵌套dt(Definition Term)标签
——定制列表的自定义主题、术语与dd(Definition Description)标签
——一个自定义主题或术语的自定义解释项,ul、ol、li、dl、dt、dd均属于容器级双标签。
无序、有序、定制列表代码实例如下所示。
<h2>四大名著</h2>
<ul>
<li>
三国演义
<ul>
<li>刘备</li>
<li>张飞</li>
<li>关羽</li>
</ul>
</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
<h2>电信学院期末考试排名</h2>
<ol>
<li>自动化
<ol>
<li>自动化1班</li>
<li>自动化2班</li>
</ol>
</li>
<li>通信工程
</li>
</ol>
<h2>计算机视觉教程</h2>
<dl>
<dt>数字图像</dt>
<dd>
<p>色彩对应电磁波可见光波段</p>
<p>是被后期处理的波长信息</p>
</dd>
</dl>
<dl>
<dt>透视模型</dt>
<dd>
<p>生活中常见的透视现象</p>
<p>物理本质是光直线传播</p>
</dd>
</dl>
2.4.2 表格
表格是HTML中由一组标签组成的一种数据结构,由table
引导定义。一个完整的表格由三大分区构成:主题caption
、表头thead
、主体tbody
。
caption定义了表格的标题内容。
thead定义了表格表头格式,内部只能嵌套tr(Table Rows)
——表格行,tr内部嵌套th(Table Header)
——表格表头。
tbody定义了表格主体格式,内部只能嵌套tr,tr内部嵌套td(Table Dock)
——单元格,th除了比td多了表头语义,其余行为完全一致。
table、caption、thead、tbody、tr、td、th均属于容器级双标签,其中table标签具有属性border——设置表格边框(Unit:pix)、style——设置CSS样式;tr、td、th标签具有属性rowspan——上下跨行合并单元格数、colspan——左右跨列合并单元格数。
<table border="1" style="border-collapse:collapse">
<!-- 主题分区 -->
<caption>
<p>各地区资产投资情况</p>
<p>数据来源:网络</p>
</caption>
<!-- 表头分区 -->
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计(亿元)</th>
<th>去年同期增长(%)</th>
<th>自年初累计(%)</th>
<th>自年同期(%)</th>
</tr>
</thead>
<!-- 主体分区 -->
<tbody>
<tr>
<td rowspan="3">全国</td>
<td>283949.99</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>283949.99</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>283949.99</td>
<td>9.8</td>
<td>100.0</td>
<td>100.0</td>
</tr>
</tbody>
2.4.3 表单
表单是HTML中由一组标签组成的一种数据结构,由form引导定义,下面介绍主要的表单控件。
(1) 多功能输入框input
属于文本级单标签,用于构造单行输入框、单选框、复选框等丰富类型控件。
序号 | 关键字 | 含义 |
---|---|---|
1 | value | 设置输入框缺省内容 |
2 | placeholder | 设置输入框没有内容时的输入提示文本 |
3 | type | 设置输入框类型 |
3.1 | text | 纯文本 |
3.2 | password | 密码样式 |
4 | radio | 单选样式 通过name属性进行分组,通过checked属性设置缺省选中项 |
5 | checkbox | 复选样式 |
input控件还可使用label标签定义标注。label元素不会向用户呈现任何特殊效果,其作用是当用户选择该标签时,浏览器自动聚焦到和标签相关的表单控件上,使在label元素内点击文本就会触发此控件,为鼠标用户改进了可用性。
(2) 多行输入框textarea
属于文本级双标签,用于构造多行输入框。
序号 | 关键字 | 含义 |
---|---|---|
1 | placeholder | 设置输入框没有内容时的输入提示文本 |
2 | rows | 设置输入框可视区域行数,超出有滚动条 |
3 | cols | 设置输入框可视区域每行显示字节数 |
(3) 下拉菜单select
属于容器级双标签,内部只能嵌套文本级双标签option——下拉菜单项,option通过selected属性设置缺省选中项。
下面是表单控件的综合应用实例。
<form>
<p>用户名:<input type="text" value="winter" placeholder="enter name"/></p>
<p>密码:<input type="password" placeholder="enter pwd"/></p>
<p>
性别:
<label><input type="radio" name="sex" checked="checked"/>男</label>
<label><input type="radio" name="sex"/>女</label>
<label><input type="radio" name="sex"/>保密</label>
</p>
<p>
爱好:
<label><input type="checkbox" name="hobby" checked="checked"/>打球</label>
<label><input type="checkbox" name="hobby"/>游泳</label>
<label><input type="checkbox" name="hobby"/>跑步</label>
</p>
<p>
籍贯:
<select>
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
</select>
</p>
<p>
自我介绍:
<textarea placeholder="enter personal introduction" rows="4" cols="40"></textarea>
</p>
</form>
2.4.4 简单布局
HTML布局标签分为由div
引导定义的跨度布局分割和由span
引导定义的文字分割,前者为容器级双标签,后者为文本级双标签。布局标签仅用于区域或文本的结构化分类,无具体语义。
<font color=#000 size=4>下面是div的代码实例。
<!-- 网页LOGO -->
<div>
</div>
<!-- 导航条 -->
<div>
<!-- 文本 -->
<div></div>
<!-- 图片 -->
<div></div>
</div>
下面是span的代码实例。
<p>今天一共收入<span style="color: red;">300</span>元</p>
2.5 字符实体
在HTML中,某些字符为HTML语法预留而无法直接使用,例如HTML中的<和>会被认为是标签;某些字符通过键盘无法打出,例如版权声明符©。上述情况下建议在 HTML源码中使用字符实体以正确显示预留字符,常用的字符实体如表所示。
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | ' | (IE不支持) ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
3 CSS
3.1 CSS基本概念
层叠式样式表(Cascading Style Sheet, CSS)主要用于配合HTML结构,添加页面样式、辅助布局。CSS主要由两个元素构成——样式和布局。其中样式分为文字样式和盒模型样式,布局指HTML结构无法完成的功能,例如并排显示、精确定位显示等。
3.2 CSS基本属性
3.2.1 颜色
CSS颜色由属性关键字color定义,用于修饰控件颜色。常用名称表示法、HEX表示法、RGBA表示法等来声明颜色值。
3.2.2 样式表
名称 | 优先级 | 位置 | 优点 | 缺点 |
---|---|---|---|---|
行内式 | 0 | HTML标签内,多个属性用分号分隔 | 优先级高,样式设置更精确 | 无法避免重复设置,结构与样式强耦合 |
内嵌式 | 1 | HTML<head>标签底部,由<style>标签引导 | 可以进行批量设置 | 结构与样式弱耦合,多个html文档不能共用一套css设置 |
外链式 | 1 | HTML<head>标签底部,由<style>标签引导 | 结构与样式完全解耦 | |
导入式 | 2 | HTML<head>标签底部,由<style>标签引导 | 结构与样式完全解耦 | 有样式加载顺序问题,工程较大时会页面闪烁 |
3.2.3 基础选择器
名称 | 选择对象 | 用途 |
---|---|---|
标签选择器 | HTML文档中所有同名标签,忽略嵌套规则加载样式 | 全选文档同名标签,配置公共样式 |
id选择器 | 标签中的id属性(标签id属性类似宏定义,约定HTML文档内标签id唯一) | 定制某标签的样式 |
类名选择器 | HTML文档中class属性相同的标签(标签的class属性可以重名或多个) | 同样风格的标签成组统一配置 |
通配选择器 | HTML文档内的所有标签 | 清除页面默认样式 |
标签选择器
<style>
p{
color: skyblue;}
</style>
…
<p>测试1</p>
id选择器
<div>
<p>测试2</p>
</div>
<style>
#test{
font-size: 20px;}
</style>
…
<p id="test">测试1</p>
类名选择器
<style>
.test{
color: blue; }
</style>
…
<p class="test">测试1</p>
<p class="test">测试2</p>
<p class="test">测试3</p>
通配选择器
<style>
*{
margin: 0;
padding: 0;}
</style>
…
<p>p</p>
<h1>h1</h1>
<div>div</div>
3.2.4 高级选择器
名称 | 选择对象 | 用途 |
---|---|---|
后代选择器 | 根据标签间的后代关系确定(后代关系不一定是直接继承,使用空格连接多个选择器确定后代关系) | 精确配置某个或某范围标签 |
交集选择器 | 根据选择器的交集关系确定(使用.表示不同选择器交集) | 精确配置某个或某范围标签 |
并集选择器 | 根据选择器的并集关系确定(使用,表示不同选择器并集) | 定制化统一配置 |
后代选择器
<style>
.box1 ul li{
color: blue;}
.box2 li{
color: red;}
</style>
…
<div class="box1">
<ul>
<li>box1.ul.li</li>
</ul>
</div>
<div class="box2">
<ul>
<li>box2.ul.li</li>
</ul>
</div>
交集选择器
<style>
p.test{
color: blue;}
.test{
color: red;}
</style>
…
<p class="test">p</p>
<div class="test">class</div>
并集选择器
<style>
.par li,p{
color: green;}
</style>
…
<div class="par">
<ul>
<li>li</li>
</ul>
</div>
<p>class</p>
3.3 层叠性
CSS层叠性定义为:有多个选择器对某个或某几个标签中的多条样式进行选择,如果多个选择器都赋予某个或某几个标签相同属性不同样式,则样式作用范围发生了冲突,产生层叠现象。
CSS层叠性的规则如下:
(1) 多个选择器赋予某标签不同属性样式,彼此不冲突
(2) 多个同类基础选择器赋予某标签相同属性不同样式,后样式层叠前样式
(3) 多个不同基础选择器赋予某标签相同属性不同样式,高优先级样式层叠低优先级
(4) 高级选择器层叠性规则
① 若发生标签级冲突,则累加计算高级选择器中各基础选择器的优先级,高优先级样式层叠低优先级;
② 若未发生标签级冲突,则采用就近原则——继承最近层级选择器的属性;
③ 若优先级相同且层级也相同,则后样式层叠前样式。
3.4 容器
容器是CSS布局的重要数据结构,CSS容器主要属性间关系如图所示,其中容器实际加载区域为 w i d t h × h e i g h t width\times height width×height;
容器实体区域为 ( w i d t h + p a d d i n g + b o r d e r ) × ( h e i g h t + p a d d i n g + b o r d e r ) \left( width+padding+border \right) \times \left( height+padding+border \right) (width+padding+border)×(height+padding+border);容器实际占有区域为 ( w i d t h + p a d d i n g + b o r d e r + m a r g i n ) × ( h e i g h t + p a d d i n g + b o r d e r + m a r g i n ) \left( width+padding+border+margin \right) \times \left( height+padding+border+margin \right) (width+padding+border+margin)×(height+padding+border+margin)
下面提供几个CSS容器的应用案例。
图标制作
LOGO超链接
3.5 浮动
CSS浮动样式使元素脱离标准文档流,实现更多自由度的设计,主要用于网页整体布局等。
CSS浮动由float
定义,主要有左浮动和右浮动
元素设置浮动后,既可以设置宽高,又可以定制化显示,不再区分标准显示模式。父代中的一个子代容器设置了浮动特效,则所有子代均需要设置浮动,否则会打乱布局;容器设置浮动特性后,缺省宽度不再为父代宽度,而为内部实体宽度。
给出一个实例:
<style>
.inner{
width: 970px;
height: 970px;
margin: 50px auto;}
.inner .top{
height: 103px;
margin-bottom: 10px;}
.inner .top .logo{
width: 277px;
height: 100%;
background-color: red;
float: left;}
.inner .top .nav{
width: 679px;
height: 100%;
float: right;
}
.inner .top .nav .navListA{
width: 137px;
height: 49px;
background-color: yellowgreen;
float: right;
margin-bottom: 8px;
}
.inner .top .nav .navListB{
width: 679px;
height: 46px;
background-color: yellowgreen;
float: right;}
.inner .middle{
height: 435px;
margin-bottom: 10px;
}
.inner .middle .news{
height: 100%;
width: 310px;
background-color: orange;
float: left;
}
.inner .middle .info{
height: 100%;
width: 650px;
float: right;
}
.inner .middle .info .infoAll{
height: 400px;
width: 100%;
margin-bottom: 10px;
}
.inner .middle .info .infoAll .infoLeft{
height: 100%;
width: 450px;
margin-right: 10px;
float: left;
}
.inner .middle .info .infoAll
.infoLeft{
height: 240px;
width: 100%; background-color: skyblue;
margin-bottom: 10px;}
.inner .middle .info .infoAll .infoLeft
.infoLeftMid{
height: 110px;
width: 100%;
background-color: skyblue;
margin-bottom: 10px;}
.inner .middle .info .infoAll .infoLeft .infoLeftBottom{
height: 30px;
width: 100%;
background-color: skyblue;
margin-bottom: 10px;
}
.inner .middle .info .infoAll .infoRight{
height: 100%;
width: 190px;
background-color: purple;
float: right;
}
.inner .middle .info .infoAbs{
height: 25px;
width: 100%;
background-color: darkgreen;
}
.inner .bottom{
height: 35px;
background-color: navy;
}
</style>
...
<div class="inner">
<!-- 顶部布局 -->
<div class="top">
<div class="logo"></div>
<div class="nav">
<div class="navListA"></div>
<div class="navListB"></div>
</div>
</div>
<!-- 中间布局 -->
<div class="middle">
<div class="news"></div>
<div class="info">
<div class="infoAll">
<div class="infoLeft">
<div class="infoLeftTop"></div>
<div class="infoLeftMid"></div>
<div class="infoLeftBottom"></div>
</div>
<div class="infoRight"></div>
</div>
<div class="infoAbs"></div>
</div>
</div>
<!-- 底部布局 -->
<div class="bottom"></div>
</div>
3.6 定位
CSS定位指将容器按指定位置加载,主要分为不脱离标准流的相对定位,以及脱离标准流的绝对定位和固定定位。
序号 | 关键字 | 含义 |
---|---|---|
1 | position | 设置定位模式,常用属性值为relative(相对定位)、absolute(绝对定位)、fixed(固定定位) |
2 | left | 设置从参考点开始,从左往右定位的距离 |
3 | right | 设置从参考点开始,从右往左定位的距离 |
4 | top | 设置从参考点开始,从上往下定位的距离 |
5 | bottom | 设置从参考点开始,从下往上定位的距离 |
3.5.1 相对定位
参考点为设置定位元素所在的容器。下面为使用相对定位实现导航条的案例。
<style>
div ul{
width: 640px;
height: 60px;
font-size: 20px;
margin: 100px auto;
}
div ul li{
width: 120px;
height: 100%;
background-color: navy;
float: left;
margin-right: 2px;
text-align: center;
line-height: 60px;
}
div ul li:hover{
background-color: white;
}
div ul li a{
display: block;
color: white;
margin: auto auto;
}
div ul li a:hover{
background-color: cyan;
position: relative;
bottom: 10px;
}
</style>
...
<div>
<ul>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
<li><a href="#">测试</a></li>
</ul>
</div>
3.5.2 绝对定位
参考点为设置绝对定位的元素所在容器的父代容器,前提是父代容器设置定位属性,否则以网页body为参考。由于相对定位元素不脱标,结构更稳定,因而父代容器常使用相对定位,子代元素则使用绝对定位。
<style>
div.father{
width:400px;
height: 300px;
border: 2px dashed red;
margin: 100px auto;
position: relative;
}
div.test{
width: 150px;
height: 150px;
font-size: 20px;
border: 2px solid blue;
position: absolute; top:50%;
left: 50%;
margin-left: -75px;
margin-top: -75px;
padding: 20px;
}
</style>
...
<div class='father'>
<div class="test">
测试测试测试测试测试测试测试测试测试测试
</div>
</div>
3.5.3 固定定位
参考点为浏览器页面。
<style>
body{
height: 2000px;
}
a{
display: block;
width: 100px;
height: 100px;
font-size: 15px;
border:3px solid red; border-radius: 50%;
padding: 25px 30px;
position: fixed;
right: 80px;
bottom: 80px;
}
</style>
...
<a class="cir" href="#">返回顶部</a>