day 2 常见标签与CSS基础

一、常见标签

1、块标签

div	无语意
h1-h6	用来定义HTML标题，h1-h6字体逐渐变小，h1-h3具备SEO功能。其中h1一个页面最多出现一次，h2一个页面最多出现八次。
p	定义段落
ul	无序列表
ol	有序列表
li	列表项
article	文章标签
section	区域标签
aside	侧边栏
nav	导航栏
header	头部信息
footer	底部信息

h1-h6显示效果：

块标签特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度。

 

 2、行标签

span	无语意
a	超链接。后边所跟的href是链接地址，target打开方式，其中_self是默认值，在当前页面打开，_blank是在新的标签页打开。
i	字体倾斜
b	字体加粗
sub	下标
sup	上标
em	字体倾斜
strong	字体加粗

行标签特点：同排序跟显示，遇到父级边界换行；不支持宽和高，内容撑开高度；不支持上下外边距；不正常显示上下内边距；换行被解析。

3、行块标签 

img标签

src	资源路径
title	鼠标悬停时的提示文本
alt	图片不能正常显示时的提示文本

img标签特点：只给宽度或高度，图片会等比例变化。 

行块标签特点：同排序跟显示，遇到父级边界换行；没有宽和高的时候内容撑开高度；换行被解析。

二、CSS基础 

1、CSS引入方式

     1）外部样式表

     2）内部样式表

     3）内联样式表

 2、常见样式

        1）背景

background-color	背景颜色
background-image:url()	背景图片

         2）文本

color	字体颜色，表达方式有三种：英文单词；十六进制；rgb或rgba
font-size	字体大小，浏览器默认字体大小为16px
font-family	字体样式
text-align	对齐方式
line-height	行高
text-indent	首行缩进
text-decoration	文本装饰线

3、常用选择器

     1）通配选择器

*{
margin：0；
padding：0；
}

       2）id选择器

#a{
width:200px;
height:200px;
background-color:red;
}

        3)class选择器

.a{
width:200px;
height:200px;
}

        4)标签名

p{
color:cyan;
}

         5)后代选择器

div ul li{
        color: red;
        list-style: none;
    }

         6）群组选择器

div .a,.b{
width:200px;
color:pink;
}

          7）子代选择器：子代选择器只选中父级元素的亲一代，父子级之间用大于号“>”连接

#div_11>#div_12{
				color: #FF0000;
			}

4、选择器优先级

内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配选择器