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">
版权所有@#%#
<
4000
;/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  允许左右两侧浮动(默认值)