1.3.2标签

2016-02-27 本文已影响0人每日活菌

1.3.2.1语法

<!--登陆窗口-->
<div class="m-win" >
    <form class="m-login" action="#">
        <fieldset>
            <legend>网易通行证登陆</legend>
            <input type="text" value="帐号">
            <button type="submit" class="u-btn">登陆</button>
        </fieldset>
    </form>
</div>

1 <>闭合： <form>有</form>与之对应，自闭合的，如<input>
2 标签可以带一个或多个属性
3 嵌套，闭合时应注意嵌套顺序，先闭合后闭合
4 注释注释内容用户不可见

书写规范

1 书写用小写
2 属性值用双引号
3 标签有嵌套应进行统一的缩进，代码清晰维护方便

常用属性

id只能出现一个
<div id="nav"></div>
class可以多个出现
<span class="time"></span>
style
title额外信息<a title="收藏"></a>

1.3.2.2章节标签

文档章节

body
header 章节或页面的头部
nav 导航性质
aside 和主要内容不相关的内容
article 可嵌套，主要内容
section 文档中的区域或一节，相邻相关
footer 章节或页面的尾部
hx

标题(h1-h6)

重要性的差别，重要性递减

1.3.2.3文本标签

文本

超链接

-a
<a></a>

创建指向另一个文档的连接

<a href="http://tech.163.com/"> 科技<a/>
<a href="http://ent.163.com/movie/" target="_self">电影 </a>
<a href="http://money.163.com/" target="_blank">财经</a>

还有一种情况：target="inner"
默认情况下，在当前窗口打开

创建一个文档内部的锚点

<a href="#pay">下单支付</a>
<div id="pay">下单支付…</div>

连接到email地址

<a href="mailto:yixinplus@188.com">联系我们</a>
<a href="tel:13612345678">13612345678</a>
<a href="mailto:yixinplus@188.com?cc=admina@188.com&subject=建议 &body=body">联系我们（抄送)</a>

邮箱地址可为多个

强调

-em,strong
strong是比em更强的强调，em是斜体，strong是粗体。

<p class="w-price">
    <strong>39元</strong>
    <span>市场价45元</span>
</p>

行内容器

-span
不一样的样式，给标签一特定的样式

换行

-br

<div>
     一行文字 <br>我想另起一行
 </div>

引用

-cite
-q

<div>
   鲁迅在<cite>故乡</cite>中写道<q>地上本没有路，走的人多了，便有了路</q>
</div>

代码

-code

<div>
<code>
   function say(){alert("hello world");}
</code>
</div>

格式化

-b 粗体
-i 斜体

<div>
HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种<b>标记</b>语言。
</div>

其中标记为关键字加粗

<div>
该项目采用<i>html</i>,<i>css</i>等实现。
</div>

html css 标记为斜体

1.3.2.4组标签

分区

div
div本身无语意，用来分区。div为其他标签的容器

段落

p
p标签表段落

列表

ul ,ol,dl
分为三种，无序列表，有序列表，自定义列表。

无序列表

<ul>
      <li>列表一</li>
      <li>列表二</li>
      <li>列表三</li>
</ul>

有序列表

<ol>
    <li>排行一</li>
    <li>排行二</li>
    <li>排行三</li>
</ol>

有序列表可以实现a,b,c, 排序

<ol type="a" start="2">

表示从b开始。

自定义列表

<dl>
    <dt>作者</dt>
    <dd>Cbuck Musiano</dd>
    <dd>Bll Kennedy</dd>
    <dt>出版年</dt>
    <dd>2007-4</dd>
</dl>

如问题回答列表，元素，书的信息。dt只能有一个，dd可以有多个。呈现如下：
作者
Cbuck Musiano
Bll Kennedy
出版年
2007-4
列表可以嵌套

其它标签

pre
经过格式化的内容保存在pre标签下，可保存换行符和空格
blockquote
表示大段的引用

1.3.2.5 资源标签

img
iframe
object
embed
video
audio

img

如音乐专辑封面

