分享HTML中18个基础的概念

1.HTML：

Hpyer Text Markup Langage

Hpyer Text：超文本语言（文字，图片，链接，音频，视频等）

区分：普通文本——Word text（文字，表格，图片）

Markup：标签

2e548612524d3da4954c0f79af4795630d7917544469c6ebeeb4f2a0f65f1e6c

一个标签可以有多个属性，一个属性可以有多个值，属性和属性之间，值和值之间用空格隔开

Langage：语言

HTML是用各种标签将超文本内容包起来，然后按照顺序来写

2.文档流顺序：

将浏览器窗口自上而下，分成一行一行的。每一行从左到右排列元素

将浏览器窗口自上而下，分成一行一行，每一行从左到右排列元素，就叫文档流顺序

3.HTML结构标签

HTML：总标签，告诉浏览器，这是一个HTML的文档，一个页面只能有一个

head：头部标签，包含文档的相关信息，在浏览器窗口不显示，一个页面只能有一个

body：身体标签，包含所有超文本内容，在浏览器的窗口显示，一个页面只能有一个

meta：提供页面的相关信息，一个页面可以有多个。b2f0d49c16306e60b5f5bbc3a6018943闭合方式特殊

title：描述页面相关内容，一个页面只能有一个

！DOCTYPE：声明标签，告诉浏览器该文档使用的规范符号W3C规范，没有结束标签，页不写入HTML内部

4.W3C规范：

（1）标签字母必须要小写

（2）有开始标签就要有结束标签，标签的闭合方式有两种。

88dc793bdce1be600f46419ded64a0880d7917544469c6ebeeb4f2a0f65f1e6c

87764349b608acf7d4bc081b801832b3

(3)标签的值一定要用双引号，如{f6c13ddd6a06633ddbe5b015666d87050d7917544469c6ebeeb4f2a0f65f1e6c}

（4）出现的所有符号必须是英文符号

（5）标签+内容=元素

5.三种CSS样式：

CSS（cascading style sheets）层叠样式表    

作用：用于定义HTML内容在浏览器内的显示样式

（1）内联式CSS样式：

06434bcfe5aa639f6d20766716ecaacb这里的文字是红色的94b3e26ee717c64999d7867364b1b4a3

（2）嵌入式css样式

嵌入式CSS样式必须写在c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927之间。

（3）外部式CSS样式（.css为扩展名）

外部式CSS写在93f0f5c25f18dab9d176bd4f6de5d30e内

使用2cdf5bf648cf2f33323966d7f58a7f3f标签将CSS样式文件连接到HTML文件内

<link herf="   .css" rel="stylesheet" type="text/css"/>

CSS样式遵循一个重要的原则——就近原则（但还需判断权值的大小）

6.类选择器

.类选择器名称{CSS样式代码；}

eg：

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

7.ID选择器

ID选择符的前面是“#”号，而不是类名称前的“.”

8.类（.）和ID（#）选择器的区别：

（1）ID选择器只能在文档中使用一次，类选择器可以使用多次

（2）可使用类选择器次列表方法为一个元素同时设置多个样式。ID选择器不可以。

eg：

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

上面的代码的作用是为“三年级”三个字设置文本颜色为红色并且字号为25px

9.子选择器

即大于符号">"，用于选择指定标签元素的第一代子元素

eg：

.aa > li {border:1px solid red;}

类为aa的li元素加入1px红色实线边框

10.后代选择器

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

即胆小如鼠被填充为红色

11.子选择器与后代选择器的区别：

（1）子选择器：直接后代——">"

（2）后代选择器：所有后代——空格

12.通用选择器（*）

匹配HTML的所有标签元素

13.分组选择符(,)

h1,span{color:red;}

14.继承（CSS样式）

不仅应用于某个特定的HTML标签元素，而且应用于其后代。

eg:

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

我小时候胆小如鼠，字体全部为红色，包括胆小如鼠。（继承关系）

15.特殊性：

eg:

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

注：

p,.first都匹配p标签的CSS属性，浏览器根据权值来判断使用哪一种CSS的样式

（标签的权值为1；类选择符的权值为10；ID选择器的权值为100）

eg:

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

16.重要性

CSS样式设置最高权值——important

eg:

p { color:red !important;}
p { color:green;}

则字体为红色

注：

样式优先级：

浏览器默认样式 94fe2dce60eff57a22517762660f269a,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

Atas ialah kandungan terperinci 分享HTML中18个基础的概念. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!