常用标签dive in

1. <a>  插入超链接

示例
<a href="http://www.baidu.com" target="_blank">百度</a>
属性
说明
href
可使用绝对路径或相对路径,亦可使用锚点(页面内跳转)
<a href="#1">jump to "here"</a>
<a name="1">here</a>
target
指定新页面的打开方式,取值如下:
_blank,在新标签页中打开
_self,在当标签页中打开

2. 分组元素
① <p> 段落,中间空行
② <div> 无实际效果
③ <blockquote> 段落,前后都缩进 ,中间空行
④ <pre> 按照编辑器内的排版格式显示(不完全一致)
⑤ <hr> 水平分割线
⑥ <ul> 添加无序列表,用法:

<ul>
    <li>第一项</li>  //li的value属性可设置此项开始的编号
    <li>第一项</li>
    <li>第一项</li>
</ul>

⑦ <ol> 添加有序列表,start属性可指定起始编号,type可指定编号形式(a, A, i, I, 1)

⑧ <dl><dt><dd> 生成说明列表,用法:

<dl>
    <dt>这是第一章</dt>
    <dd>第一章第一节</dd>
    <dd>第一章第二节</dd>
</dl>

⑨ <figure> 插图,用法:

<figure>
    <figcaption>这是一张图片</figcaption>
    <img src="img.png">
</figure>

3. <table> 表格元素,用法:

<table border="1" style="width:300px;">
    <caption>这里是标题</caption>
    <colgroup>
        <col>                                //占位
        <col background="red;">              //第二列背景色设为红色
    </colgroup>
    <tfoot>                                  //表尾-始终在最后一行显示
        <tr>
            <td colspan="3">共计:1人</td>
        </tr>
    </tfoot>
    <tbody>                                  //表体
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>27</td>
        </tr>
    </tbody>
    <thead>                                 //表头-始终在第一行显示
        <tr>
            <th rowspan="3">基本情况</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    <thead>
</table>

4. 文档元素,基本无显示效果,主要表示语义以方便CSS进行样式标记,示例:

<body>
    <header>
        这里放置LOGO,标题,导航等
        <hgroup>
            <h1>这是一个大标题</h1>
            <h4>这是一个小标题</h4>
        </hgroup>
        <nav>这是一个导航</nav>
    </header>
    <section>
        这是一个主题部分
    </section>
    <article>
        <header>...</header>
        <section>...</section>
        <address>这里放置联系信息</address>
        <footer>...</footer>
    </article>
    <aside>
        这是一个注释栏
        <nav>这是注释栏内的导航</nav>
    </aside>
    <footer>
        <h4>这是尾部的小标题</h4>
        <address>这里放置联系信息</address>
    </footer>

5. 嵌入元素,将外部资源插入到HTML中:

① <img> 插入图片

示例
<a href="index.html"><img src="img.png" alt="风景" width="30" height="20"></a>
属性
说明
src
图像的url
width,height 宽度,高度
ismap
获取点击位置的坐标,并在请求的地址后添加该坐标值
usemap

创建分区响应,点击不同区域转到不同超链接

<img src="img.pne" usemap="#Map">

<map name="Map">

    <area shape="rect" coords="44,33,123,102" href="www.baidu.com" target="_blank" alt="百度">

</map>

② <iframe> 嵌入另一个文档

示例

<a href="www.baidu.com" target="in">百度</a>

<iframe src="www.soso.com" width="200" height="300" name="in"></iframe>

属性
说明
src
初始化时显示的页面
width,height 宽度,高度
name
被其他标签的target属性引用时,使用的名称

③ <embed> 嵌入插件内容

示例
<embed src="视频.swf" type="application/x-shockwave-flash" width="600" height="800"></embed>
属性
说明
src
视频源
type
视频类型,自动识别后缀因而可省略
width,height 宽度,高度

④ <progress> 进度条,IE10及以上支持,一般通过JS控制进度动态效果

示例
<progress value="30" max="100"></progress>
属性
说明
value
进度值
max
进度最大值

⑤ <meter> 类似于进度条,可设置警示范围,IE不支持

示例
<meter value="90" min="10" max="100" low="30" high="80"></meter>
属性
说明
value

进度值

min
最小值,value小于等于该值不显示
max

最大值

low
下阙值,小于该值进度条变黄色
high
上阙值,大于该值进度条变黄色


你可能感兴趣的:(html5,标签,常用)