新手前端笔记之--初识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)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
随机推荐
- Shell脚本中替换字符串等操作
在做shell批处理程序时候,常常会涉及到字符串相关操作. 有非常多命令语句.如:awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号.能够达到类似效果,大家知道,使用内部操作符 ...
- LeetCode -- 最大连续乘积子序列
问题描写叙述: 给定数组,找出连续乘积最大值的子序列.比如 0,-1,-3.-2.则最大连续乘积为6= (-3) * (-2) 实现思路此题与最大连续和的子序列问题相似,也可通过找到递推公式然后用DP ...
- 文件的默认权限:umask
1. 文件的默认权限 linux下当我们新建一个文件和文件夹时,该文件和文件夹的默认权限是什么? 通过umask命令来查看: $ umask 0002 $ umask -S u=rwx,g=rwx,o ...
- UMeditor百度富文本编辑器的使用
批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js 然后搜索 img.set 替换下就好了 var url=list[i].url ; ...
- jquery tmpl插件
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- Gym - 100625E Encoded Coordinates 矩阵快速幂
题意: 一直TLE我也是醉了,,不爽! #include <iostream> #include <cstdio> #include <fstream> #incl ...
- HDU 4359 Easy Tree DP? 组合数学+动归
题意:定义一种树,每个节点的权值都是20到2n-1,每个权值出现一次,每个节点的左子树的权值和小于右子树,除非只有一个子树.给你n和d,问有n个节点且恰好深度是d的这种树有多少种. 比赛的时候我没有做 ...
- Cisco交换机IOS配置介绍
一.模式• 用户模式(>):• 特权模式(#):• 全局配置模式(config#):• 接口配置模式(config-if#):• 线路模式(#config-line): 二.基本IOS命令结构• ...
- Felx之HTTPService
获取并显示数据 为了向我们的程序提供数据,Adobe Flex包含特别为与HTTP服务器,网络服务或者是远程对象服务(Java对象)进行交互的而设计的组件.这些组件被称之为远程过程调用(RPC)服务组 ...
- vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:8086 && vue init webpack-simple xxx
vue init webpack-simple mywork报错如下: vue-cli · Failed to download repo vuejs-templates/webpack-simple ...