<div>
    <div class="img">
        ![封面](http://p4.music.126.afdf.jpg?parm=200y200)
    </div>

src后为图片地址，若不能显示则为alt后的封面图片

iframe

嵌入页面，如网站广告

<iframe src="http://www.163.com></iframe>

在src属性中嵌入第三方地址，嵌入页面中的操作并不影响但前页面操作。

object,embed

嵌入外部资源，插件

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://pdfReader.swf">
    <param name="flashvars" value="http://book.pdf">
</object>

type属性中写插件的类型，上例为flash插件
插件的参数放在param参数中,地址可以放在move参数中，也可放在data属性中但ie8并不兼容data属性，如下

<object data="http://pdfReader.swf" type="application/x-shockwave-flash">
    <param name="flashvars" value="http://book.pdf">
</object>

用embed嵌入,type属性写插件的类型，src属性写地址

<embed type="application/x-shockwave-flash" scr="http://pdfReader.swf"  with="640" height="480"

video

视频

<video controls="controls" poster="/img/poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="move.webm" type="video/webm>
    <source src="move.ogg" type="video/ogg">
    <track kind="subtitles" src="video.srt" label="English">
    您的浏览不支持video标签。
</video>

因为不同浏览器对视频的格式支持度不同所以需要准备多个视频格式
在source标签中在src属性下写上视频的地址，type写视频的类型，浏览器会选择他支持的视频类型进行播放
如果视频文件只有一个，可以把视频文件放在video标签的src属性下，因为video标签只有高版本的浏览器才支持，为了提高用户体验，可以在下面写上提示文字，这样不支持video标签的用户就会显示这里的文字
用controls属性可以控制播放器控制条的显示，poster属性视频的封面，track属性是视频的字幕。
如果需要视频一进来就是播放的需要加autoplay属性，需要循环播放需要加loop属性，如下：

<video autoplay loop controls poster="/img/poster.jpg">

audio

audio标签与video标签类似，这里不详细介绍

嵌入资源

图

-canvas
-svg

canvas基于像素，他提供了一些绘制函数，通过脚本来绘制图形图像，对于性能比较高的场景复杂的，如实时数据的展示，游戏可以使用它
sag是矢量的他提供了一系列图形，对于高保真的静态的图形图像可以使用它。

热点区域

-map
-area

![封面](http://p4.music.126.afdf.jpg?parm=200y200)
<map name="Map2" data-ganame="422预热主页－头牌大咖区" data-gapoint="点击大咖区－运动style">
    <area shape="rect" coords="669,75,1075,682" href="xiupin.com/…" target="_blank">
    <area shape="rect" coords="26,93,391,337" href="xiupin.com/…" target="_blank">
    …
</Map>

可以通过map的name属性和img的use map属性使得map和img相关联
里面的热点通过area这个标签实现，通过shape属性定义形状，通过coords定义关键的点位置，如上例为矩形，那么可定义左上角和右下角。

1.3.2.6表格标签

<table>
    <caption>照片冲印价格详情</caption>
    <thead>
        <tr><th>照片尺寸</th><th>富士</th><th>柯达</th></tr>
    </thead>
    <tbody>
        <tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>
        …
    </tbody>
    <tfoot>
        <tr><td colspan="3">运费8元／单，满99元免运费</td></tr>
    </tfoot>
</table>

表格的标题放在caption标签下，表格的头部放在thaead标签下，表格的尾部放在tfoot标签下。
表格的每一行用tr标签表示，单元格有两种表示方式th和td,其中th为表头或者第一列的表示，td为普通单元格表示方法。
表格的列可以跨，用colspan，上例中“colspan=3“表示跨了3列
同样可以跨行，用rowspan表示

大体效果如下，作后一行合并单元格，不知用markdown怎么写？

相片尺寸	富士	柯达
6寸	0.45	0.6
全景六寸	0.45	0.6
7寸	0.89	1
8寸	1.69	2
10寸	3.89	5
运费8元／单，满99元免运费

1.3.2.7表单标签

表单

<form action="/login" method="post">
    <fieldset>
        <legend>照片选择</legend>
        <label for="file">选择照片</label>
        …
    </fieldset>
    <fieldset>
        <legend>综合设置</legend>
        <div>选择尺寸：</div>
        …
    </fieldset>
    …
</form>

action属性为表单的后台地址，需要把表单的数据提交到哪一个后台的接口就写道action里
method属性为表单提交的方式，常用的为post方式
若表单的内容很多要对表单进行分区，常用的为fieldset标签，分区的标题用legend标签表示

<form action="/login" method="post">
    …
    <input type="file" name="file">
    …
    <input type="checkbox" name="size" value="5"><label for="cb_0">5寸</label>
    …
    <input type="radio" name="material" value="fushi"><label for="rd_0">富士</label>
    … 
    <input type="text" name="description">
    …
</form>

input标签有以下属性，name名称，值用value属性表示
input标签有不同的类型，如文件上传type="file",尺寸选择多选框type="checkbox", 单选框type="radio",单行文本框type="text"
同一类型的多选框name值相同。
默认选中需要加checked属性，若如让用户操作需要用disable属性。如下所示

<div>
    <input type="checkbox" name="size" value="5" checked><label for="cb_0">5寸</label>
</div>

按钮也可用input标签表示，在type属性中提交用submit表示，重置用reset表示,如下

<div>
    <input type="submit">
    <input type="reset">
</div>

为了更好的语意化用button标签表示，如下

<div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</div>

下拉选择框

<div>
    <label for="delivery">配送方式:</label>
    <select id="delivery">
        <option value="0">快递</option>
        <option value="1">EMS</option>
        <option value="2" selected>平邮</option>
    </select>
</div>

下拉选框用标签表select标签表示，里面的每一项用option标签表示
label标签表示了每一个select或input提示的信息，通过for属性与标签中的id属性对应，这两个值要一致，表示此label的内容表示了如下标签。
默认选择项为第一项，若要将其它项设为默认项需加selected属性，如上例中将“平邮”设为默认值。
可将下拉选项分组,用optgroup标签进行分组，将“快递”与“EMS”分到group1组里，如下所示

<div>
    <label for="delivery">配送方式:</label>
    <select id="delivery">
    <optgroup label="group1">
        <option value="0">快递</option>
        <option value="1">EMS</option>
    </optgroup>
        <option value="2" selected>平邮</option>
    </select>
</div>

单行文本框

<div>
    <label for="description">商品描述：</label>
    <input class="text" id="description" placeholder="请填写描述" value="good" readonly>
</div>

单行文本框可添加placeholder属性，为提示内容，在高级的浏览器中可有体现
若有默认值可写在value属性中
若文本框不能输入内容只是让用户观看，可添加readonly属性,之后用户不可修改
若想要变为隐藏的，可添加hidden属性，之后用户看不到内容，但数据也可传到后台

多行文本框

<div>
    <label for="feedback">意见反馈：</label>
    <textarea name="feedback" rows="4" id="feedback"></textarea>
</div>

多行文本框用textarea标签表示

input type
-email
-url
-number
-tel
-search
-range
-color
-date picker

1.3.2.8语义化

什么是语义化？

在一个网页上，每个标签的用途，用正确的标签来表示正确的页面
图片用img标签，段落用p标签，节目列表用户列表用ul标签表示，歌曲列表用table标签表示，评论功能用form标签表示。

语义化的作用

有利于SEO（search engine optimization）
搜索引擎EO化，页面是给搜索引擎看的，搜索引擎可根据语义化的标签来去定标签的权重，这样页面和用户的关键字可以更加匹配。搜索引擎可以对语义化的标签给更高的权重，这样可以使页面更早的出现在用户的搜索结果中。
提高可访问性
页面可能是给盲人看的，他们通过屏幕阅读器来访问页面，屏幕阅读器对不同的标签可以发出不同的声音，使用更语义化的标签可以传达不同信息的重要性，使他们跟好的理解页面的内容。
提高代码的可读性
页面也是给开发人员看的，语义化可以提高代码可读性，更好的用于修改维护，提高多人的开发效率

屏幕快照 2016-02-29 下午5.26.03.png

页面头部代码

屏幕快照 2016-02-29 下午5.55.42.png

<div class="native">
    <div class="wrap">
        <hl><a href="#">网易云音乐</a></h1>
        <u1 class="nav">
            <li class="z-act"><a href="#">发现音乐<i></i></a></li>
            <li><a href="#">我的音乐<i></i><a/></li>
            <li><a href="#">朋友<i></i></a></li>
            <li><a href="#">客户端下载<i></i></a></li>
        </ul>
        <div class="user"><a id="login" href="#">登陆</a></div>
    </div>
</div>
<div class="m-subnav">
    <ul>
        <li><a href="#">推荐</a></li>
        <li><a href="#">歌单</a></li>
        <li><a href="#">大牌DJ</a></li>
        <li><a href="#">歌手</a></li>
        <li><a href="#">新碟上架</a></li>
    </ul>
</div>

页面标题用h1标签来表示，导航用ul标签来表示，同样下面次要导航也用ul标签来表示，导航里的每一项因为使连接，所以用a标签来表示

歌单详情

屏幕快照 2016-02-29 下午6.02.22.png

<!--详情-->
<div class="m-info">
    <div class="img">![封面](http://p4.music.126.afdf.jpg?parm=200y200)</div>
    <div class="wrap">
        <div class="content">
            <h2><span class="u-tag"><span><cm>巴西</cm></h2>
            <div class="info">
                <div class="author">
                    <a href="#" class="u-img u-img-3">![](http://p3.music.126.net/-_2…)</a>
                    <span class="time">2013-06-08 创建</span>
                    <span class="times">播放：<em>204</em>次</span>
                </div>
                <div class="btns">
                …
                </div>
                <div class="intr">
                    <h3>有待咖啡馆<i>Vol.18</i></h3>
                    <p>介绍：影片“Brazil”从小说《1984》当中获得灵感，使用…</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--／详情-->

图片用img标签表示，标题用h2标签表示，用户头像用img标签表示，灰色文字无具体语义灰色样式用span标签表示，播放次数的强调用em标签表示,下面的标题用h3标签表示，描述内容用p标签表示。

列表

屏幕快照 2016-02-29 下午6.04.51.png

<div class="g-sd">
    <!--节目列表-->
    <div class="u-title2"><h2>相关节目</h2><a class="more">更多></a></div>
    <ul class="list">
        <li>
            <a href="#" class="u-img">
                ![](http://p3.music.jpga)
            </a>
            <div class="wrap">
                <div class="content">
                    <h3><a href="#">萧瑟冬季跟着歌曲去旅行</a></h3>
                </div>
            </div>
        </li>
            …
       </ul>
    </div>
    <!--/节目列表-->
    <!--/用户列表-->
    <div class="m-userlist">
        <div class="u-title2"><h2>他们也收藏了这个DJ节目</h2></div>
        <div class="list">
            <ul id="ulFavouratelist">
                <li>
                    <a href="#" class="u-img u-img-2">
                        ![joe](http://p4.music.jpg)
                    </a>
                </li>
                …
            </ul>
        </div>
    </div>
    <!--／用户列表>
</div>

标题用h2标签表示，列表用ul标签表示，节目的封面用img标签表示，节目的标题用h3标签表示，间接用p标签表示，节目标题用h2标签表示，节目列表用ul标签表示，里面每个用户头像用img标签表示

歌曲列表

屏幕快照 2016-02-29 下午6.05.15.png

<!--/歌曲列表-->
<div class="m-songlist">
    <div class="u-title"><h2>包含歌曲列表</h2><span class="info">6首歌</span></div>
    <table>
        <colgroup><col class="coll"/><col class="col2"/><col class="col3"/><col class="col4"/><col/></colgroup>
        <thead>
            <tr><th></th><th>歌曲标题</th><th>时长</th><th>歌手</th><th>专辑</th></tr>
        </thead>
        </tbody>
            <tr class="odd">
                <th><span class="order">1</span><span class="u-icon u-icon-play"></span></th>
                <td><h3 class="text"><a href="#">北京之雪</a></h3></td>
                <td>04:19</td>
                <td><div class="text"><a href="#">田震</a></div></td>
                <td><div class="text"><a href="#">电量2005</a></h3></td>
            </tr>
            …
        </tbody>
    </tbale>
</div>
<!--/歌曲列表-->

歌曲列表标题用h2标签表示，表格数据用table标签表示，表格的头部放在thead标签中，表格的主要能容放在tbody标签中，里面的每一行用tr标签表示

评论部分

屏幕快照 2016-02-29 下午6.05.35.png

<!--评论-->
<div class="m-comment">
    <div class ="u-title"><h2>评论</h2><span class="info">共<span id="spanCommentCount"></span>条评论</span></div>   
    <div class="form">
         <a href="#" class="u-img>![](http://p3.music.126.com.816056.jpg)</a>
         <div class="wrap">
            <form class="content">
                <div class="u-input"><textarea id="textComment" class="z-placeholder">评论</textarea></div>
                <div class="bar">
                    <span class="remain"><span id="txtRemain">140</span>/140</span>
                    <botton type="button" id="btnComment" class="u-btn2 u-btn-sm">评论</button>
                </div>
            </form>
        </div>
    </div>
    <ul class="list" id="ulCommentlist">
        <li>
            <a href="#" class="u-img"><ing src="http://p3.music.126.4286083.jpg" alt=""></a>
            <div class="wrap">
                <div class="content">
                    <p><a href="#">菜单</a>很适合睡觉的时候试试看哈很适合很适合睡觉的时候试试看哈</p>
                    <span class="time">2012-05-29</span>
                </div>
            </div>
        </li>
        …
    </ul>
</div>
<!--/评论-->

标题用h2来表示，评论的功能用form标签表示，里面的评论框用textarea标签表示评论按钮用button标签表示，下面的评论列表用ul标签表示，里面的每一项用li标签表示，每一项里的图片用img标签表示，因为头像可以点击所以嵌在a标签里面，评论的内容用p标签表示，评论时间没有具体语义用span标签表示

页面尾部

屏幕快照 2016-03-01 下午8.04.02.png

<div class="m-foot">
    <div class="wrap">
        <a href="#" class="join">
            <h3>独立音乐人招募计划</h3>
            <p>加入我们 即将与超过亿万乐迷互动</p>
        </a>
        <div class="links">
            <a href="#">关于网易</a>-<a href="#">客户服务</a>-<a href="#">服务条款</a>-<a href="#">网站导航</a>
        </div>
        <span class="copyright">网易公司版权所有©1997-2014  粤B2-20090191-18</span>
        <a href="#" class="feedback">意见反馈</a>
    </div>
</div>

标题用h3标签表示，描述文字用p标签表示相关文档连接用a标签表示，由于里面的内容并无语义，但有一个灰色的样式，所以用span标签表示