HTML基础
<!DOCTYPE html>必须位于HTML文档第一行。
<meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式：
(1)表示文档内容类型、字符串编码信息 如：<meta charset="UTF-8">
(2)为搜索引擎定义关键词:
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
(3)为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
(4)定义网页作者:
<meta name="author" content="Hege Refsnes">
(5)每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
字体样式标签：<strong>字体变粗、<em>和<i>都有斜体的效果，区别<em>表示对内容的强调
常用转义字符：
(1) //空格
(2)> //大于号>
(3)< //小于号<
(4)" //双引号"
(5)© //版本符号
图片标签，有src和alt属性：
<img src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
a标签超链接(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
<a href="链接地址" target="目标打开窗口位置">文本或图像</a>
链接地址
(1)绝对路径(指向本站点外的文件如<a href="https://www.baidu.com">百度</a>)、
(2)相对路径(指向本站点内的文件,如<a href="login.html">登录<a>)
(3)相对路径(指向本站点内的文件，"../"表示当前目录的上级目录）
超链接的应用场合：
(1)页面间链接：如<a href="login.html" target="_blank">跳转到登录页</a>
(2)锚链接：
先在目标位置B设置标记如：<a name="new">这里是目标位置</a>，
然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A</a>
(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
如电子邮件链接："mailto:电子邮件地址"
超链接伪类：
a:link 访问前
a:visited 访问后
a:hover 鼠标悬停
a:active 鼠标选中未释放
元素分类
(1)块元素：如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。
块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如<strong><a> 显示宽度由自己的内容决定，其他元素可以排在它后面。
元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;
(就是同时具备内联元素、块状元素特点，如img、input)
三种列表：
(1)有序列表<ol><li>
(2)无序列表<ul><li> ul中只能嵌套li，而li可以嵌套任意标签。
(3)定义列表<dl><dt><dd> 是标题及列表项的结合。
表格基本结构：单元格、行、列
(1)<table><tr><th><td>
(2)HTML5中已废除table的border属性，用css控制边框宽度。
(3)跨列(横跨)：<td colspan="所跨的列数">内容</td>
跨行(竖跨)：<td rowspan="所跨行数">内容</td>，两者都要删除被合并的其他单元格。
(4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。
创建表格：
1、<table>：整个表格以<table>标记开始、</table>标记结束，table在加css样式前不会显示表格线。
2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）
3、<tr>：表格的一行，所以有几对tr 表格就有几行。
4、<th>：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。
5、<td>：表格的一个单元格，一行中包含几对<td>这行中就有几个单元格。
6、表格中列的个数，取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。
<table border="边距宽度">
<tr>
<td rowspan="跨行数量" colspan="跨列数量" align="文本状态"></td>
</tr>
</table>
————
表格可以添加标题和摘要标签进行优化。
(1)摘要：<table summary="表格简介文本">
摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
(2)标题：<caption>
描述表格内容，标题的显示位置：表格上方。
语法：
<table summary="表格简介">
<caption>标题</caption>
<tr><td></td></tr>
</table>
<iframe>框架:在本页面中引入其他页面内容。
<iframe name="此框架的标识名" src="引用的页面地址"></iframe>
<iframe>和锚链接的结合：使锚链接的内容在iframe框架中打开
<iframe name="mainFrame" src="框架引用的页面地址" />
<a href="链接路径" target="mainFrame">点击在框架中打开</a>
相关属性 src="引用页面地址" name="框架标识名" frameborder="边框"
scrolling="是否出现滚动条" noresize="noresize"更改页面大小
用<a targer="">配合<iframe name="">可实现窗口间的关联
form表单标签：
<form method="post" action="index.html" enctype="text/plain">表单内容</form>
(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。
(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。
<form method="提交方式" action="提交地址">
如果是文件域要在表单中加 enctype="multipart/form=data" 属性
隐藏域：type="hidden"
只读：readonly="readonly"
禁用：disabled="disabled"
表单内可填元素：
(1)表单元素<input>标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框<select><option>标签：
<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>
(4)多行文本域：不能用value属性赋初始值
<textarea name="标识名" cols="显示的列数" rows="显示的行数">内容</textarea>
(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
<input type="number" name="num" min="0" max="100" step="10"/>
(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
<input type="range" name="range" min="0" max="100" step="10"/>
(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
<input type="search" name="sousuo" />
(8)文件域：多用于文件上传
<input type="file" name="files"/>
<input type="submit" name="upfiles" value="上传"/>
(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
<input type="hidden" name="userid" value="20"/>
(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
表单验证
(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入
<input type="text" name="name" placeholder="请输入你的姓名"/>
(3)required：规定文本框不能为空
<input type="email" name="email" required/>
(4)pattern：输入的内容必须符合正则表达式自定义的规则
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字
布局模型与盒模型都是 CSS概念。布局模型建立在盒模型基础上。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。
2、浮动模型 (Float)
任何元素默认是不能浮动的，可用CSS定义为浮动。
3、层模型（Layer）
让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
文本格式化标签：
<b> 文本加粗
<strong>文本加粗(加重语气)
<i> 斜体字
<em> 斜体(强调文字)
<big> 字体放大
<small> 字体缩小
<sub> 定义下标字
<sup> 定义上标字
<ins> 插入字(字体下划线)
<del> 字体删除线
HTML5表单新标签
<form> 供用户输入的表单
<input> 输入域
<textarea> 文本域 (多行输入)
<label> 定义 <input> 元素的标签，一般为输入标题
<fieldset> 定义一组相关的表单元素，并使用外框包含起来
<legend> 定义 <fieldset> 元素的标题
<select> 下拉选项列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 计算结果
HTML5的结构元素：
(1)header(头部)
(2)footer(脚部)
(3)section(独立区域)
(4)article(独立文章内容)
(5)aside(相关内容或应用,常用于侧边栏)
(6)nav(导航类辅助内容)
视频元素：
(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>
(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：
<video controls>
<source src="video/video.mp4" />你的浏览器不支持video标签
<video>
video视频播放设置
1.最好的解决方法
下例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到 <embed> 元素。
HTML5的source + object + embed。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
2.优酷解决方案
如果要在网页中播放视频，可把视频上传到优酷等视频网站，然后在你的网页中插入 HTML代码即可播放视频：
<embed src="" width="480" height="400" type="application/x-shockwave-flash"></embed>
3.使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码指向 AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件：
<a href="">播放该视频</a>
音频元素：与视频元素相似，只要把video换成audio即可。
audio音频设置
1.解决方法：
下例使用两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试 <embed> 元素。
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
2.雅虎播放器使用免费，提供一个小型的播放按钮。
（1）如果使用它，要把这段JS插入网页底部：
<script src="http://mediaplayer.yahoo.com/latest"></script>
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
<a href="音频路径">音乐1</a>
<a href="horse.mp3">音乐2</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>
用超链接指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
<a href="1.mp3">音乐1</a>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
