HTML元素分类和CSS选择器

HTML语义化概述

HTML发展至今从Web1.0发展到Web2.0标准化，一直到如今的语义化

HTML5之前 用div，现在用语义化标签（每个区域都有自己的意义）

结构元素

div和语义化标签(header、nav、article、section、aside、footer)

文本元素

元素名	含义	全拼
strong	强调文本的重要性，将文本设置为粗体	Strong
b	在文本上突出的文本	Bold
em	强调的斜体文本	Emphasized
i	应区别对待的文本（主要是拿来包图标）	Italic
blockquote	整段的引用	Block Quotation
q	小段文本的引用	Quotation
cite	对参考文献的引用	Citation
span	跨越多个字符	Span
abbr	对缩写词的引用	Abbreviation
h1--h6	n级标题	Headline
p	段落	Paragraph
a	超链接	Anchor
sup	上标(X2)	Superscripted
sub	下标(X2)	Suberscripted

 <a href="Disney.htm" target="_blank">点击进入</a>  会在新的窗口（未命名）打开文档
 <a href="Disney.htm" target="_self">点击进入</a>   在当前页面打开一个文档 
 _self对没有指定目标的a元素是默认目标，使目标文档载入并显示在相同的框架或者窗口中作为源文档

相对路径

./当前资源选择（同级目录的话可以省略不写）

../返回上一级目录选择

1.同级目录选择

 
<a href="./snake.htm" target="_blank">点击进入</a>
用外部的index选取snake文档直接用./选择

 

2.外面选里面

 

 <a href="./HTML/HTML1/disney.css.htm" target="_blank">点击进入</a>
用外部的index选择HTML1中的disney.css用./一层一层的选

3.里面选择外面

<a href="./../../CSS/Disney.htm">立即加入</a>
用HTML1中的disney文档选择CSS中的Disney文档用./../(返回到跟HTML1同级的目录)../CSS/(返回到跟HTML同级的目录直接选择CSS)

绝对路径

绝对路径书写格式： 协议//域名/目录

http://html.com/css

站外资源 绝对路径

<a href="http://www.4399.com">立即加入</a>
直接复制

站内资源 相对路径

实体字符

书写格式：&实体名称;

显示结果	描述	实体名称	全拼
	空格	nbsp	No-Break Space
<	小于符号	lt	Less than
>	大于符号	gt	Greater than
&	并且符号	amp	Amp
©	版权符号	copy	CopyRight
®	注册符号	reg	Register

CSS常见的属性

属性	示例	描述
color	color:red	元素内容的颜色
text-align	text-align:center	元素内容对齐方式
font-size	font-size:10px	元素内容文字大小
font-weight	font-weight:bold	元素内容文字粗细
background-color	background-color:blue	示例元素的背景颜色

颜色单位

关键字表示法

h1{color:black;}

HEX16进制表示法

1.16进制颜色由#跟位数字或位数字组成

2.数字用0--9以及大小写a--f字符组成

h1{color:#f00;}          h2{color:#ffoooo;}

RGB值（0~255）

h1{color:rgb(255,130,57);}                               h2{color:rgba(255,64,66,0.5);}
                                                                   a是饱和度从0-1

 

 

HSL值

1.色度由Hue值从0--360无单位数字，表示色环

2.饱和度Saturation、亮度Lightness值从0--100%表示

长度单位（0不需要单位）

绝对长度

1.px一个像素的具体大小会根据设备的分辨率有所不同

2.计算机屏幕由很多小点组成，每一个点就是一个像素

3.其他尺寸单位经过浏览器计算后都会变成px

相对长度

1.%在不同的CSS属性中，有不同的含义(相较于父元素的一个宽度)

2.em相对于当前元素的字体大小（px）成倍数（因为不同分辨率显示的字体大小会有差别，使用等分辨率的em使其相等）浏览器默认16px；

31px 1em=31px 2em=62px

3.rem相对于根元素的大小

CSS选择器

通配符选择器

匹配页面上所有的元素

*{
    padding:0;
    margin:0;
}        
  很low的css重置

后代选择器

祖先元素（space）后代元素{声明块}

div a{                                           <div>
       color:red;                                  <p> 
       font-size:10px;                                <a>11</a>
                      }                             </p>
                                                 </div>
直接选中div里面的a元素

并集选择器

同时选择多个选择器的内容，通过逗号把这些元素或类名并在一起

p,a,h1{
       color:red;
       font-size:10px;
}

伪类选择器 父元素>子元素：

a标签配套的伪类选择器 a:link

:link 访问前 (属性值为空值不生效，没有链接不生效)

:visited 访问后

:hover 鼠标移入时

:active 鼠标点击时

 <div>                                     div>a:first-child{
    <a href="">1</a>                                        color: chartreuse;
    <a href="">2</a>                                     }
    <a href="">3</a>                    div>a:last-child{
    <a href="">4</a>                                      color: aquamarine;
    <a href="">5</a>                                     }                                                  </div>  

元素分类

行类元素：多个元素共占一行，不会自动换行，宽高自动

行类元素：strong,b,em,i,span,a,sup,sub,q,cite,abbr,img
​

块级元素：一个元素独占一行，会自动换行，宽高可设

块级元素：p,h,blockquote,ol,ul,li,dt,dd