新手前端笔记之--初识html标签
接触前端（好大气的名字啊）已经一个多月了，看了很多视频和博客，有了一定的感性认识，但还是需要总结一下以便系统化所学习的知识，就从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">
4 <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="男" />男
<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> - 5个引入标签：<style>,<script>,<noscript>,<object><param>。<style>--为html文档引入样式表，<script>和<noscript>为html文档引入脚本,<object>和<param>定义引入多媒体对象并为其设置参数。
2个容器标签：<div>,<iframe>。前者将整个页面所要显示的内容分割成多个“区块”，以便css样式表对各部分进行样式设定。后者可以在屏幕上显示多个页面，最常见的应用是在邮箱页面和后台管理页面，好处是在改变屏幕上一个区块内容时，其他部分不改变。
10.还剩下6个单独标签：<!---->用于注释，<br />用于换行，<hr>分割线，<a>定义超链接，<button>定义按钮，<address>地址标签。
对“旧”标签的总结就是上面这些了，以后会对一些重要的、常用的标签进行总结。
新手前端笔记之--初识html标签的更多相关文章
- 新手前端笔记之--初识css
css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...
- 新手前端笔记之--css盒子
css盒子就是它的盒模型,所有css的布局都是以此作为基础的,很有必要来详细记录一下. 1.盒子的尺寸就是margin+padding+border+content的总和,这很好理解,但令人迷惑的可能 ...
- 前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
- 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- 前端笔记-html
前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <> ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- 写给后端的前端笔记：浮动（float）布局
写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
随机推荐
- zookeeper_相关命令 以及 API
(区分大小写) 启动ZooKeeper服务 进入主目录下的 /bin 文件夹. zkServer.sh start. 需要每个节点运行启动命令 客户端启动 zkCli ...
- Launcher3实现壁纸居中
Launcher3的wallpaper显示是动态的,与Launcher预置桌面数目有关,让壁纸居中,仅仅能确保第一次开机时壁纸居中,后面用户改动桌面数目后,就无法达到了.怎样要在默认桌面数目配置时居中 ...
- UITextField监控文字变化方法
项目里须要在不隐藏键盘的情况下.来更改button 的状态. 这里就是要对uitextfield监控.uitextfield继承于UIControl.所以能够 使用addTarget方法.详细例如以下 ...
- javascript模拟类的最佳实践
1:怎样模拟一个类 在sencha touch2 系列里面定义一个类和new出这个类的对象 Ext.define( "Animal", { config: { name: null ...
- 服务器性能监控tips
一.tops 第一行 当前时间/已运行时间/登录用户数/最近 5 10 15分钟平均负载(平均进程数 cat /proc/loadavg) 除了前3个数字表示平均进程数量外,后面的1个分数,分母表示系 ...
- Lesson 2 Building your first web page: Part 3
Time to build your first HTML page by hand I could go on with more theory and send half of you to sl ...
- C#解决System.Security.Cryptography.MD5.Create()调用的目标发生了异常)的问题
今天搭建微信扫码支付环境的时候,一样的配置参数,调用连接提示错误 错误:调用的目标发生了异常 然后跟踪到执行 MD5 md5 = System.Security.Cryptography.MD5.Cr ...
- QQ，新浪，SNS等公众平台的登录及api操作
QQ的写法地址:http://www.oschina.net/code/snippet_930167_19888 Sina的写法地址:http://www.oschina.net/code/snipp ...
- JS中的onload与jQuery中的ready差别
jQuery的运行机制(onload与ready的差别) 结论得出前自行測试: 为了測试是否真如所说的那样,所以在页面插入了20000张照片,照片数量少得不出什么结论,所以改用console.log( ...
- C++中的指针、数组指针与指针数组、函数指针与指针函数
C++中的指针.数组指针与指针数组.函数指针与指针函数 本文从刚開始学习的人的角度,深入浅出地具体解释什么是指针.怎样使用指针.怎样定义指针.怎样定义数组指针和函数指针.并给出相应的实例演示.接着,差 ...