HTML5的常用标签

HTML5常用标签


meta标签
    <meta charset="UTF-8">
a超链接
    <a href="www.baidu.com">百度一下</a>
img图片链接
    <img src="..." alt="...">
dl标签
    <dl>                   北京
        <dt>北京</dt>             海淀
        <dd>海淀</dd>             怀柔
        <dd>怀柔</dd>
        ....
    </dl>
ul标签
    <ul>
        <li>圆点</li>     <ol>数字</ol>
        <li>圆点</li>     <ol>数字</ol>
        <li>圆点</li>     <ol>数字</ol>
    </ul>
link 链接外部样式
    <link rel="stylesheet" href="...">
span 行内标签
    <span></span>
header 头部标签(页眉)
    <header>heelo word</header>
    可以直接用标签名写CSS样子 无需加ID class 例如
    <style>
        header{width:100px;height:100px;background-color:red}
    </style>
footer 底部标签(页脚)
    <footer id="footer" class="footer">
        版权所有@#%#
    </footer>
nav 此标签常用于导航处布局
    <nav id="nav" class="nav">
        内容
    </nav>
article 作为完整的独立存在的一段内容，适用 article
    <article>
       内容
    </article>
input标签
    <input type="button、text、password、submit、radio、checkbox、hidden...." name="" value="">
    依次是 按钮、文本、密码框、提交按钮、单选按钮、复选框、隐藏域


......................................................................................................................

常用样式：width/height/float/overflow/position/background/display/
font-size/font-weight/font-style/z-index/left/top/bottom/right/border/
padding/margin/list-style/color/text-decoration/outline/clear


width   设置宽度

height  设置高度

float   盒子元素浮动 绝对定位会忽略 float
    {float:left} {float:right}

position    相对、绝对定位
    {position:absolute}绝对定位  相对于 static 定位以外的第一个父元素进行定位
    {position:fixed}   绝对定位  相对于浏览器窗口进行定位。

background  背景属性
    background-color 背景颜色
    background-position 背景图像的位置
    background-size  背景图片的大小
    background-repeat 背景图片重复
    background-image 背景图片

display属性
    display:none    隐藏
    display:block   显示
    display:table   表格显示
    display:table-row 表格行显示

font 字体属性
    font-size   字体大小
    font-weight 字体粗细
    font-style  字体样式
    line-height (字体)行高

z-index属性
    z-index属性只能在定级元素上有效 例如{position:absolute} {position:fixed}
    {z-index:0} 内容1
    {z-index:-1}内容2
    z-index的值越低优先级就越高 这样子 内容1就会覆盖内容2

border 边框
    {border:5px solid red} 四边都为5px的红色边框

padding 内边距
    {padding:1px 2px 3px 4px} 依次为上1px 右2px 下3px 左4px 顺时针

margin  外边距
    {margin:1px 2px 3px 4px}  依次为上1px 右2px 下3px 左4px 顺时针

list-style  列表样式
    list-style-type 标记的类型
    list-style-image 用图片替换原来的标记

text-decoration 文本修饰
    text-decoration:none    无装饰 也可以去掉链接的下划线
    text-decoration:blink   闪烁
    text-decoration:underline   下划线
    text-decoration:line-through    贯穿线
    text-decoration:overline    上划线

outline (轮廓) 是绘制于元素四周的一条线，位于边框外围的位置，可突出元素的作用
    {outline:red outset 10px}
    outline-color:颜色
    outline-style:样式
        outline-style:one   无轮廓
        outline-style:dotted   点状轮廓
        outline-style:dashed   虚线轮廓
        outline-style:solid    实线轮廓
        outline-style:double   双线轮廓
        outline-style:groove   3D凹槽轮廓
        outline-style:ridge    3D凸槽轮廓
        outline-style:inset    3D凹边轮廓
        outline-style:outset   3D凸边轮廓
    outline-width:宽度

clear   清除浮动
    clear:left  左侧不浮动
    clear:right 右侧不浮动
    clear:both  左右两侧不浮动
    clear:none  允许左右两侧浮动(默认值)