一文梳理总结HTML+CSS琐碎知识点
1 前端三要素
2 HTML
2.1 HTML骨架
2.2 HTML标签的基本概念
2.3 HTML基础标签
2.4 HTML高级标签
2.4.1 列表
2.4.2 表格
2.4.3 表单
2.4.4 简单布局
2.5 字符实体
3 CSS
3.1 CSS基本概念
3.2 CSS基本属性
3.2.1 颜色
3.2.2 样式表
3.2.3 基础选择器
3.2.4 高级选择器
3.3 层叠性
3.4 容器
3.5 浮动
3.6 定位
3.5.1 相对定位
3.5.2 绝对定位
3.5.3 固定定位
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>