html5+css3总结

 

---

 

1	1.前端组成 2.语义化理解 3.html标准语法 4.html注意的问题 5.字符实体	13	1.注释的写法 2.注释的作用	25	颜色的设置方法	37	浏览器内核
2	单、双标签的划分	14	1.css文件的引入方式 2.两种外部引入的比较 3.引入方式的权重	26	XHTML： 1.文档结构 2.元素语法 3.属性语法	38	兼容
3	html与body的说明	15	链接： 1.鼠标的变化 2.语法 3.锚点 4.伪类选择器	27	表单： 1.原有表单格式 2.现有表单格式 3.表单的属性列表 4.新增的标签 5.datalist与select的区别 6.get与post的区别 7.常见的输入类型和兼容情况	39	BFC
4	单标签（空元素）	16	图片： 1.语法 2.路径 3.路径的解释 4.取消默认边框和空隙	28	1.html5新增的标签 2.对html5的理解	40
5	html的元素类型	17	1.表格的说明 2.注意情况 3.表格合并	29	媒体： 1.视频格式 2.声音格式 3.使用方法	41
6	块级元素的空行	18	表格新增的属性和标签	30	css选择器的权重	42
7	行内元素的属性	19	布局的方法	31	css属性大纲	43
8	改变文本的方向	20	padding	32	单行文本溢出的方法	44
9	heading 标签	21	margin	33	浮动float	45
10	p标签	22	背景图： 1.基本语法 2.gif，png，jpg区别 3.精灵图 4.图片整合 5.滑动门技术	34	定位position	46
11	平时的引用标签	23	边框	35	宽高自适应	47
12	计算的代码元素	24	1.地址属性 2.url的加载过程	36	隐藏元素的方法	48

 

ss样式：

@charset "utf-8";

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,table,tr,td,th{margin:0;padding:0}

*{ box-sizing:border-box;}

ul,ol,li{list-style:none;}

b,strong{font-weight:100;}

em,i{font-style:normal;}

h1,h2,h3,h4,h5,h6{font-weight:100;font-size:16px;}

a,u{text-decoration: none;}

input{outline:none;}

img{display:block;border:0;}

html,body{height:100%;}

body{font-family: "微软雅黑";}

.clear_fix:after{content:".";height:0;clear:both;display:block;visibility:hidden;overflow: hidden;zoom:1;}

1. HTML 指的是超文本标记语言 (Hyper Text Markup Language),不是一种编程语言

（1）前端页面由三部分组成：

• html超文本标记语言（结构），描述网页的语义含义
• css层叠样式表（表现），构建网页中的样式
• js客户端脚本语言（行为），对事件的操作

（2）语义化的理解：

• 页面的内容结构化，便于对浏览器、搜索引擎解析。
• 即使没有css文件的情况下，也以一种文档格式存在，并且容易阅读
• 搜索引擎的爬虫根据标记来确定上下文和各个关键字的权重，便于SEO
• 使得阅读源代码的人更容易将网站进行分块，便于阅读理解和维护

（3）html文件的语法：（hyper text markup language）

doctype作用：不是标签，只是声明文档类型，说明一下html文档是用哪个版本编写的。

混杂模式：doctype不存在或格式不正确，在doctype前加入XML声明。

严格、标准模式：申明正确的DTD（文档类型语法规则）

文档的编码格式，元数据

文档的标题

为全网页指定默认的链接地址

外部引入css文件

或

页面内容

外部引入js文件

或

（4）在html文件中应注意的问题：

• 双标签注意 闭合
• 标签名使用小写
• img最好不要加链接，同时最好不要加边框，用padding撑开
• 不要使用"<",">"这样的符号，应使用字符实体：

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	' (IE不支持)
￠	分（cent）	¢
£	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权（copyright）	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷

2. 标签分为单标签和双标签，其中双标签又分为开放标签和闭合标签

单标记：<标记 属性=“属性值”/>

