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

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

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

  1. 4个框架标签:<!DOCTYPE>,<html>,<head>,<body>

     <!DOCTYPE>
    <html>
    <head>
    <title>标题</title>
    </head>
    <body>
    内容。。。
    </body>
    </html>

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

  2. 4个只能(但并不必须)或必须在<head></head>标签之内出现的标签:<title>,<meta>,<base>,<link>
     <head>
    <title>标题</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    4 <base href="#" />
    <link rel="stylesheet" type="text/css" href="#" />
    </head>
  3. 22个与文本有关的标签:<abbr>,<b>,<bdo>,<blockquote>,<cite>,<code>,<dfn>,<del>,<em>,<h1>-<h6>,<i>,<ins>,<p>,<pre>,<q>,<small>,<smap><sub>,<sup>,<span>,<strong>,<var>,这么多标签与文本有关也传递出一个信息,那就是文本内容才是网页中最重要的部分。
  4. 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>
  5. 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. 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>
  7. 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>
  8. 5个引入标签:<style>,<script>,<noscript>,<object><param>。<style>--为html文档引入样式表,<script>和<noscript>为html文档引入脚本,<object>和<param>定义引入多媒体对象并为其设置参数。
  9. 2个容器标签:<div>,<iframe>。前者将整个页面所要显示的内容分割成多个“区块”,以便css样式表对各部分进行样式设定。后者可以在屏幕上显示多个页面,最常见的应用是在邮箱页面和后台管理页面,好处是在改变屏幕上一个区块内容时,其他部分不改变。

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

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

新手前端笔记之--初识html标签的更多相关文章

  1. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  2. 新手前端笔记之--css盒子

    css盒子就是它的盒模型,所有css的布局都是以此作为基础的,很有必要来详细记录一下. 1.盒子的尺寸就是margin+padding+border+content的总和,这很好理解,但令人迷惑的可能 ...

  3. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  4. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  5. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  6. 前端笔记知识点整合之JavaScript(三)关于条件判断语句、循环语句那点事

      一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...

  7. 前端笔记-html

    前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...

  8. 前端07 /jQuery初识

    前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...

  9. 写给后端的前端笔记:浮动(float)布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

随机推荐

  1. Memcache启动&amp;存储原理&amp;集群

    一. windows下安装启动 首先将memcache的bin文件夹增加到Path环境变量中.方便后面使用命令: 然后运行 memcached –dinstall 命令安装memcache的服务: 然 ...

  2. js 判断浏览器是否滚动到底部

    //jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...

  3. 库:IO读写操作

    在Java文件读取路径要注意的地方: 计算机:"D:\" 程序:"D://" 内存与硬盘之间进行文件的相互传输过程 以应用程序为参考点,应用程序从硬盘中读取数据 ...

  4. 如何解决winxp访问win10共享打印机提示凭据不足

    Winxp访问win10共享的打印机,提示凭据不足时,如何解决,本篇经验将和大家分享下解决的办法,希望对大家的工作有所帮助! 方法/步骤     在win10的电脑上对着始按钮点鼠标右键,点击运行,或 ...

  5. js编码方式详解

    escape.encodeURI 和encodeURIComponent 的区别 escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码 ...

  6. CSUOJ 1542 Flipping Parentheses

    ACM International Collegiate Programming Contest Asia Regional Contest, Tokyo, 2014–10–19 Problem G ...

  7. 最近学习了一下DeepLearning,发现时NB。

    持续关注,有空放个算法到线上的推荐上.

  8. [Python] Python list slice syntax fun

    # Python's list slice syntax can be used without indices # for a few fun and useful things: # You ca ...

  9. jquery14 on() trigger() : 事件操作的相关方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  10. android framework 02

    Android底层开发1.安装Ubuntu系统2.Ubuntu配置开发环境: sudo apt-get install git-core gnupg flex bison gperf zip sudo ...