新手前端笔记之--初识html标签

时间:2014-02-18 23:50:57  来源:cnblog  作者:a发愣的树熊

  接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧。关于标签,谈论最多的就是简洁和语义化。简洁指html标签仅仅负责把页面中的内容进行正确标示即可,而对内容的表现形式则统统交由css负责。语义化本不应成为问题,因为就像人与人之间的交流需要有意义的语言一样,html文档作为人与浏览器交流的语言自然是有意义的,但这并不能使所有人都遵循(类似于有了普通话,但各地方言依然流行,因为有时都可以达到一样的目的,所以人们总是按其最习惯的方式来进行)。简洁的问题到css是在进行总结,现在先谈谈语义化的问题。

  w3school中共有117个标签,其中html5有16个不支持,29个新标签,以及从以前延续下来的72个标签。

  今天先大致分类(按照我对其语义的理解)一下这72个“旧”标签吧,在此基础上以后分步进行语义辨析:

4个框架标签:<!DOCTYPE>,<html>,<head>,<body>
<!DOCTYPE>
<html>
       <head>
           <title>标题</title>
       </head>
       <body>
              内容。。。
       </body>
</html>

这里面的<title>标签是必须出现在<head>标签内的,但并不属于我所说的第一部分。


4个只能(但并不必须)或必须在<head></head>标签之内出现的标签:<title>,<meta>,<base>,<link>

<head>
       <title>标题</title>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <base href="#" />
       <link rel="stylesheet" type="text/css" href="#" />
</head>


22个与文本有关的标签:<abbr>,<b>,<bdo>,<blockquote>,<cite>,<code>,<dfn>,<del>,<em>,<h1>-<h6>,<i>,<ins>,<p>,<pre>,<q>,<small>,<smap><sub>,<sup>,<span>,<strong>,<var>,这么多标签与文本有关也传递出一个信息,那就是文本内容才是网页中最重要的部分。


10个与表格有关的标签:<caption>,<col>,<colgroup>,<table>,<th>,<tr>,<td>,<thead>,<tbody>,<tfoot>。

<table>
  <caption>每月的存款</caption>
  <colgroup span="3">
  <col span="1" style="background-color:red">
  <col span="3" style="background-color:blue">
  <tr>
    <th>月份</th>
    <th>一月</th>
    <th>二月</th>
    <th>三月</th>
  </tr>
  <tr>
    <td>存款</td>
    <td>1000元</td>
    <td>1000元</td>
    <td>1000元</td>
  </tr>
</table>
<table>
  <thead>
    <tr>
      <td>THEAD 中的文本</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>TFOOT 中的文本</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>TBODY 中的文本</td> 
    </tr>
  </tbody>
</table>


10个与表单有关的标签:<fieldset>,<legend>,<form>,<input>,<label>,<select>,<option>,<optgroup>,<menu>,<textarea>。