双标记：<标记 属性=“属性值”，属性=“属性值”>

>单标签（空元素）：br、hr、img、link、meta、input

>双标签：a，heading，div，span……

3. html与 /html 之间的文本描述网页， 与 之间的文本是可见的页面内容

4. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。——单标签

5.html的元素类型：

html元素类型	行内元素	块状元素	行内块元素
特征 1	一行显示	换行显示	一行显示
特征 2	宽高无效	可设宽高	可设宽高
特征 3	margin上下无效，padding有效	margin、padding都可设	margin、padding都可设

 

>行内元素：br，sup，sub，strong，b，i，a，span，em，u

>块状元素：hr，div，heading，ul，ol，li，dl，dt，dd，p，table，form，pre，address

pre：预格式文本保留了空格和换行，用来输出代码

address:用于编写地址内容，默认字体为斜体字

>行内块元素：button，img，input，textarea，bdo

6. 在html中，自动地在块级元素前后添加一个额外的空行，此时margin：0；padding：0来取消

7.在行内标签中可以设置哪些属性：style、title（显示额外信息）、id、class

8.改变文本的方向（将两个属性都写在dbo这个标签中）：

• direction：up，down，right，left，rtl，ltr，normal只是文字的倒写而已
• writing-mode：tb-rl，tb-lr，bt-rl，bt-lr，rl-tb，lr-tb，rl-bt，lr-bt，为文本的方向

9.heading标签：

• h1、h2、h3、h4、h5、h6
• h1只能使用一次
• h2为段落标题
• h3位段落的小标题，主要用在段落的小结上
• h4~h6很少使用，用来说明一些不重要的内容

10.p标签：

• q为短引用，常常为所包含的文本添加引号
• blockquote为长引用：浏览器会插入换行和外边距

11.平时的引用标签：

• abbr为缩写内容的展示，要在里面设置title属性
• address为地址标签，字体通常为斜体字，通常需人为更正
• bdo为设置文字文本的方向，里面设有writing-mode和direction属性
• blockquote为长引用，浏览器为其设置外边距和换行，首行缩进需人为
• q为短引用，与blockquote的差别不大，会自动对内部的内容添加引号
• dfn定义项目和缩略词的定义，与abbr差不多，只不过更加强大
• cite定义著作的标题，通常为斜体字

12.计算机的代码元素

• 特点：平时的html文字和字母间距、大小都是可变的，但是计算机元素标签中的字母是不变的
• 元素：code、kbd、samp（原本具有的空格和换行都会省略）、pre（ 保留原有的空格和换行）、var（变量的初始化）

13.注释的作用：

• css中：/** **/
• html中：
• 通知、提醒、排错

14.css样式表的四种引用方式：

（1）内部样式：在head标签中添加style标签，在里面来编写css样式代码

（2）外部样式 ：（两种并比较优缺点）

一. 设置连接的css文件中的编码：@charset "utf-8"; 二. （3）内联样式：

（4）内部样式和外部样式组合使用：

两种外部引用方式的比较： （1）为标签，除了加载css之外还能定义其他事务；import为css范畴，只能加载css （2）在引用css时，html文件与css文件同时加载；import需将html文件加载完之后，才会加载css文件。如果网速慢时，import方式，会只有元素内容而没有相关的样式。 （3）是标签，没有兼容问题；import是css2.1提出的，低版本的浏览器不支持 （4）支持JavaScript对DOM进行操作；import不支持。

三种引用css的方式的权重：

（1） 外部和内部样式的权重和写的顺序有关，后写的覆盖先写的（覆盖相同的内容，不相同的内容保留下来）

（2）内联样式的权重最高

15. 链接：

（1）鼠标移动到该链接时，鼠标的变化（设置cursor属性），添加属性值：

• auto默认[鼠标]
• crosshair加号[+]
• text文本[I]
• wait等待[O]
• help帮助[?]
• progress过程[鼠标+O]
• move移动[雪花]
• pointer点击[小手]
• ne-resize[斜箭头]

