HTML前端复习

关键字：HTML常用标签,CSS，CSS文本样式,盒子模型

html文本的内部基本结构

1.<!doctype html>:编写文档说明；
2.<html> 网页中的根标签
3 <head>
<meta charset="utf-8" />：设置页面的字符集
<title>title</title>
</head>
4.<body>

图像标签

<img src=" " alt=" " width=" " height=" " title=" "/>

alt:图像替代文字
title:鼠标悬停时显示的文字

链接标签

A标签
href: 链接路径
target:链接在哪个窗口打开,常用值：_self、_blank

CSS

CSS复合选择器

后代选择器
交集选择器
并集选择器
HTML中引入CSS样式

行内样式
内部样式表
CSS代码写在<head>的<style>标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式表
<link href="style.css" rel="stylesheet" type="text/css" />

字体样式

属性名含义举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px "宋体";

文本样式文本属性

属性含义举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
vertical-align设置垂直对齐方式：middle、top、bottom；

伪类

:hover
伪类将应用于有鼠标指针悬停于其上的元素。

网页背景颜色

Web字体

Font Awesome---提供可缩放矢量图标 (<i>标签）
使用步骤
1.引入css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2.你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的<i>标签，它的语义更加精准）。
3.如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色。

盒子模型

div

每个div可以看成一个盒子;
一个盒子中主要的属性有5个：width、height、padding、border、margin.

外边距的妙用
网页居中对齐
前提，居中对齐的网页元素必须设定宽度。
margin:0px auto;

重置默认样式

为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)

/*默认样式重置(css reset)*/
        body, p, h1, h2, h3, h4, h5, h6, dl, dd {
            margin: 0;
            font-size: 12px; /* 中文字体大小的最小值 */
        }

        ol, ul {
            list-style: none; /* 去除列表样式 */
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

元素分类

行级（内联）元素
块级元素
内联块元素

行级元素

a
strong
em
span

内嵌元素的特性：

1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin

块级元素

p
div
h1~h6
ol-li
ul-li
dl-dt-dd

块元素的特性

1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令

内联块元素—代表元素img

inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度

display属性

控制元素的显示和隐藏

块级元素与行级元素的转变

值说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 内联块元素
none 设置元素不会被显示

背景图像

背景图像（属性
（块级标签里添加背景图像）
background-image属性
background-image:url(图片路径);

背景重复方式
background-repeat属性

repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位

background-position属性

Xpos Ypos
单位：px
Xpos表示水平位置，Ypos表示垂直位置

X% Y%
使用百分比表示背景的位置

X、Y方向关键词
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom

最后编辑于：2018.01.31 16:18:59