HTML&CSS入门与介绍

最新推荐文章于 2024-06-16 09:35:05 发布

boomchenchen

最新推荐文章于 2024-06-16 09:35:05 发布

阅读量9.6k

点赞数 61

分类专栏：前端文章标签： HTML CSS H5 HTML5

本文链接：https://blog.csdn.net/weixin_41710054/article/details/90174704

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

HTML5/CSS

一. HTML5

1.1 参考手册

HTML 参考手册

1.2 字符集

字符集，指的是编码和解码采用的规则。

字符集	语言	备注
ASCII	英语
GB2312	简体中文	中文系统的默认编码
GBK	简繁中文
UTF-8	各国语言
ISO-8859-1	西欧

1.3 标签

1.3.1 常用标签

h1~h5

备注：重点在于语义，而非样式

img

属性：

alt搜索引擎通过该属性检索图片

备注：

除自适应页面外，一般不设置图片的width和height，而是事先处理好图片，以优化性能

iframe

含义：内联框架
备注：不推荐使用，因为iframe中的内容不会被搜索引擎检索

a

含义：超链接
属性：

target属性值也可以指定为内联框架的name，则在该内联框架内打开
href="#"，则跳到顶部；href="mailto:收件人邮箱"则打开邮箱客户端

1.3.2 文本标签

标签	含义	样式	举例
`em`	语气上强调	斜体	如：警告
`strong`	内容上强调	加粗	如：某重要内容
`i`	无语义	斜体
`b`	无语义	加粗
`small`	细则内容	小字号	如：合同内容、版权声明
`cite`	参考内容	斜体	如：书名、电影名、歌名
`q`	内联元素。短引用	引号	如：名人名言。兼容性差，一般不用
`blockquote`	块元素。长引用	独占一行，缩进
`sup`	上标	小型置上
`sub`	下标	小型置下
`ins`	插入的内容	下划线
`del`	删除的内容	中划线
`pre`	代码	保留代码格式
`code`	专门用来表示代码	不保留代码格式

1.3.3 列表标签

标签	含义
`ul`	无序列表
`ol`	有序列表
`dl`	定义列表
`dt`	列表的标题，`dl`子标签
`dd`	列表的内容，`dl`子标签
`li`	列表项，`ul`和`ol`子标签

上述标签均为块元素

1.3.4 长表格标签

标签	含义	备注
`thead`	表头
`tbody`	表中	如果没设置`tbody`，则会自动在表格中添加`tbody`
`tfoot`	表尾

1.3.5 块元素与内联元素

元素类型	常见元素	备注
块元素	`div`、`p`、`h1~h5`等	`p`标签不能包含块元素
内联元素	`span`、`a`等	`a`标签可以包含除本身外的任何元素

1.4 实体

HTML 实体符号参考手册

1.5 语法规范

html不区分大小写，但一般使用小写；
html标签必须结构完整，成对出现或者自结束标签；
html标签的属性必须有值，且值必须加引号；

二. CSS

2.1选择器

选择器的优先级：

内联样式>id选择器>class选择器>元素选择器>通配选择器>继承的样式

① 元素选择器

语法：标签名{}
作用：选择所有指定元素

② id选择器

语法：#id属性值{}
作用：通过id值选择唯一元素

③ 类选择器

语法：.class属性值{}
作用：通过class属性值选择一组元素
备注：

一个元素如果有多个class属性值，通过类选择器指定其中一个属性值，就能选择该元素

④ 并集选择器

语法：选择器1，选择器2，选择器N{}
作用：选中多个选择器对应的元素

⑤ 交集选择器

语法：选择器1选择器2选择器N{}
作用：选中同时满足多个选择器的元素
注意：选择器之间没有空格

⑥ 通配选择器

语法：*{}
作用：选择所有元素

⑦ 后代元素选择器

语法：祖先元素后代元素{}
作用：选择指定元素的后代元素

⑧ 子元素选择器

语法：父元素>子元素{}
作用：选择指定元素的子元素
备注：ie6及以下不支持

⑨ 伪类选择器

语法：选择器:伪类{}
作用：选择指定状态下的指定元素
备注：由于用户隐私限制，:visited只能设置字体颜色

锚伪类：

:link 未访问
:visited已访问
:hover鼠标悬浮
:active 鼠标选定

锚伪类的书写顺序：

visited==link–>hover–>active(箭头表示依次往下书写，双等号表示无顺序要求)

⑩ 否定伪类

语法：元素:not(选择器)
作用：从已选元素中剔除某些元素
备注

语法中元素看需求，可写可不写；

⑪ 属性选择器

语法：元素[属性名="属性值"]{}
作用：选择含有指定属性的元素
备注：

语法中元素和="属性值"看需求，可写可不写；
^表示以指定内容开头，$表示结尾，*表示包含(需是连续包含)。如：[title^="a"]{}表示title属性值为a开头的元素

⑫ 子元素的伪类