（2）语法：

名称 内部可设属性 target（规定此链接在何处显示） target="_blank"新窗口打开 "_self"在当前框架内打开，为默认值 "_top"在顶层或跟框架中打开 "_parent"当前框架上一层打开

（3）锚点：被连接的内容可为name或id

• 被连接的标签为a时，可为id或name
• 被连接的标签为其他标签时，为id
• 发出连接的a中href中必须有#

lalla

离开的时间发了家第三方

sdjfljdsfklkdsf

啦啦 ——此时地址中必须有#

（4）

• 去掉下划线text-decoration:none
• 伪类选择符：
• a:link{} 最初的样子
• a:visited{}加载之后的样子
• a:hover{}鼠标悬浮的样子（常用）
• a:active{}鼠标点击之后的样子

16. 图片：

（1）取消默认边框border：0

（2）解决下边界有空隙display：block

（3）路径：（主要是HTML文件调用图片文件）

• html文件与图片处于同级：
• 当图片处于子文件夹，html文件处于父文件夹时：
• 当图片处于父文件夹，html文件处于子文件夹时：

（4）解释路径：./ 当前目录 ../ 父级目录 / 根目录（如abc/123/1.txt，根目录是相对于子目录而言的，这里的abc相当于根目录）

17. 表格：

（1）表格默认：在直接写table的时候，无论有没有内容，都是没有边框的。给table加边框时，只是给表格的外面加边框

（2）表格中常见的标签：caption标题，th表头（加粗）

（3）单元格边距：cellpadding，指定单元格内容与单元格边界之间的空白距离的大小

（4）单元格间距：cellspacing，每个单元格之间的距离

（5）注意：

• td中不能包含tr
• 除了表格之外在html标签中将width等属性信息，写在style样式中，必须加单位。 在表格中的width等属性添加时，属性值不能加单位
• 当不在style内部样式中给td添加样式时，如若想给每一列（竖）设置样式，只需给第一行的当前列添加width等样式。
• 在合并行和列时：只要不跨行就是合并列（合并行rowspan，合并列colspan），合并时数量是包括自己的。

18. 新增（表格）：

（1） ：将包含标题的写入进来，仅一个 ：将表格的主体部分写进来，可写多个 ：通常为表格的总计（可不写），仅一个 （2） border- collapse：collapse（合并）、separate（分离） （3） border-spacing与cellspacing的效果是一致的，形成“宫字格”

19. 布局方法：

（1）固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间

内容区域的尺寸：980,1000,1100,1200

（2）响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样

一般会有三张设计图，PC,平板,手机

（3）自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现，设计图一般只有一张，640、750居多

20.padding:

Padding值的编写主要是确定子集在父集内的位置，编写时代码写在父集内

分开写：Padding-top/bottom/right/left:value;

组合写：padding:top right bottom left（上、右、下、左）

Padding:(上下、左右)

Padding:(上、左右、下)

21.margin：

Margin针对的是同级之间的关系

分开写：margin-top/bottom/right/left:value;

组合写：margin:top right bottom left（上、右、下、左）

margin:(上下、左右)

margin:(上、左右、下)

22.背景图：

（1）缩写：background: color url(背景路径) no-repeat position

（2）颜色background-color:

添加背景图background-image:url(图片路径)

平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y

固定性：background-attachment:scroll（滚动）/fixed（固定）

位置：background-position:left/center/right/数值 top/center/bottom/数值

向左向上为负值。

（3）精灵图（雪碧图）：将很多的图片集中在一张图片上

（4）图片整合：

原理：背景图的添加和上下左右的移动

要求：

• 整合的背景图的背景是透明的
• 根据实际需求，小图标之间留出足够的空间
• 小图标最好上下排列，最好放在最右侧

优点：

• 可以减少对服务器的请求次数，从而提高页面的加载速度
• 整合图片来减小图片的体积