<form action="DoFormAction.htm">
        <fieldset style="width=800px">                                                              <!--套住注册表格的边框-->
        <legend>请输入如下的信息然后进行注册</legend>
        <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">
            <tr>
                <td align="right">用户名:</td>                                   <!--文本框-->
                <td><input type="text" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">密码:</td>                                     <!--密码框-->
                <td><input type="password" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">确认密码:</td>
                <td><input type="password" size="20" style="width:150px" /></td>
            </tr>
            <tr>
                <td align="right">性别:</td>                                      <!--单选框-->
                <td>
                    <input type="radio" checked="checked" name="sex1" value="男" />男&nbsp;
                    <input type="radio" name="sex1" value="女" />女
                </td>
            </tr>
            <tr>
                <td align="right">性别(可以点文字选择):</td>
                <td>
                    <fieldset style="width:150px">                              <!--表单外框,也可以通过css设置宽度-->
                    <legend>请选择性别</legend>
                        <input type="radio" checked="checked" name="sex2" value="男" id="man" />
                        <label for="man">男</label>
                        <input type="radio" name="sex2" value="女" id="woman" />
                        <label for="woman">女</label>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td align="right">城市:</td>                                    <!--下拉框-->
                <td>
                    <select name="city">
                        <option value="北京">北京</option>
                        <option value="深圳">深圳</option>
                        <option value="上海">上海</option>
                        <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">城市所在区域:</td>
                <td>
                    <select name="area">        
                        <optgroup label="北京">                                <!--下拉框分组显示-->
                            <option value="朝阳区">朝阳区</option>
                            <option value="海淀区">海淀区</option>
                            <option value="其他区">其他区</option>
                        </optgroup>
                        <optgroup label="南昌">
                            <option value="东湖区">东湖区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="青山湖区">青山湖区</option>                           
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">交友目标:</td>
                <td>
                    <select name="target" size="3" multiple="multiple">        <!--列表框-->    
                        <option value="同行" selected="selected">同行</option>
                        <option value="普通朋友">普通朋友</option>
                        <option value="爱人">爱人</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">爱好:</td>
                <td>
                                                                            <!--复选框,注意name属性设置一样,分组--> 
                    <input type="checkbox" name="love" value="足球" />足球
                    <input type="checkbox" name="love" value="蓝球" />蓝球
                    <input type="checkbox" name="love" value="乒乓球" />乒乓球
                </td>
            </tr>
            <tr>
                <td align="right">照片上传:</td>
                <td>
                                                                            <!--文件选择框--> 
                    <input type="file" name="myPic" />
                </td>
            </tr>
            <tr>
                <td align="right">自我介绍:</td>
                <td>
                                                                            <!--多行文本框--> 
                    <textarea rows="5" cols="50">
                    </textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit" value="确定" />
                    <input type="reset" value="清空" />                   
                    <input type="image" src="../images/btnreg.png" onclick="alert('hello')" />      <!--演示图片按钮(会提交数据,类似submit)
                                                                                                    -->
                </td>
            </tr>
        </table>
        </fieldset>
    </form>

这个表单是由表格来布局的,是很早之前流行的方式,现在已经很少使用。就我所看到的而言,都是用定义列表(<dl><dt><dd>)和div标签来布局的,上述代码是从网上找来的,标签应用很全,所以就在此使用。


6个与列表有关的标签:<ol>,<ul>,<li>,<dl>,<dt>,<dd>。

<!--有序列表-->
<ol>
   <li>春</li>
   <li>夏</li>
   <li>秋</li>
   <li>冬</li>
</ol>
<!--无序列表-->
<ul>
   <li>春</li>
   <li>夏</li>
   <li>秋</li>
   <li>冬</li>
</ul>
<!--定义列表-->
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>


3个与图像有关的标签:<img>,<map>,<area>。

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />
  <map id="planetmap">
    <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
    <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
     <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
  </map>


  1. 5个引入标签:<style>,<script>,<noscript>,<object><param>。<style>--为html文档引入样式表,<script>和<noscript>为html文档引入脚本,<object>和<param>定义引入多媒体对象并为其设置参数。

  2. 2个容器标签:<div>,<iframe>。前者将整个页面所要显示的内容分割成多个“区块”,以便css样式表对各部分进行样式设定。后者可以在屏幕上显示多个页面,最常见的应用是在邮箱页面和后台管理页面,好处是在改变屏幕上一个区块内容时,其他部分不改变。

     10.还剩下6个单独标签:<!---->用于注释,<br />用于换行,<hr>分割线,<a>定义超链接,<button>定义按钮,<address>地址标签。

  对“旧”标签的总结就是上面这些了,以后会对一些重要的、常用的标签进行总结。


顶一下
返回首页
回首页
收藏
收藏

参与评论(条)

注: 网友评论仅供表达个人看法,并不表达本站同意其观点或证实其描述

当前栏目分类