接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从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. C#日期控件datetimepicker保存空值方法

    方法一(推荐): 设置datetimepicker的属性ShowCheckBox为true 在窗口初始化时候,添加代码this.datetimepicker1.Checked = false; 保存日 ...

  2. 一个美丽的java烟花程序

    <img src="http://img.blog.csdn.net/20150625104525974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  3. vijos - P1176奇怪的数列 (递归 + 找规律)

    P1176奇怪的数列 Accepted 标签:[显示标签] 背景 一天.学军数学小组的成员遇到了一个奇怪的数列,正巧信息小组的你碰到了他们. 于是他们把这个数列展示给你-- 描写叙述 这个数列是这种: ...

  4. mahout处理路透社语料步骤,转换成须要的格式

    首先下载路透社语料(百度就能够下载): 然后上传Linux 并解压到指定文件夹.Tips:此处我放在可 /usr/hadoop/mahout/reutersTest/reuters tar -zxvf ...

  5. CentOS下安装C/C++开发工具包的最佳方式

    如果你使用的是 Fedora, Red Hat, CentOS, 或者 Scientific Linux 系统,使用下面的命令安装GNU的C/C++开发包和编译器. # yum groupinstal ...

  6. 1.windows(64位)下使用curl命令

    转自:https://www.cnblogs.com/xing901022/p/4652624.html Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景 ...

  7. 7.第一次使用java连接mongodb遇到的问题

    转自:https://blog.csdn.net/u010523770/article/details/54585883 新版本的mongodb的驱动包是依赖bson.jar和mongodb_driv ...

  8. RandomStringUtils生成随机数

    org.apache.commons.lang.RandomStringUtils;                                        //产生5位长度的随机字符串,中文环 ...

  9. 分享一段wap框架样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. sql 向上取整 向下取整 四舍五入的实例;

    SELECT CEILING(23.5/4)'向上取整' ---6 :SELECT FLOOR(23.5/4)'向下取整' ---5 :SELECT ROUND(23.5/4,1)'四舍五入' --5 ...