声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！
HTML5概述
骨架标签
<!DOCTYPE html>
<html lang="zh-CN"> <!--lang属性给浏览器用，不影响网页本身，可以不写-->
<head>
<meta charset="UTF-8"> <!--UTF-8包含世界所有语言，必写-->
<title>标题</title>
</head>
<body>
………………
</body>
</html>
注意：
- html文档，要以<html>标签开始，并以</html>标签结束。即所有的html标签都要在这两个标签中。即<html>标签是所有其他标签的根标签
- 标签分为标签开始、标签体和标签结束。其中标签体中的排版不会影响页面的最终的显示。<pre>标签除外
- 没有标签体的标签也存在（单标签）
- 在html5中，单标签不需要在末尾追加“/”
- 所有的标签都要有开始，尽可能也要有结束，没有也行
- 页面中显示的内容都是在
<body></body>中书写。注意：在html5中不支持body标签中的任何属性 - HTML5中html标签、body标签和head标签都可以省略。当然并不建议这样做
元素标签分类
- 常规元素（双标签）：<标签名></标签名>
- 空元素（单标签）：<标签名/>
- HTML5中，单标签不需要添加 "/ "（<br />可写作<br>）
HTML标签关系
- 嵌套关系：多个双标签嵌套
- 并列关系：多个标签并列
标签和元素的区别
- 标签是一个HTML的单元，标签可以包含开始和结束两个部分。
- 元素是标签的开始和标签的结束两个部分加上这两个部分之前的文本。这些文本可以是一般的文本也可能其他的标签。
大部分语境中，由于要求不是这么严格，所以标签和元素可以等同。
HTML常用标签
排版标签
-
标题标签
<h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> <h5> 标题文本 </h5> <h6> 标题文本 </h6>从1到6，标题文本独占一行且大小递减
-
段落标签
<pr>文本内容</pr>将文本内容单独分成一个段落
-
水平线标签
<hr> <!--画一条水平线--> -
换行标签
<br> <!--相当于此处敲回车--> -
div和span标签
<div>……</div> <span>……</span>空格符
<!--相当于敲空格-->div和span没有语义，二者都是用来布局的
div标签：一行只能放一个
span标签：一行可以放多个
格式化标签
<b>文字</b>和<strong>文字</strong> <!--粗体-->
<i>文字</i>和<em>文字</em> <!--斜体-->
<s>文字</s>和<del>文字</del> <!--加删除线-->
<u>文字</u>和<ins>文字</ins> <!--加下划线-->
- 以上标签全部推荐使用后者
图像标签
<img src="图像URL" />
img标签属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时替换文字 |
| title | 文本 | 鼠标悬停时显示内容 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
在HTML5更好的在一个元素中插入图片的方法是CSS中的background-image
链接标签（超链接）
<a href="跳转目标" target="目标窗口弹出方式">文本或图像标签</a>
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的URL，可以是外部链接或内部链接，href="#"代表空连接 |
| terget | 指定链接目标的打开方式 |
- target属性，一般的取值是五个
-
_self，在自身打开（安全打开，默认）
-
_blank，在新开的浏览器（新标签）中打开
-
_top，在页面的最顶端打开
-
_parent，在页面的父页面中打开
-
name，在具体的iframe标签中打开
-
常用的超链接
1，页间定位：从一个页面转向另外一个页面
2，锚链接（页内定位）：网页内定位
<a name="aa"/>
- 锚：在html4中标签没有href属性时就是一个锚，但在html5中没有href属性只是一个占位符。
<a href="#aa">到最后</a>
- 转到相应位置设定，需要注意：要加上#。#号和#号后面的内容被称为hash
- 注意：锚连接的改变不会触发页面刷新，页面的历史记录中也不会新增内容。这个特点是以后SPA（单页应用）操作的入口点
3，页间定位+锚链接：定位到其他页面的某个具体的位置上，即：
<a href="page1.html#aa">测试</a>
hash内容一开始是用来在页面内进行定位的；由于hash改变时，页面不会刷新，所以在SPA中被大量的应用
4，功能性链接
<a href="mailto:thelongestday.yhf@gmail.com">给我发信</a>
自动打开本机安装的邮件客户端如：outlook，foxmail等。
元数据标签
元数据是描述数据的数据，换言之，元数据就是数据的语义，放在head标签中的标签都是元素数据标签。包括：
-
title，title标签中无法放置其他标签，即使放了也会被转变成纯文本
-
base，指定文档的默认基地址以及链接打开方式。该标签有两个属性：href和target
-
link，link标签的用途是与外部文件建立链接，该标签可以多次出现
-
style，在文档中声明样式时使用此标签
-
type属性，在HTML5可以不加。type=“text/css”
-
meta，标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
<meta http-equiv="content-type" content="text/html; charset=utf-8">在HTML5中以上代码可以简写，如下：
-
<link rel="stylesheet" type="text/css" href="css/base.css"/>- type属性，定义当前文本内容以层叠样式表（CSS）来解析
- rel属性，定义当前文档与被链接文档之间的关系，这里是调用外部文件，stylesheet即代表css样式表
- href属性，定义被链接文档的位置
-
以上代码设置了文档的字符集。其中http-equiv属性指定了http头部信息，equiv是等价（equivalent）的缩写；content属性则指定了http头信息的取值。所以任何http的头部字符都可以写在meta标签里
-
在meta中还可以利用name属性加content属性定义一系统的功能或行为的预编译指令。标准的name属性有如下几个值
- application-name，文档名
- author，文档作者
- description，文档描述
- generator，生成文档的程序
- keywords，网页关键字，用逗号分隔
-
<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
src属性和href属性
在很多标签中都有src属性或href属性，其功能看似相近，其实有较大的不同
-
href（hypertext reference）属性，指定网络资源的位置。用于在当前文档和引用资源之间确立联系
-
src（source）属性，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。在请求src资源时会将其指向的资源下载并应用到当前文档内
路径
- 同级目录：直接写文件名
- 上一级目录： …/文件名
- 下一级目录： /文件名
表格
1.创建表格
<table>
<th>
<td>单元格内的文字</td>
</th>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table用于定义一个表格标签
- th为表头单元格，会让该行的元素居中加粗显示
- tr标签 用于定义表格中的行，必须嵌套在 table标签中
- td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
- 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的
2.表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格边框 | 像素值 |
| cellspacing | 设置单元格与单元格边框之间的空白距离 | 像素值 |
| cellpadding | 设置单元格内容与单元格边框之间的空白距离 | 像素值 |
| width | 设置表格宽度 | 像素值 |
| height | 设置表格高度 | 像素值 |
| align | 设置表格在网页中水平对齐方式 | left、center、right |
3.表格标题
<table>
<caption>我是表格标题</caption>
</table>
- caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
- caption 标签必须紧随 table 标签之后。
- 这个标签只存在 表格里面才有意义。
4.合并单元格
-
方法：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
-
合并单元格顺序：先上 后下 先左 后右 的顺序
-
合并单元格三步曲
1.先确定是跨行还是跨列合并
2.根据 先上 后下 先左 后右的原则找到目标单元格，然后写上 合并方式 还有 要合并的单元格数量，比如： <td colspan=“3”> </td>
3.删除多余的单元格 单元格
5.表格划分结构
- <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
- <tbody></tbody>：用于定义表格的主体。放数据本体
- <tfoot></tfoot>：放表格的脚注之类
- 以上标签都是放到table标签中
列表
1.无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
- 无序列表的各个列表项之间没有顺序级别之分，是并列的
2.有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
3.自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
- 自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号
表单
input控件
<input type="属性值" value="默认文本值">
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 由用户自定义 | 控件的名称 |
| value | 由用户自定义 | input控件的默认文本值 |
| size | 正整数 | input控件的显示宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
-
后台通过name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。radio 如果是一组，我们必须给他们命名相同的名字 name
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
lable标签
label 标签为 input 元素定义标注（标签），用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
-
第一种用法：用label直接包括input表单
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label> -
第二种用法：for 属性规定 label 与哪个表单元素绑定，for指向input标签的id
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
textarea控件(文本域)
<textarea >
文本内容
</textarea>
select下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- <select> 中至少包含一对 option
- 在option 中定义属性selected =" selected "时，当前项即为默认选中项。
form表单域
- 通过form表单域将收集的用户信息传递给服务器
- 每个表单都应该有自己表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单 |
全局属性（global attribute）
全局属性是每个标签都有的属性，用来配置所有元素共有的行为。相对应的，每种标签中独有的属性，称为局部属性
-
id属性：标签的唯一识别方式，在页面中一个标签只能有唯一的id，无论是不是相同的标签
-
class属性：标签归类属性，在页面中，不同的标签或相同的标签之间，彼此都可以归为一类
- 一个元素可以被归入多个类别，在class属性值中提供用多个空格分隔的多个类名
- id属性和class属性主要用于CSS和JavaScript中。其中CSS中有专门的id选择器和类选择器与之对应
- id选择器以#号开头；class选择器以点开头。都是CSS中的基础选择器
- document.getElementById()方法和document.getElementsByClassName()方法进行查询操作
-
title属性：提供了标签的额外信息，大部分浏览器用这个属性的值显示工具提示
-
lang属性：用于说明标签内容使用的语言。
<p lang="en">Hello HTML5</p>
- hidden属性：布尔属性。隐藏相关标签。所谓隐藏是其形不可见，其位置也不存在
- 布尔属性，这是一种特殊的属性，不需要设定属性值，只需要将属性添加到标签中即可
- xhtml1.0中要求布尔属性也有属性值，写法如：hidden=“hidden” 或 hidden=“true”。在HTML5这些写法也可以，只是不是必须的了
- 除了hidden之外，HTML中的所有布尔属性都遵循这些规律
- style属性：用在直接在标签中定义CSS样式。这是定义CSS的三种样式之一
- dir属性：用来规定元素中文字的方向。该属性只有两个有效值：ltr，rtl
- contenteditable属性：布尔属性。HTML5新加入的属性。当其为真时允许用户修改页面中的内容
- contextmenu属性：右键菜单功能。目前该属性支持并不广泛
- draggable和dropzone属性：拖放操作属性
- data-*属性：自定义属性
自定义属性
HTML5中加入了专门的自定义属性，该类属性必须以“data-”为前缀
在JavaScript中专门加入了dataset属性，以对应HTML中的data-*
example：
<span id="span1" data-level-id="1">测试</span> <!--多单词时用减号分开-->
JavaScript中获取数据
document.getElementById("span1").dataset.levelId; //js中不能直接读取level-id，因为会被解析成减号
文本级语义标签
文本级语义标签包括：
- a 超连接
- em 侧重点的强调，可嵌套。表现为倾斜文字。HTML5中建议使用
- strong 表示内容重要性，可嵌套。表现为文字加粗。HTML5中建议使用
- small 旁注，比正文稍小
- dfn 定义术语，表现为文字倾斜
- abbr 缩写词，一般配合dfn使用
<abbr title="World Wide Web">WWW</abbr>.
- data html5中新增标签，为元素赋以机器可读的数据，其中的value属性指定具体数据
- time html5中新增标签，data标签的时间格式版本
<time datetime="2015-07-09">9 July 2015</time>. Retrieved <date datetime="2015-07-16">16 July 2015</date>.
- code 源码格式
- var 定义变量
- samp 计算机输出
- kbd 用户输入
- sub 下标文本
- sup 上标文本
- i 斜体
- b 粗体
- u 下划线
- s 删除线
- mark 高亮显示文本
- ruby,rt,rp 拼音
- bdi 定义文本方向，双向文本混用时使用（中文中没用处）
- bdo 定义文本的显示方向，其中的dir属性具体定义方向，有ltr和rtl两个可选值
- span 本身无语义，用于包含文本
- br 换行
- wbr 指定何处适合换行。是否换行以排版时的具体情况为准
blockquote，q，cite标签
三个跟引述相关的标签：
- blockquote表示段落级引述内容
- q表示行内的引述内容，表现为双引号的形式
- cite表示引述的作品名，表现为文字倾斜
i、b、u、s标签
这些标签是之前被废弃的标签，在HTML5中为其增加了新的语议
- s标签，之前表示删除线，现在表示错误的内容，经常用于电商领域表示打折前的价格
- i标签，之前表示斜体，现在表示读的时候变调
- b标签，之前表示黑体，现在表示关键字
- u标签，之前表示下划线，现在表示避免歧义的注记
文本级语义标签中的大部分是针对性的元数据标签，这些标签对搜索引擎友好，是SEO的重点关注对象
4639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
