HTML5+CSS3 2

一.HTML文本基础结构标签

1.标题标签：<h1></h1>~<h6></h6>

搜索引擎对该标签敏感
块状元素，默认带样式效果

2.段落标签：<p></p>

块状元素，默认带有外边距样式效果（margin-top）

3.换行标签：<br>

单行标签

4.水平线标签<hr>

单行标签
一个默认独占一行
不能放在文本标签内部。如<p></p>
具有一定默认样式，可通过css改变（默认height:0;有border）

5.强调文本标签：<strong></strong> <em></em>

strong整体强调，重要。em局部强调，程度较弱
行间元素

6.特色文本标签：<b></b>（加粗） <i></i>（斜体）

行间元素

7.微组合标签：<span></span>

行间元素
*默认没有样式，仅提供结构化接口

二.css字体样式

font-family ：字体系列支持多个取值

font-size ：字体大小（px em）

em：使用绝对大小定义文档的基准字号（body），然后使用相对大小定义其他文本
中文网页字体通常使用偶数字号
pc端最小字号为12px，移动端最小20px

color ：颜色

font-weight：字体粗细

正常状态：值=normal（400）
加粗状态：值=bold（700）

font-style

normal（正常）
italic（斜体。字体本身具有斜体属性）
oblique（倾斜效果。文字倾斜。无论字体有没有斜体属性）

font 复合属性

顺序：font-style > font-variant > font-weight > font-size / line-height > font-family
font-size font-family必需。可忽略的将使用参数的默认值

三.css文本样式

1.text属性

text-align：设置文本的水平对齐方式

必需用于块状元素
默认值是start，取决于html文档的direction属性设置（默认从左到右，等同left）
值：left right center justify（两边都对齐）

text-decoration：设置文本的修饰方式

为文本添加线条类的修饰
值：none underline（添加下划线） line-through（删除线） overline（添加上划线）

text-indent：设置文本的首行缩进

用于块状元素，用来在内容第一行添加一定空格，达到首行缩进效果
单位：px，em或%
一般使用em，以元素本身字体尺寸为参考基数
可使用负值，产生‘悬挂缩进’特殊效果

text-transform：设置文本的转换（针对英文）

用于转换文本中的大小写方式
值：capitalize uppercase lowercase

text-shadow：设置文本的阴影效果，css3新增属性

需要设定一组值
可通过添加多组值设定多重阴影，达到特殊效果，多组值之间用逗号隔开
值：水平阴影距离（必须值） > 垂直阴影距离（必须值） > 模糊程度（可选，默认为0，无模糊效果） > 阴影颜色（可选，默认等同文本颜色）

2.line-height ：设置文本行高

可把行高看作以文本内容本身为中线，上下垂直延伸形成空隙而成。即：将行距的值（行高-字号）/ 2 ，分别增加到内容区域的上下两边
可使用相对单位设置行高
应用：单行文本在容器中垂直居中

3.overflow ：设置文本（容器内部内容）溢出的控制方式

针对容器内部的内容，不仅仅是单纯文本
适用于块状元素
属性：overflow，overflow-x（处理横向溢出），overflow-y（处理纵向溢出）
值：

visible（默认值）
hidden（隐藏）
scroll（无论内容是否溢出，都会添加滚动条）
auto（内容溢出时，出现纵向滚动条）

4.letter-spacing：设置字符之间的间距

设置单个字符间的间距（中文/英文）
指定的间距将被添加到字符之后
可以使用负值

5.word-spacing ：设置词语之间的间距

设置单词或词语之间间距（根据空格判断）
指定间距会被添加到词语之后，最后一个词语除外
可使用负值

6.word-break ：设置文本自动换行的方法

normal 默认
设定容器中文本字内换行的行为
值：

break-all 允许文本在达到容器边缘时，可以任意位置断开，不受词语限制
keep-all 不允许词语断开，只能在出现词语分隔的空格或连字符时才能换行

四.web图片的格式及应用

web图片格式应用途径：

格式	压缩方式	透明度	动画
JPG	有损	不支持	不支持
PNG	无损	支持	不支持
GIF	无损	支持	支持

应用途径：

1.内容图片（<img>）

