HTML@1文档结构&标签属性

作者 Jackie Anxis 日期 2016-07-19
HTML@1文档结构&标签属性

推荐相关教程

w3school 在线教程:全球最大的中文 Web 技术教程。其中包括W3C的标准技术:HTML、CSS、XML 。以及其他的技术,诸如JavaScript、PHP、SQL等等。

举例:如何写一个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>标签主要用来引入外部资源,最常用的用途就是引入外部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属性规定了元素的额外的一些信息,当鼠标移动到元素上方就会显示这些信息。