HTML5基础 学习笔记
Web 标准
Web 标准是构成 Web 基础、运行和发展的一系列标准的总称。因为不同的代码所写出来的效果是不相同的，遵循Web标准可以让不同的开发人员写出的页面更统一更规范。
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
- 结构：用于对网页元素进行整理和分类，这篇文章所写的HTML就是结构搭建时使用的。
- 表现：用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS。
- 行为：网页模型的定义及交互的编写，主要是指Javascript。
网页就像是一个运动员，结构指运动员的身体，手，脚这些所必须存在于人体的器官，是最重要的部分，不能缺少；表现指运动员的肤色，身高，体重等等，每个人可以有所不同，但不会造成太大的影响；行为就是运动员是跑还是跳所做出的动作。
什么是网站？
网站是在因特网上根据一定规则，使用HTML等制作用于展示特定内容相关的网页合集。
网页是由网页元素组成，像如文字，视频，图片等等。利用HTML标签进行描述，通过浏览器进行解析，显示给用户。
HTML是一种超文本标记语言。（并不是编程语言）
三者之间的关系用个比喻来说，网站就是一本书，网页就是书中的每一页，制造出这本书的工具就是HTML。
结构标签（骨架标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
</body>
</html>
| <html> </html> | HTML标签 | 页面中最大的标签，根标签 |
| <head> </head> | 文档的头部 | 在<head>中必须设置<title>标签 |
| <title> </title> | 文档的标题 | 它是网页的标题 |
| <body> </body> | 文档的主体 | 基本的内容都存放在<body>里面 |
|
<!DOCTYPE html> |
文档类型声明标签 | 当前页面采用HTML5版本现实标签 |
|
lang=”en” |
定义当前文档显示语言 | 中文可以是”zh-CN” |
|
charset=”UTF-8″ |
charset：字符集 UTF-8：万国码 |
必写句，没有会造成代码乱码 |
HTML常用标签
标题标签
<h1>1级标题</h1>
共六个等级，从大到小递减
水平线——换行标签
<hr> 水平线
<br /> 换行标签
段落标签
<p>段落</p>
加粗标签
<strong> 加粗 </strong> 更推荐语意强烈
<b> 加粗 </b>
倾斜标签
<em> 倾斜 </em> 更推荐语意强烈
<i> 倾斜 </i>
删除线标签
<del> 删除线 </del> 更推荐语意强烈
<s> 删除线 </s>
下划线标签
<ins> 下划线 </ins> 更推荐语意强烈
<u> 下划线 </u>
图片标签
<img src="photo.jpg" alt="替换文本，图像不能显示的文字"
title="提示文本，鼠标放到图像上，显示的文字" >
超链接
<a href="跳转目标,路径或网址" target="_blank"> 文字 </a >
target：指定链接页面的打开方式，_ self为默认值，_blank在新窗口中打开。
空链接： href="#"
死链接： href="javascript:;"
下载链接： 如果href里面地址是一个文件或者压缩包，会下载这个文件。
锚点链接：在链接文本的href属性中，设置属性值为#名字，的形式
<a href="#two">第2集</a>
<id="two">
特殊字符（常用）
空格符： 
小于号：<
大于号：>
表格标签
<table align="center" border="1" cellpadding="0" cellspacing="0"
width="200" heigh="100">
<thead> //表格的头部区域
<tr><th>姓名</th> <th>爱好</th></tr>
</thead>
<tbody> //表格的主体区域
<tr><td>刘星锤</td> <td>动漫</td></tr>
</tbody>
</table>
| align | 规定表格的对其方式 | left、center、right |
| border | 规定表格是否有边框 | “1”或””，默认””，表示没有边框 |
| cellpadding | 单元格边与内容之间的空白大小 | 默认1像素 |
| cellspacing | 规定单元格之间的空白 | 默认2像素 |
合并单元格
rowspan：跨列合并单元格，最上
colspan：跨行合并单元格，最左
先上后下，先左后右。
- 确定是采用跨行还是跨列
- 找到目标单元格，合并方式=合并的单元格数量。例：<td rowspan= “5”> </td>
- 删除多余单元格
列表标签
无序列表
无序列表：各个列表项之间没有顺序级别之分。
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
...
</ul>
有序列表
有序列表：自带数字排序。
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
...
</ol>
自定义列表
dl表示页面的自定义列表， dt在开头，表示项目/名字，和dd一起使用
<dl>
<dt>名词</dt>
<dd>名词一解释一</dd>
<dd>名词一解释二</dd>
<dd>名词一解释三</dd>
...
</dl>
效果图：
表单标签
表单域
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
<form>
| action | url地址 | 指定接收并处理表单数据的服务器程序的url地址。 |
| method | 提交方式 | get/post |
| name | 表单域名称 | 指定表单的名称，以区分同一个页面中的多个表单域。 |
表单控件
<form accept="xxx" method="get">
<!-- text 文本框 -->
账号：<input type="text" name="username" value="请输入账号" maxlength="5"> <br>
<!-- password 密码框 -->
密码：<input type="password" name="password" value="密码不能为空"> <br>
<!-- radio 单选按钮 单项 -->
性别: 男 <input type="radio" name="sex" checked> 女
<input type="radio" name="sex"> <br>
<!-- checkbox 复选框 多选 -->
兴趣: 运动 <input type="checkbox" name="hobby"> 音乐
<input type="checkbox" name="hobby" checked> <br>
<!-- submit 提交按钮 默认文字为提交-->
<input type="submit"> <br>
<!-- reset 重置按钮 默认文字为重置-->
<input type="reset"> <br>
<!-- button 普通按钮 -->
<input type="button"> <br>
<!-- file 文件上传 -->
<input type="file">
</form>
| name | 定义input元素的名称 |
| value | 设置input元素的值 |
| checked | 默认选中 |
| maxlength | 规定输入的字符最大长度 |
label标签
为input元素定义标注，用于绑定一个表单元素，当点击label标签内的文本时，会自动跳转，用来增加用户体验
<!-- 方式一： -->
<label for="nan">男</label>
<input tye="radio" name="sex" id="nan" />
<!-- 方式二：使用label直接包含表单控件和文字。 -->
<label> 姓名：<input type="text"></label>
select下拉表单
下拉选框的默认选中为：selected
<select>
<option>选项一</option>
<option selected>选项二</option>
<option>选项三</option>
...
</select>
textarea文本域
<textarea cols="20" rows="3"> 内容 </textarea>
<!-- cols:每行现实字数 rows:现实行数 (主要是用CSS实现,了解即可) -->
- 默认提示文本 — 直接写在标签中间即可 —- 不是value
- 文本域内部的空格会被完全还原，所以开始标签和结束标签尽量写在一行。
HTML5新增标签
语义化标签
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
- 这种标准化标签主要针对搜索引擎
- 可多次使用
用于绘画的 canvas 和 svg 元素
- canvas是逐像素进行渲染，根据分辨率决定图像是否清晰
- svg是矢量图不会失真
video（视频） 和 audio（音频） 标签
客户端数据存储新方法：sessionStorage、localStorage
- sessionStorage：暂时的，关闭当前页面，数据自动删除。
- localStorage：没有时间限制。
表单的增强应用
·表单元素 input 的 type 属性扩充：
·date、time、email、url、search、range、month、color、number
·表单元素 input 通过属性进行表单验证：
·required（必填项）、pattern（正则表达式验证表单输入）
新增地理定位
Geolocation API 用于获得用户的地理位置