HTML5语言、标签、元素

HTML语言（超文本标记语言）

组合使用

a*3=<a href=""></a><a href=""></a><a href=""></a>*h1+a=<h1></h1><a href=""></a>
<img src="地址" alt="文件名">
p*1>img+a[herf="#"]=<p><img src="" alt=""><a href="#"></a></p>

无序列表

<ul>
<li></li>
<li></li>
<li></li>
</ul>

有序列表

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

表格

table tr th td

表单标签

<form action="">
            <input type="text" name="">
            <input type="submit" value="提交" name="">
            <input type="reset" value="重置">
</form>

<input type="radio|checkbox" value="" name="" checked=""><br />
单选框radio   name属性相同
复选框checkbox
当checked="checked"时，该选项被默认选择

下拉列表

<select name="" id="">
    <option></option>
    <!-- 默认选项 -->
    <option value="" select="select"></option>
</select>

文本域

<form>
<textarea name="" id="" cols="30" rows="10"></textarea><br />
<input type="submit" value="提交" name="" />
<input type="reset" value="重置" />
</form>

---

Web语义化

Web语义化：让页面具有良好的结果与含义，从而让人和机器都能快速的理解
斜体 em
粗体 string

自定义列表：dl

列表项：dt

描述项：dd

CSS:层叠样式表

选择器：(同一id选择器只能出现一次，多个id选择器不能同时使用)
p span嵌套声明：p标签内的span标签
h1,p：h1和p

文本样式 text-

字符间距 letter-spancing
行高 line-height 常用于垂直居中（将值与标签大小相同）
对齐 text-align
首行缩进 text-indent
装饰线

text-decoration{ text-decoration: overline;顶部
text-decoration: line-through;居中
text-decoration: underline;底部
text-decoration: none；无
}

字体 font-

背景
当为空标签时要先定义高和宽
填充方式
|—||—|
|repeat| |水平垂直方向填充|
repeat-x 水平
repeat-y 垂直
no-repeat 图片填满区域

超链接

link：未被访问
visited：已经访问
hover：悬停时
active被点击时

列表样式list

list-styple：none；无标号

表格样式

border 边框
border-collapse：collapse；合并边框

奇偶选择器

：nth-child（odd|even）

清除浏览器的默认样式

*{
margin:0;
padding:0;
}

CSS布局与定位

页眉(header)导航条(navbar)页末(footer)

盒子模型

用margin（外边距）来控制相邻两个盒子的距离
当内容溢出盒子框时，用overflow属性设置（hidden：超出部分不可见；scroll：显示滚动条；auto：超出部分有滚动条）

border属性

-width，-styple，-color

margin垂直方向会自动合并

CSS定位机制

文档流定位
display(block,inline(span、a标签不可设置高宽)，liline-block)

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #nav{
            width: 300px;
            margin: 100px auto;
            /* 取消超链接的默认空隙 */
            font-size: 0;
        }
        a{
            /* 为了设置高和宽 */
            display: inline-block;
            width: 80px;
            height: 30px;
            font-size: 14px;
            text-align: center;
            /* 垂直居中 与高的值相同*/
            line-height: 30px;
            text-decoration: none;
            border-bottom: 1px solid #ccc;
        }
        a:hover{
            color: white;
            background-color: #ccc;
            border: 1px solid;
            border-left-color:orange ;
            border-right-color:orange ;
            border-top-color:orange ;
        }
    </style>

    <div id="nav">
            <a href="">百度</a>
            <a href="">淘宝</a>
            <a href="">360</a>
    </div>

浮动流(float)
设置浮动时会丢失原有的位置

div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            /* float: right; */
            /* float: none; */
        }

    <div id="box1"></div>
    <div id="box2"></div>

1.宽度不够的情况

clear:;清除浮动
both：清除左右两边的浮动(左右两侧不会出现浮动元素)
right和left：
none：
例子

1.三行一列

        #container{
            /* 高度会随内容的大小而改变，但初始值还在 */
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            /* background-color: #6cf; */
        }
        #header{
            height: 100px;
            background-color: #6cf;
            margin-bottom:5px;
        }
        #main{
            height: 500px;
            background-color: #cff;
            margin-bottom: 5px;
        }
        #footer{
            height: 100px;
            background-color: #6cf;
            margin-bottom:5px;
        }

<div id="container">
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </div>

2.一行两列

        #container{
            /* 高度会随内容的大小而改变，但初始值还在 */
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            /* background-color: #6cf; */
        }
        #aside{
            float:left;
            width: 300px;
            height: 500px;
            background-color: #6cf;
        }
        #content{
            float: right;
            width: 695px;
            height: 500px;
            background-color: #cff;
        }
       
<div id="container">
        <div id="aside"></div>
        <div id="content"></div>
    </div>

3.三行两列

<link src="float布局.html">

层定位(position)
z-index:值大的在上面

当position:relative时该元素脱离正常的文档流，但其中最文档流的*原来位置依然存在。参照物是直接父元素*
当position:absolue时该元素脱离正常的文档流，但其在文档流的*原来位置不存在。参照物是最近的定义为absolute或relative的父元素*
当没有父元素的值为absolute或relative时会定位到body
一般情况下将父元素设置为relative，子元素设置为absolute

圆角边框(border-radius)
border(-垂直方向-水平方向)-radius

阴影(box-shadow)
/* box-shadow:水平 垂直 阴影大小 颜色 */
box-shadow: 10px 10px 5px #888;
insec:内部
outset：外部

文本阴影（text-shadow）
/* text-radius:水平 垂直 阴影大小 颜色 */
text-shadow:2px 2px 8px #FF0000;

长单词、强制换行(word-wrap:break-word)

@font-face规则
将页面引用的字体放在fonts文件中
www.fontsquirrel.com/tools/webfont

2D转换(对元素的旋转、缩放、移动、拉伸)

/* 旋转 */
transform:rotate(角度deg);
/* 缩放 */
transform:scale(x,y);

过渡效果与动画效果

过度效果(transition)
/* -property:对那个属性进行变化 */
/* -duration:持续时间 */
/* -timing-function:过度使用的函数(方法) */
transition:all 1s linear;

动画效果(animation)
1.定义动画（@keyfframes mycolor（动画名））
2.播放动画
animation: 动画名 时长 方式
-play-state:runging|paused

3D变换

transform-styple:preserve-3d
perspective透视（近大远小）
rotateX()
rotateY()
rotateZ()