（5）滑动门技术：

原理：两个背景图的叠加，来回滑动

比如：在li中设a，在a中设span。a与span同时设置背景图。调整位置。

（6）jpg，png，gif的区别：

• jpg（jpeg）：

1.不支持透明

2.不支持动画

3.除了编辑图片的的原数据（旋转、裁切）外，其他操作都会是图片的质量产生损失。

4.支持隔行渐进显示（但ie浏览器不支持这个属性，但它会在整个图像信息完全到达的时候显示）。

5.适合于web上的摄影图片和数字照相机

• gif：

1.透明，是布尔透明类型，只能全透明或全部透明，没有半透明

2.动画，gif支持动画

3.无损耗性，对gif做任何操作，都不会对图像质量产生损耗

4.水平扫描：gif采用LZW进行压缩，有上到下水平压缩。说明横向的比纵向的小

5.gif为可选择行的隔行渐进显示

6.只有256中颜色的gif不适合照片，但是和做图形

• png：

1.三种类型：png8 256色png别名

png24 全色png别名

png32 全色png别名

2.png32 比 png24多了alpha通道，即透明度。photoshop中png24的透明效果实际上是png32。

3.半透明的png8在ie6以下的浏览器中显示为全透明，说明在ie中如果要设置全透明度时，使用全透明的png8。

4.photoshop中只能导出布尔类型的png8，

fireworks既能导出布尔类型的png8，也能导出alpha的png8

23.边框属性：

对元素设置边框时，显示出的页面效果

宽=元素原宽+边框的宽*2;

长=元素原长+边框的长*2

(1)border:边框大小 边框类型 边框颜色

border:10px solid #f00;

(2)边框大小：border-size(px单位)

(3)边框类型：border-style:solid实线/dashed虚线/dotted点线/double双实线

(4)border-width:上右下左（使用时要先写border）

border-left/right/top/botom

24.地址URL（统一资源定位符）：

浏览器宿主环境中，有一个location对象，同时这个对象也是window对象和document对象的属性。

比如地址：https://www.baidu.com/api/sousu?search=baidu&id=123#2

（1）location.href：完整的地址URL

（2）location.protocol：协议 “https：”

• http：超文本传输协议，普通网页，不加密。
• https：安全超文本传输协议，安全网页，数据加密。
• ftp：文件传输协议，将文件下载或上传到网站
• file：当前电脑自身的文件。

（3）location.host：服务器名称和端口号 “www.baidu.com”

（4）location.hostname：返回服务器名称 “www.baidu.com”

（5）location.port：返回服务器端口号

• http协议端口号8080
• https端口号是443

（6）location.pathname:返回URL中的目录和文件名 “api/sousu”

（7）location.search返回查询字符串 “?search=baidu&id=123#2”

（8）location.hash：返回hash值 “#2”

在浏览器中输入url地址之后的加载过程：

（1）利用DNS域名解析系统进行域名解析，将域名解析成IP（域名只是个别名，计算机只认识IP，所以需要DNS进行解析）

（2）查找IP对应的主机服务器（如果第一次访问服务器，会向网络(JSP)供应商请求）

（3）TCP的三次握手，经过三次在客户端和服务器之间传递报文来建立连接

（4）发起http请求，请求入口文件，后端接受到请求相关信息，返回入口文件

（5）解析入口文件，同时如果有资源请求继续发送http请求

（6）入口文件渲染完成（TCP的四次挥手，断开、连接）

25.设置颜色：

• 符合html4与W3C的颜色英文字母
• #加上十六进制数
• rgb（数值，数值，数值），数值的范围是0~255
• rgba(数值，数值，数值，0~1)，加颜色同时设置透明度，这里的透明度并不会改变文字效果

26.XHTML文档说明：（可扩展标记语言）

文档结构

• XHTML DOCTYPE 是强制性的
• 中的 XML namespace 属性是强制性的
• 、、