HTML5学习笔记
HTML
什么是HTML
超文本标记语言（Hyper Text Markup Language），超文本包括文字、图片、音频、视频、动画等。
W3C标准
W3C：World Wide Web Consortium（万维网联盟）
W3C标准包括：
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
注释：
DOCTYPE：告诉浏览器我们使用的是什么规范
head：代表网页头部
body：代表网页主体
title：网页标题
meta：描述性标签，用来描述网页的一些信息
网页基本标签
-
标题标签
<h1>一级标签</h1> <h2>二级标签</h2> ....... -
段落标签
<p>段落</p> -
换行标签
<br/> -
水平线标签
<hr/> -
字体样式标签
<Strong>粗体</strong>，<em>斜体</em> -
注释和特殊符号： （空格），>（大于号），<（小于号），©（版权符号）
图像标签
<img src="" alt="" title="" width="" height="">
src：图片地址，相对路径/绝对路径（../：返回上一级目录）
alt：图片名字（必填）
title：悬停文字
width：宽度
height：高度
链接标签
a标签
<a href="" target="" ></a>
href：必填，表示跳转到哪个页面
target：表示窗口在哪里打开，_blank：在新的页面打开，__self：在当前网页打开
锚链接
- 需要一个锚标记
- 跳转到标记（#标记处）
功能性链接
邮件链接：mailto
QQ链接
列表
有序列表
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
应用范围：试卷，问答
无序列表
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
应用范围：导航，侧边栏
自定义列表
<dl>
<dt>列表名称</dt>
<dd>一</dd>
<dd>二</dd>
<dd>三</dd>
</dl>
应用范围：网页底部
表格
<table border="1px">
<tr>
<td colspan="3">1-1</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
tr：行
td：列
border：边框
colspan：行跨列
rowspan：列跨行
媒体元素
<video src="文件路径" controls autoplay>Xxx.mp4</video>
<audio src="文件路径" controls autoplay>Xxx.mp3</audio>
controls：控制视频播放、暂停、音量以及下载
autoplay：自动播放
audio标签内选择mp4格式的文件依然可以播放，但只能播放音频
页面结构分析
header：网页头部
footer：网页脚部
section：网页主体
内联框架iframe
<iframe src="地址" name="框架名" frameborder="框架边框宽度" width="" height""></iframe>
<a href="框架的网址" target="上述框架名"></a>
表单
表单语法
<form aciton="www.123.com" method="get">
<p>
...
</p>
<p>
...
</p>
</form>
aciton：表单提交的位置，可以是网址，也可以是一个请求处理地址
method：提交方式
- get：可以在URL中看到提交的信息，高效但不安全
- post：比较安全，用来传输大文件
表单元素格式
文本输入框
<input type="类型" name="名字" value="默认初始值" maxlength="限长" size="框长">
密码框
<input type="password" name="pwd" >
单选框标签
<input type="radio" value="单选框的值" name="组名">
name：组名（组名相同即为一个组，只能选择组内其中一个选项）
多选框标签
<input type="checkbox" value="选项的值" name="组名" checked>选项一
<input type="checkbox" value="选项的值" name="组名">选项二
<input type="checkbox" value="选项的值" name="组名">选项三
checked：默认选项
按钮
<input type="button">普通按钮
<input type="image">图像按钮
<input type="submit">提交按钮
<input type="reset">重置按钮
下拉框，列表框
<p>
<select name="列表名称">
<option value="value1" selected>选项一</option>
<option value="value2" >选项二</option>
<option value="value2" >选项二</option>
<option value="value2" >选项二</option>
</select>
</p>
selected：默认选项
文本域
<textarea name="文本域名称" cols="50" rows="10">文本内容</textarea>
cols：文本域宽度
rows：文本域高度
文件域
<input type="file" name="files">
<input type="button" vlaue="上传" name="upload">
邮件验证
<input type="email" name="email">
URL
<input type="url" name="url">
数字验证
<input type="number" name="num" max="100" min="0" step="10">
step：每次增加的值
搜索框
<input type="search" name="search">
增强鼠标可用性
<p>
<label for="mark">点击此处</label>
<input type="text" id="mark">
</p>
说明：鼠标点击“点击此处”即可编辑该文本框
表单的应用
隐藏域：hidden
只读：readonly
禁用：disabled
表单初级验证
提示信息：placeholder
非空判断：required
正则表达式：pattern
