蜘蛛吧,新站快速收录,高质量网站外链,吸引各种蜘蛛! 免费收录 快速收录 最新收录 网站地图 TAGS
首页/ > 文章资讯/ > 前端

HTML+CSS基础知识

2023-01-01 00:18:21   前端   0
【导读】:即层叠样式表用来规定网页显示效果的的基本工作原理选择器样式声明样式声明样式声明常见的选择器标签选择器所有的标签都可以作为标签选择器记住标签选择器前面没有任何符号类选择器对应的属性类选择器前面是英文小数点例如选择器对应的属性选择器前面是例如常...本文地址:/news/669.html

1、CSS,即层叠样式表,用来规定网页显示效果的。

2、CSS的基本工作原理,选择器{ 样式声明; 样式声明; 样式声明; …… }

3、常见的选择器:标签选择器(所有的HTML标签都可以作为标签选择器,记住标签选择器前面没有任何符号)、类选择器(对应HTML的class属性,类选择器前面是英文小数点,例如.box{ width:200px;})、ID选择器(对应HTML的id属性,ID选择器前面是#,例如#tips{ color:red;})

4、常见的9个文本和字体属性如下:

1) color 定义字体颜色属性。例如color:red;

2) font-family 定义字体类型属性。例如font-family: "宋体";

3) font-size 定义字体大小属性。例如font-size: 16px;

4) font-weight 定义字体粗细属性。例如字体加粗定义为font-weight: bold;

5) font-style 定义字体风格属性。例如文字倾斜定义为font-style: oblique;

6) line-height 定义行间距属性,即行高。例如,line-height: 24px;单行文本垂直居中,将行高设置为方框盒子的高度值。

7) text-align 定义文本对齐属性。例如文本右对齐则定义为text-align:right;

8) text-indent 定义文本缩进属性(段首缩进)。例如文本首行缩进text-indent:32px;

9) text-decoration定义文本修饰属性。例如

上划线 text-decoration: overline;

下划线 text-decoration: underline;

删除线 text-decoration:line-through;

5、背景属性background,其子属性有:background-color(背景颜色)、background-image(背景图像)、background-repeat(背景重复属性)、background-position(背景定位属性)。

6、盒子模型相关属性:

1) 内边距:padding

2) 外边距:margin,margin:0 auto;该元素相对于其父类居中显示。

3) 边框:border(子属性有:border-color边框颜色、border-width边框宽度、border-style边框样式)

4) 元素内容尺寸:width元素内容宽度属性、height元素内容高度属性。

注意:padding、margin和border属性有方向。

7、盒子的浮动相关属性:

1) float属性:定义盒子向左或右浮动。

2) overflow属性:定义盒子溢出时的显示效果。当一个方框盒子没有定义高度时,需要使用overflow:hidden;

3) display属性:规定HTML元素是显示为块级元素还是行内元素。块级元素默认的显示为block,行内元素默认显示为inline。将行内元素转化为块级元素可以使用“display:block;”,将块级元素转化为行内元素可以使用“display:inline;”。

8、常见的块级元素:body、<h#>、<p、<ul>/<li>,<ol>/<li>,<dl>/<dt>/<dd>,<hr>等;

常见的行内元素:<img>、<a>、<span>、<em>、<strong>

9、可用于网页排版的CSS属性:float、position(相对定位于绝对定位数学),margin:0 auto;其中float与position属性会改变HTML文档的文档流属性,而margin:0 auto;不会改变HTML文档的文档流属性。

10、文档流:标准文档流与非标准文档流,标准文档流是指HTML元素自然排列(即没有使用float与position属性。)

11、绝对多数的块级元素都有默认的内外边距(padding,margin)。div标签没有默认的内外边距。

12、CSS样式表的优先级:行内式>内嵌式>外部式样式表。

13、CSS选择器的优先级:

以下是一个按特性分类的选择符的列表:

h2{color:blue;} 特性值为:1
p em {color:purple;} 特性值为:2
.apple {color:red;} 特性值为:10
p.bright {color:yellow;} 特性值为:11
p.bright em.dark {color:brown;} 特性值为:22
#id316 {color:yellow} 特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。

14、padding(内边距),margin(外边距),height(高度),background(背景)、display属性、overflow属性等都是不继承的。

15、*{padding:0; margin:0; list-style-type:none; }其中“*”代表通配符,这种全局声明,也叫做通用选择器。

16、CSS锚伪类:

a:link{ color:red;}
a:visited{ color:blue;}
a:hover{color:yellow;}
a:active{ color:purple;}

a:hover必须放在a:link{}和a:visited{}之后,

a:active必须放在a:hover的后面。

17、合理的设置TDK标签(网页三标签)有助于SEO,TDK指的是网页标题标签<title>、网页描述标签description以及网页关键词标签keywords。

18、有助于网站优化的HTML文档结构必须要有meta标签定义的description与keywords:

<html>
<head>
<meta charset="utf-8">
<title>HTML基础</title>
<meta name="description" content="网页正文摘要">(说明)
<meta name="keywords" content="网页关键词">(关键字)
<link href="yangshi.css" rel="stylesheet" type="text/css">
</head>
<body>
网页内容
</body>
</html>

19、网页的字符集charset包括:utf-8(国际通用字符集)、gbk(gb2312、gb18030等简体中文字符集)、big5(繁体中文字符集)。

20、图片<img />标签必须要书写alt属性,以便于搜索引擎更好的识别图片内容。

21、<h#>标签默认效果为强调:加粗、默认字号、换行效果,合理的使用H标签(特别是H1、H2和H3),有利于搜索引擎快速的了解网页的主题内容。其中H1标签在一个网页只能够使用1次,一般在文章标题处使用。

22、选择图片素材的时候,在不影响图片清晰度前提下,图片所占用的空间要最小。

23、所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

24、超链接是搜索引擎蜘蛛不断地抓取网页的桥梁。

25、URL:统一资源定位符,是Uniform Resource Locator的缩写,也被称为网页地址,是Internet上标准的资源地址。Internet上的每一个网页对应一个唯一的URL地址。

任何一个URL,它只会指向一个网页。

以新浪体育网和腾讯体育网的NBA频道为例:

/nba/:相对地址

http://sports.sina.com.cn/nba/绝对地址

https://sports.qq.com/nba/绝对地址

标签:

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、文章来源:来自于网络收集。

网站声明:本站所有资料取之于互联网,任何公司或个人参考使用本资料请自辨真伪、后果自负,本站不承担任何责任。
©2017-2022 蜘蛛吧  https://www.zhizhuba.com/ ICP备案号:冀ICP备19007129号-5