语法：

元素:[firsr-child/last-child/nth-child(n)]{}
元素:[first-of-type/last-of-type/nth-of-type(n)]{}

作用：

第一种：在父元素的所有子元素中选择
第二种：在父元素的指定子元素中选择

备注：

参数n也可以写odd表示奇数；写even表示偶数

⑬ 兄弟元素选择器

语法：

前一个元素+后一个元素{}
前一个元素~后一个元素{}

作用：

+表示选择后面的一个兄弟元素(必须是紧挨)
~表示选择后面的所有兄弟元素(不紧挨也算)

2.2 样式

2.2.1 单位

单位	含义	备注
`px`	像素	不同类型的屏幕，像素大小不同
`%`	百分比	根据父元素的样式计算
`em`	类似百分比	根据当前元素的字体大小计算，1em=1font-size

2.2.2 颜色

属性值	备注
`颜色名`
`#红绿蓝`	如果有两位重复，可以写成仅三位
`rgb(红，绿，蓝)`	0-255或0%-100%

2.2.3 文本属性

属性	文本设置	备注
`text-transform`	大小写	`capitalize`每个单词首字母大写，`uppercase`大写，`lowercase`小写
`text-decoration`	修饰线	`none`无，`underline`下线，`overline`上线，`line-through`中线
`letter-spacing`	字符间距
`word-spacing`	单词间距
`text-align`	对齐	`left`，`right`，`center`，`justify`两端对齐
`text-indent`	首行缩进	单位建议用em

2.2.4 文字属性

属性	文字设置	属性值及备注
`color`	字体颜色
`font-style`	样式	`italic`/`oblique`倾斜，效果相同，一般使用前者
`font-variant`	小型大写	`small-caps`小型大写字母
`font-weight`	粗细	`bold`粗体，`bolder`更粗，`lighter`更细，100-900(通常不使用，因为没有那么多字体版本)
`font-size`	字号	一般默认16px
`font-family`	字体	1.能否显示，取决于当前电脑有无该字体；2.多个字体用逗号隔开
`font`	样式、大写、粗细、字号/行高、字体	1.用空格隔开；2.字体必须写最后，大小写倒二；3.大小和字体必须写，其他的没写则为默认值(注意覆盖)

2.2.5 行高属性

① 行间距
行间距=行高(line-height)-字号(font-size)

② line-height
说明：文本默认垂直居中于行高
参数：

大小
百分比，表示通过字体大小计算
数值，表示字体大小的倍数

技巧：对于单行文本，可以将其行高设置为与父元素的高度一致，实现垂直居中于父元素

2.2.6 背景属性

语法：

background-image: url(具体路径);设置背景图
background-repeat设置背景图重复方式
background-position设置背景图位置
background-attachment设置背景图与滚动条关系

scroll默认值。背景图像随滚动条滚动
fixed背景图固定在某一位置，不随滚动条滚动(一般fixed只设置给body)

background:url(具体路径) color repeat position attachment;简写，无顺序要求，若没写则表示设为默认值

说明：如果同时设置背景图和背景色，则背景色会作为图的背景显示。(通常，背景色和背景图同时指定)
图片整合：将多张图片整合成一张，并通过background-position设置偏移位置。这样只要发送一次请求，就能加载多张图片，提高访问效率。

2.2.7 表格属性

属性	表格设置
`border-collapse`	是否合并单元格边框，若合并，则会忽略 `border-spacing` 和 `empty-cells` 属性
`border-spacing`	设置分隔单元格边框的距离
`border`	设置边框样式。如：`order:1px solid black;`

CSS设置tr:nth-child(odd){}可以实现隔行变色效果

2.2.6 opacity

含义：设置透明的
语法：opacity x;(x为0~1之间的数)
说明：ie8及以下不支持。在ie8及以下中使用filter:alpha(opacity=x)(x为0~100之间的数)

2.2.7 display和visibility

display

属性值	描述
`inline`	作为内联元素显示
`block`	作为块元素显示
`inline-block`	作为行内块元素显示，既能设置宽高，又不会独占一行
`none`	隐藏元素，且不会在占页面位置

visibility

属性值	描述
`visible`	显示
`hidden`	隐藏元素，但会继续占页面位置

2.2.8 overflow

属性值	描述
`visible`	显示溢出
`hidden`	隐藏溢出
`scroll`	设置横纵滚动条
`auto`	自动设置滚动条

2.2.9 float

可选值：

none默认值，在文档流中排列
right脱离文档流，向右浮动
left脱离文档流，向左浮动

浮动元素不会盖住文字，文字会自动环绕元素周围

2.2.10 clear

可选值：

none默认，允许影响
right去除右侧浮动元素影响
left去除左侧浮动元素影响
both去除左右侧浮动元素影响

2.2.11 文档流

① 块元素在文档流中的特点

独占一行，自上而下排列
默认宽度为auto，即父元素的100%；
默认高度为被子元素撑开的部分

