HTML@1文档结构&标签属性 - Jiacheng Pan's Blog

举例：如何写一个 HTML 的表单？

以下是我以前写过的一个表单的 DEMO，这就是一个简单的网站的基本构架，可以先看一下，接下去我会详细讲解……

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  </head>
  <body>
  	<form action="#" method="post">
  	<table>
  	  <tr>
	  	<td>头像&nbsp;&nbsp;</td>
	  	<td><input type="file" name="headfile"></td>
	  </tr>
	  <tr>
	  	<td>昵称&nbsp;&nbsp;</td>
	  	<td><input type="text" name="name"></td>
	  </tr>
	  <tr>
	    <td>学历&nbsp;&nbsp;</td>
	    <td>
		  <select name="diploma" id="diploma">
		    <option value="0">大专</option>
		    <option value="1">本科</option>
		  </select>
	    </td>
	  </tr>
	  <tr>
	  	<td>性别&nbsp;&nbsp;</td>
	  	<td>
	  	  <input type="radio" name="sex" value="0" checked>
	  	  <label>男&nbsp;&nbsp;</label>
	  	  <input type="radio" name="sex" value="1">
	  	  <label>女</label>
	  	</td>
	  </tr>
	  <tr>
	  	<td>爱好&nbsp;&nbsp;</td>
	  	<td>
	  	  <input type="checkbox" name="hobby" value="0" checked><label>电影</label>
	  	  <input type="checkbox" name="hobby" value="1"><label>摄影</label>
	  	  <input type="checkbox" name="hobby" value="2"><label>音乐</label>
	  	  <input type="checkbox" name="hobby" value="3" checked><label>阅读</label>
	  	</td>
	  </tr>
	  <tr>
	  	<td valign="top">签名&nbsp;&nbsp;</td>
	  	<td><textarea name="sign" rows="4" cols="30"></textarea></td>
	  </tr>
	  <tr>
	  	<td></td>
	  	<td><button type="submit">保存</button></td>
	  </tr>
  	</table>
  	</form>
  </body>
 </html>

效果：

HTML 文档结构

`<!DOCTYPE html>`结构声明

这一行是用来声明文档结构的，也就是说，这一行是用来表明，浏览器应该用哪个版本的 HTML 来解析文档，现在 HTML5 推出之后，基本上都声明称<!DOCTYPE html>用来支持 HTML5 即可。

`head`文档头部

页面标题 `title`

声明一个<title>标签，可以为一个 HTML 文档提供标题，这个标题显示在页面标签上，也是搜索引擎搜索结果中看到的标题。以上面的 DEMO 为例，DEMO 中我未声明<title>标签，所以默认的标签栏标题就是文件名：

在文档头部加入<title>DEMO 3</title>标签后

<head>
	<meta charset="UTF-8">
	<title>DEMO 3</title>
</head>

元标签 `meta`

<meta>标签是用来提供有关页面的元信息（meta-information）的标签，没有结束标签（</meta>），详细的<meta>标签的用法可见HTML meta 标签，我在此只叙述三种最常用的用途：

字符编码：<meta charset="utf-8"> 用来定义文档的字符编码，必须要写在第一行，如果不写这一栏，可能无法支持中文等语言……
搜索引擎：<meta name="keywords" content="">和<meta name="discription" content="">，这两者都是提供给搜索引擎的，很明显，content=""的双引号中填写内容，keywords 这个标签是用来说明该页面的关键词的，而 discription 则是用来描述该页面的主要内容的
移动端：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">这个就比较复杂了，讲的详细点可以写一篇博文了，这里就简单介绍：
- 这个主要用来控制移动端窗口的大小，对移动端浏览器才有效果，通过这个标签可以设置移动端浏览器的视窗的宽高
- width：这个控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度。
- height：和 width 相对应
- initial-scale：字面意思，就是初始缩放大小
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放
- 详细内容：快捷提示：别忘记 Viewport Meta 标签
- 详细内容：在移动浏览器中使用 viewport 元标签控制布局

链接标签 `link`

<link>标签主要用来引入外部资源，最常用的用途就是引入外部 css 样式表和定义页面标签的 ICON 图标。

详细内容见【HTML link 标签 W3School】

定义 ICON 图标：<link rel="shortcut icon" href="favicon.ico"> 属性rel="shortcut icon"用来指示这段代码是用来引入 ICON 图标，而 href 则用来写 icon 图标的位置。
引入外部 CSS 样式：<link rel="stylesheet" href="../css/style.css"> 属性rel="stylesheet"用来指示这段代码是用来引入 CSS 样式资源的，而同样的，href 则是写这个 CSS 文件的地址是”../css/style.css”

样式标签 `style`

<style>标签之间，可以用来写 CSS 样式代码，比如这样

<style type="text/css">
    h1 {
        color: red;
    }
    p {
        color: blue;
    }
</style>

标签属性

什么是标签属性呢，可以这么理解，一个标签是一个人，那么 id 属性就是这个人的身份证号，class 属性就可以理解成一个人的民族，style 属性就是一个人长什么样等等等等类似，接下来就来详细了解几个常用的标签属性。具体可以看【HTML 属性】。

`id`属性

<div id="..."></div>
上面提到，id 属性事实上就是一个标签的身份证号，在一个页面下，这个 id 属性的内容一定要保证在这个页面中是唯一的（虽然发生重复也不会报错），但是如果你用 JS 脚本来找到这个元素的时候就会出错，只能找到第一个。
id 属性是一个标签的标志，所以可以通过 ID 属性来找到唯一的一个标签。

`class`属性

<div class="..."></div>
class 属性，则是一个标签的类名。拥有同一个类名的标签不用唯一，可以有很多个，也可以通过 class 属性来获得这些带有同一属性的标签。
※id 和 class 的区别：拥有同一个 id 属性的标签在同一个页面下只能有一个（虽然有多个也不会报错），但是拥有同一个 class 属性的标签可以出现多个。

`style`属性

<div style="..."></div>
style 属性，是一个标签的外表。可以直接在 style 属性中写样式，但是后面我们会提到，在这里面写的样式具有较高的优先级。不推荐在这里写样式，因为会增加标签长度。

title 属性

<div title="..."></div>
title 属性规定了元素的额外的一些信息，当鼠标移动到元素上方就会显示这些信息。

推荐相关教程

举例：如何写一个 HTML 的表单？

HTML 文档结构

<!DOCTYPE html>结构声明

head文档头部

页面标题 title

元标签 meta

链接标签 link

样式标签 style