一文梳理总结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.1

2.2 HTML标签的基本概念

HTML语法由一系列标签组成，描述网络资源的组织关系。

标签按是否成对出现分为单标签和双标签。单标签由一个标签组成，例如 ；双标签由“开始标签”和“结束标签”两部分构成，例如，其中开始标签表示一个段落的开始，结束标签表示一个段落的结束。

标签按能否具有嵌套关系分为文本级和容器级。文本级标签内部只能包含文本，如超链接；容器级标签内部则可以嵌套其他任何标签。

标签间对空白、换行、缩进不敏感，HTML语法只关注标签的首末及嵌套关系。多余的空白会占用内存，影响传输效率，工程中应尽量减少不必要的空白，压缩代码。另外，普通文本间由空格、换行、缩进导致的空白会仅被折叠为一个空白占位显示，称为空白折叠现象，因此有意的多个空白占位应用专门的语法表达，例如空白占位符&nbsp。

图2.2.1 空白折叠现象

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.1 无序列表

图2.4.2 有序列表

图2.4.3 定制列表

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 字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<

|大于号 |> |>
& |和号 |& |&
" |引号 |"| "
’ |撇号| ' |(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 基础选择器

标签选择器

<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容器主要属性间关系如图所示，其中容器实际加载区域为width×heightwidth\times heightwidth×height；
容器实体区域为(width+padding+border)×(height+padding+border)\left( width+padding+border \right) \times \left( height+padding+border \right)(width+padding+border)×(height+padding+border)；容器实际占有区域为(width+padding+border+margin)×(height+padding+border+margin)\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>

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发相关推荐

web前端好学吗？如何能提高CSS编写技巧提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
一文快速掌握前端开发必备技能
11 月 2 日,微信正式宣布「为便于开发者灵活配置小程序,小程序现开放内嵌网页能力」.此前,CSDN 也发表<微信小程序内嵌网页能力开放意味着什么?>一文,探索微信此举措的本质,进行一句 ...
前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯...
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
css background 充满自适应_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
解决margin塌陷的问题_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
【译】使用这些 CSS 属性选择器来提高前端开发效率！
译者:前端小智原文:www.smashingmagazine.com/2018/10/att- 属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心 ...
RISC-V应用创新大赛 | 一文详解RVB2601套件助你快速上手赢比赛
简介:参加RISC-V应用创新大赛赢取开发资源和好礼上周我们发布了平头哥芯片开放社区×阿里云天池"RISC-V应用创新大赛"正式开赛! 为大家介绍了RISC-V应用创新大赛的赛 ...
a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率
如题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法.通常将 HTML属性放在方括号中,称为属性选择器,如下: ...
JavaScript期末大作业基于HTML+CSS+JavaScript技术制作web前端开发个人博客(48页)

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发

一文梳理总结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 固定定位

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发相关推荐

最新文章

热门文章

一文梳理总结HTML+CSS琐碎知识点 快速上手前端开发

一文梳理总结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 固定定位

一文梳理总结HTML+CSS琐碎知识点 快速上手前端开发相关推荐

最新文章

热门文章

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发相关推荐