② 内联元素在文档流中的特点

只占自身大小，从左到右排列
默认宽高均为被子元素撑开的部分
一行中无法容纳时，自动换行

③ 脱离文档流

块元素脱离文档流后，默认的宽高为被内容撑开的部分，即不再独占一行
内联元素脱离文档流后，会变为块元素

④ 高度塌陷

问题描述：在文档流中，元素默认高度为被子元素撑开，但是当子元素设置为脱离文档流浮动时，将造成父元素高度塌陷。
解决方法：

方法一：将父元素设置为overflow: hidden或auto;
方法二：(最推荐的解决方式)

	/*clearfix为父元素class属性值其中的*/
	/*兼容绝大多数浏览器*/
	.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}
	/*兼容ie6及以下的浏览器*/
	.clearfix{
		zoom:1;
	}

2.2.12 BFC

开启BFC后具有的特点：

父子元素的垂直外边距不会重叠
开启BFC的元素不会被浮动元素覆盖
开启BFC的元素可以包含浮动子元素

开启方法：

设置元素为浮动
设置绝对定位
设置元素为display: inline-block;
设置元素为overflow: hidden或auto;

说明：ie6及以下不支持BFC

2.2.13 样式继承

后代元素可以自动继承祖先元素的某些样式，如：字号；而有些样式不会自动继承，如：背景、边框、定位相关的。

2.3 盒子模型

说明：

width和height只设置内容区的宽高
盒子大小=border边框+padding内边距+content内容区

① padding内边距

语法：

padding:上右下左;
padding:上左右下;
padding:上下左右;
padding:上下左右;

说明：

颜色背景会延申到padding内边距
当元素未设置width时(即为auto)，则设置padding不会影响盒子的宽度，而是自动调整

② border边框

border-width、border-style(必填) 、border-color
border
语法： border:宽度样式颜色(无顺序要求)

③ margin外边距

含义：盒子与盒子之间的距离
说明：

设置上左margin，将影响自身位置；设置下右margin，将影响其他盒子位置
若为负值，则表示反向
若只设置margin-right或只设置margin-left为auto，则为最大值，若同时设置为auto，则居中；若设置margin-top为auto，则默认为0

重叠问题

兄弟元素

问题说明：相邻的兄弟元素，在垂直方向上的外边距会发生重叠，即取最大值。
解决方法：在两元素之间插入一个其他元素，让其不相邻。

父子元素

问题说明：如果父子元素的垂直外边距重叠，则子元素的外边距会设置给父元素
解决方法：

给父元素设置border，让其不相邻；
给父元素设置padding，间接实现效果；
给父元素设置clearfix

	/*clearfix为父元素class属性值其中的*/
	.clearfix:before{
		content: "";
		display: table;
	}

④ 内联元素的盒模型

内联元素不能设置width和height；
内联元素只能设置水平margin(重叠时求和)，不能设置垂直的；
内联元素可以设置padding和border，但在水平方向上会影响布局，而垂直方向上不会影响布局。

2.4 定位

当开启元素定位后(position不为static)，可以设置top、right、bottom、left和z-index，反之则不能设置

① 相对定位

相对于元素原来的位置进行定位
不会脱离文档流，不会影响元素性质(块元素还是块元素，内联元素还是内联元素)
会使元素提升一个层级

② 绝对定位

相对于离它最近的开启定位的祖先元素进行定位，如果所有祖先元素均没有开启定位，则会相对于浏览器窗口进行定位。(一般开启了子元素的绝对定位，我们会同时开启父元素的相对开启)
会脱离文档流
会使元素提升一个层级

③ 固定定位

相对于浏览器窗口进行定位，不会随滚动条滚动
会脱离文档流

④ 层级

父元素的层级再高，也无法盖住子元素
如果层级相同，则后写的盖住先写的

2.5 hack

ie10及以上不支持
css hack不推荐使用，难维护

2.5.1 条件hack

在开发中通常利用两份外部样式表，并配合hack进行使用

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

2.5.2 属性hack

符号	浏览器	备注
`_`	ie6及以下	写在样式名最前
`*`	ie7及以下	写在样式名最前
`\9`	ie6及以上	写在样式值最后
`\0`	ie8及以下	写在样式值最后

boomchenchen

关注

61
点赞
踩
171

收藏

觉得还不错? 一键收藏
6
评论
HTML&CSS入门与介绍

HTML5/CSS一. HTML5目录HTML5/CSS一. HTML51.1 参考手册1.2 字符集1.3 标签1.3.1 常用标签metah1~h5imgiframea1.3.2 文本标签1.3.3 列表标签1.3.4 长表格标签1.3.5 块元素与内联元素1.4 实体1.5 语法规范二. CSS2.1选择器① 元素选择器② id选择器③ 类选择器④ 并集选择器⑤ 交集选择器⑥ 通配选择器...
复制链接

扫一扫