1.概述
html是一种超文本标记语言(HyperText Markup Language)，由W3C组织制定统一的标准，W3C(万维网联盟)组织早先是由Tim Berners-Lee所创办，是万维网的主要国际标准组织。为了解决web技术中的各种兼容问题，W3C制定了一系列影响深远的的标准并督促网络应用开发者和内容提供者遵循这些标准。
在一个web页面中，html起着一个“骨架”的作用。html的元素(element)是创建一个页面的“基石”，一般来说一个元素的由它的“开始标签”、“结束标签”以及由标签包裹的内容组成，部分元素可以没有结束标签。
更多web技术的详情可以去MDN :Mozilla Developer Network上查阅。MDN是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。里面有大量系统而且权威的专业知识等着你。
html发展到现在已经有大量供开发者使用的标签。
-
一份标准的html文档前应该有文档声明
<!DOCTYPE html> -
统一文档的编码为UTF-8
<meta charset="UTF-8">
常见的html标签
- 文档结构
| 元素 | 功能描述 |
|---|---|
| <html> | html文档的最外层标签 |
| <head> | 定义文档头部信息 |
| <title> | 定义页面总标题，标题会在标题栏或状态栏上出现，该标签应在<head>标签里面 |
| <meta> | 定义文档的元数据，元数据作为页面的辅助性数据而被浏览器解析 |
| <body> | 页面的主体内容，用户能以肉眼直观浏览的部分 |
文档结构
- 段落组织
| 元素 | 功能描述 |
|---|---|
| <h1> | 页面内容的标题，标题文字从<h1>至<h6>由大到小 |
| <p> | 页面的段落 |
| <img> | 能够在页面中展示图像，src属性规定图像载入的链接，alt属性决定图像加载失败后替代的内容 |
| <ul> | 无序列表，即逻辑上没有先后顺序的列表，必须和<li>标签配合使用 |
| <ol> | 有序列表，逻辑上有先后顺序的列表，必须和<li>标签配合使用，列表将会以数字形式排序 |
| <nav> | 标注一个“导航区域”，导航区域内可以提供页内或外部导航链接 |
| <a> | 用于超链接，href属性确定链接地址 |
| <div> | 将文档的一部分标记成“块”，div本身没有意义，开发者使用div将文档分割成一个个“有意义”的区域 |
| <dl> | 实现一个描述性列表，一般用于实现词汇表或显示元数据 ，需要配合<dt>、<dd>一起使用 |
| <dt> | <dl>列表中的“项目” |
| <dd> | <dl>列表中项目的解释 |
- 表格
| 元素 | 功能描述 |
|---|---|
| <table> | 在文档中创建一个表格 ，一个表格里应包含<th>表头、<tr>行、<td>行中单元格 |
| <th> | <table>表格中的“表头”，该标签应在<tr>标签内部 |
| <tr> | <table>表格中的“行” |
| <td> | <table>表格中的“单元格”，该标签应在<tr>标签内部 |
| <thead> | 定义表格表头区域 |
| <tbody> | 定义表格主体区域 |
| <tfoot> | 定义文档脚注内容 |
| <col> | 为表格的某些列设置样式，<col>标签应在<colgroup>标签内使用，标签内span属性确定样式应用的列数 |
- 表单
| 元素 | 功能描述 |
|---|---|
| <form> | 创建一个供用户输入数据的表单，表单内的数据可发送到指定服务器 |
| <input> | 表单中的输入控件，控件的类型取决于它的type属性值 |
| <textarea> | 表单中的多行文本输入空间 |
| <button> | 表单中的按钮 ，在<button>标签中可以定义按钮的提示文本甚至图像 |
| <select> | 表单中的下拉列表，<select>标签内通过 <option> 标签提供列表的可选项 |
| <optgroup> | 下拉列表的组合型选项，类似于<ul>无序列表 |
- 字符修饰
| 元素 | 功能描述 |
|---|---|
| <span> | 将文档的一部分文本独立出来，可以对<span>元素内的内容单独应用样式 |
| <b> | 将文本加粗 |
| <strong> | 强调并将文本加粗 |
| <i> | 将文本变为斜体 |
| <em> | 强调并将文本变为斜体 |
| <code> | 定义计算机代码 |
这里需要思考一个问题：<b>标签和<strong>标签都有加粗的效果，<i>标签和<em>标签都是将文本变为斜体，但具体该使用哪一个标签？它们的区别是否仅仅是强调的效果？
实际上更推荐使用<em>和<strong>标签，不仅仅是因为多个强调的效果。这两个标签的效果是逻辑上的，而不仅仅是加粗后视觉上的强调（物理上的），逻辑上的强调效果有利于搜索引擎对文档的解析。web标准倾向于将文本和样式分开，如果是单纯地改变文本的视觉效果，那更推荐使用CSS来控制。
注意，并不是所有标签都有“开始标签”与“结束标签”，这些标签往往也没有内容，就这类标签叫做空标签，html的空标签有这些：
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
可替换元素&不可替换元素
- 大多数元素是不可替换元素，在html代码中显示的主要内容在被浏览器解释后这些内容直接被用户所看到。
- 可替换元素，浏览器往往还会通过这些元素的一系列属性来确定展示的内容，根据MDN上的解释：
可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有
<img>、<object>、<video>和 表单元素，如<textarea>、<input>。 某些元素只在一些特殊情况下表现为可替换元素，例如<audio>和<canvas>。 通过 CSScontent属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。
网友评论