属于html
内容图片是网页内容的一部分，有占位，如果加载失败，会出现占位标记
<img>标签

单标签
行间元素，默认表现inline-block效果，可以直接适用盒模型属性
<img>标签不是直接在网页中插入图像，而是指定一个链接图像文件的地址。<img>标签创建的是被引用图像的占位空间
属性：

src（必需）：指定链接路径
alt（必需）：规定图像的替代文本
title：鼠标划过时的文字提示
width（不需要单位，css中会优先于img中width）
height（同上）

2.背景图片（css中background）

属于css
不占位，加载失败，无影响
background基本属性：

background-color ：背景色

大部分HTML元素的背景色默认透明。background-color：transparent；
同时设置背景图和背景色，图在上，色在下

2.background-image ：背景图

值为url路径。background-image：url（）；

3.background-repeat ：背景图的重复方式

值：

repeat
repeat-x
repeat-y
no-repeat

4.background-attachment ：背景图的附着位置方式

值：

scroll：相对html元素定位，不动
fixed ：以浏览器窗口为参考固定（容易与background-position冲突）
local ：背景会随着容器里的内容而滚动

5.background-position 背景图的位置定位

设置背景图的起始位置，默认是html元素的左上角
有两个值：横向坐标值纵向坐标值
如果只指定了一个值，那么该值为横向坐标值，纵向坐标值默认为50%（center）
值：像素值 / 百分比 / 范围值（right top bottom left）
可以是负值！！如果background-attachment的值为fixed，那么background-position会无法正常工作

6.background 复合属性

声明顺序：background-color > background-image > background-repeat > background-attachment > background-position

六.超级链接（hyperlinks）

<a>标签：

行间元素
属性：

href（指定链接路径，实现超级链接的功能）。如果没有href属性，<a></a>只是超链接的一个占位符
target：规定在何处打开链接文档值。_self 默认值，当前窗口打开链接； _blank 在新窗口打开链接

如果页面中超级链接都需要在新窗口打开，需要在<head>标签中添加<base target="_blank">

链接的常见形式：

锚点（anchor）：

用来跳转到链接中的指定位置
通过设置href为 # + id名，跳转到id名处

<div id="anchor"></div>


<a href="#anchor"></a>

相对路径（relative path）：基于网站服务器的路径结构
绝对路径（absolute path）：完整的绝对url：协议（http://）域名（domain.com）文件路径（/hello.html）
空链接（#）
邮箱链接（mailto） <a href="mailto:[email protected]"></a> 点击时会启动电脑上的邮件客户端程序

七.css伪类

伪类：一种动态的类选择符，不是预先创建而是动态形成

超级链接的交互状态：

未被点击的状态（默认）：link
已被访问过的状态：visited
鼠标悬停：hover
激活状态（鼠标点击与释放之间时）：active
获得焦点时状态（适用表单）： **如果分开描述，需要按顺序编写

八.html列表结构

列表类型：

无序列表

<ul>    <!--无序列表区-->
    <li></li>       <!--无序和有序列表的子级列表项-->
</ul>

有序列表

<ol start="5" reversed>     <!--有序列表区-->
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ol>

属性：

start （值：数值）：规定有序列表中首个列表项起始值
reversed（值：reversed）：降序/反序 html5新属性

定义列表（）

<dl>           /*定义列表区*/
    <dt>源代码</dt>            /*子级列表标题*/
    <dd>hello world</dd>
    <dt>源代码</dt>
    <dd>hello world</dd>       /*子级列表描述*/
    <dt>源代码</dt>
    <dd>hello world</dd>
    <dd>hello world</dd>
</dl>

列表标签都是块状元素

九.css列表样式

列表专有属性：list-style

list-style 复合属性

声明顺序：list-style-type > list-style-position > list-style-image

list-style-type ：设置列表符号的类型

值：

disc实心圆点（无序列表默认值）
decimal数字（有序列表默认值）
none

list-style-image ：设置列表符号的图像

设定列表的项目符号的自定义图像
值：url 。但无法精确定位图片位置

list-style-position ：设置列表符号的放置位置

设置列表的项目符号的位置
值：

inside
outside

ul ol存在padding 。dd存在margin
可使用背景属性模拟项目符号（background）