Html5介绍
- Html---xhtml----html5
- Html5广义：html5+css3_javascript+api
- Html5特点：
- 代码更加简洁
- 标签具有语义化
- 新增了一些属性
- 代码更加宽松
- Html5发展史
2004年提出构想---2008年模拟第一份草案----2012年推广html5-----2020推出正式版
- 浏览器支持html5
- IE9版本以上支持html5
- 其余浏览器都支持
- Html5结构
- Html5新增标签
- <header>网页的头部
- <nav>王爷的导航
- <section>代表网页的一个块，与div相似
- <article>网页文章内容
- <aside>网页侧边栏
- <footer>网页页脚
- 新增type属性值
语法：
<input type="text" name="username" class="boxone" placeholder="用户名/账号/邮箱" maxlength="10" required="required" autofocus="autofocus">
属性：
| Placeholder=”用户名/账号/邮箱” | 输入框的提示信息 |
| Required=”required” | 不填写不能提交 |
| Autofocus=“autofocus” | 光标自动定位 |
| Name | 表单的名称 |
| Maxlength | 最大输入字符 |
| Value | 输入框的预定义文字 |
| Size | 输入框最大字符数 |
- 新增表单属性
| 限定用户输入必须是email类型 | |
| url | 限定用户输入必须是网络地址 |
| Data | 限定用户输入必须是日期类型 |
| Month | 限定用户输入必须是月类型 |
| Time | 限定用户输入必须是时间类型 |
| Week | 限定用户输入必须是周类型 |
| Number | 限定用户输入必须是数字类型 |
| Search | 限定用户输入必须是搜索框 |
| Color | 产生一个颜色选项 |
| Ranger | 产生一个滑块 |
- 新增视频标签
<video autoplay="atuoplay" controls="controls">
<source src="videos/1.mp4">
<source src="videos/1.ogg">
<source src="videos/1.webm">
</video>
- 新增音频标签
<audio controls="controls">
<source src="1.mp3">
<source src="1.ogg">
<source src="1.mav">
</audio>
Html文本标签
1.文本标签<font>，设置文本的颜色、文本的字体、文本的大小
语法：<font>设置内容</font>
属性：
2.段落标签
语法：<p></p>
属性：
- Align：取值 left center fight
3.标题标签
语法：<h1></h1>
属性：
- Align：取值 left center fight
4.预定义标签：保留原有的空格和换行
语法：<pre></pre>
5.盒子标签：配合css样式一起使用，属于块标签
语法：<div></div>
6.<span>标签：配合css样式一起使用，属于行内标签
- 块标签：独占一行
- 行内标签：不属于独占一行
注意：块标签内含有行内标签！！！
列表
无序列表：若干个相似内容进行排列，无先后顺序；
语法：<ul><li></li></ul>
属性：
Type 类型：设置列表前面的符号样式 取值circle（空心圆） disc（默认） square（方块）
有序列表：若干个相似内容进行排列，有先后顺序；
语法：<ol><li><li><ol>
自定义列表：
语法：<dl><dt></dt><dd></dd></dl>
| 空格 | |
| 版权 | © |
| < | < |
| > | > |
| ￥ | ¥ |
特殊符号
图片标签
语法：<img src="images/1.jpg" alt="HTML5常用标签与属性" alt="其他" width="300" height="200" border="1" hspace="100" vspace="100">
| Src | 图片地址 |
| Alt | 图片描述 |
| height | 图片高度 |
| Height | 图片高度 |
| Border | 图片边框 |
| Hspace | 图片和内容左右距离 |
| Vspace | 图片和内容上下距离 |
表格标签
语法：
<table border="1" bgcolor="red" width="800" height="400" align="center" cellpadding="5" cellspacing="20" background="images/1.jpg">
| Width | 表格宽度 |
| Height | 表格高度 不推荐 |
| Border | 表格边框 |
| Align （left center right） | 表格对齐方式 |
| Cellpadding | 内容与单元格距离，默认为2px |
| Cellspacing | 单元格与单元格的距离，默认为2px |
| Bgcolor | 表格的背景颜色 |
| Background | 表格的背景图片，比背景颜色级别高 |
| Rules=”all” | 合并边框线，不推荐 |
| Bordercolor | 边框线颜色，不推荐 |
行的属性:
语法：<tr height="500" bgcolor="green" align="center" valign="bottom" background="images/3.ico">
| Height | 行的高度 |
| Bgcolor | 行的颜色 |
| Background | 行的背景图片 |
| Align （left center right） | 行的水平对齐方式 |
| Valign （top middle bottom） | 行的垂直对齐方式 |
单元格的属性：
语法：<td width="200" height="500" bgcolor="$fffccc" align="center" valign="bottom" background="images/1.jpg">
| Bgcolor | 单元格的颜色 |
| Background | 单元格的背景图片 |
| Width | 单元格的宽度 |
| Height | 单元格的高度 |
| Align （left center right） | 单元格的水平对齐 |
| Valign （top middle bottom） | 单元格的垂直对齐 |
表格的扩充
合并单元格
- 横向合并：colspan
语法：<td colspan=”3”></td> - 纵向合并：rowspan
语法：<td rowspan=”3”></td>
链接标签
语法：<a href="http://baidu.com" target="_tanlk">百度</a>
属性：
| Href | 链接地址 |
| Target （_blank 在新窗口打开 _self在原窗口打开） | 窗口打开方式 |
| Name | 定义锚点名称 |
属性值:
| 绝对地址 | <a href="https://www.xiaodefa.com">晓得伐网</a> |
| 本地地址 | <a href="file:///f:Web/HTML/images/1.jpg">图片</a> |
| 相对地址 | <a href="images/3.ico">ICO</a> <a href="../PHP/1.txt">txt</a> |
| 下载链接 | <a href="../php/1.exe">exe</a> |
| 邮箱链接 | <a href="mailto:gk0616@live.cn">高远清</a> |
| 空连接 | <a href="#">空连接</a> |
| Javascript链接 | <a href="javascript:windows.close()">关闭</a> |
| 锚点链接 | <a name="锚点名称"></a> <a href="#锚点名称">内容</a> |
表单标签
语法：<form action="xx.php" method="post" name=”username”></form>
属性：
- name 表单的名称识别
- <form name="top"></form>
- action 对数据进行处理
- <form action="xx.php"></form>处理数据的程序为
- method 对表单中的数据提交到服务器端
- <form action="xx.php" method="get"></form>
- 地址栏明文传输，再传给文件处理程序
- 不能传递大量数据，每次只能传递1024字节
- 不能上传附件
- <form action="xx.php" method="post"></form>
- 数据直接传给文件处理程序
- 可以传递海量数据
- 能上传附件
- <form action="xx.php" method="get"></form>
控件：
- 单行文本框
语法：<input type="text" name="username" size="100" maxlength="10">
属性：
| Name | 文本框名称 |
| Size | 文本框宽度，字符为单位 |
| Maxlength | 文本框最大能输入多少字符 |
| Value | 文本框初始值 |
- 密码框
语法：<input type="password" name="password_" size="10" maxlength="10" value="输入密码" readonly="redonly" disabled="disabled">
属性：
| Name | 密码框名称 |
| Size | 密码框宽度，字符为单位 |
| Maxlength | 密码框最大能输入多少字符 |
| Value | 密码框初始值 |
| Readonly | 密码框只读属性，只能选中，不能修改 |
| Disabled | 密码框禁止属性，不能选中，不能修改 |
- 单选按钮
语法：
<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nvv">女
属性：
| Name | 单选按钮 组的识别名称 |
| Value | 单选按钮 组的初始值，提交给程序看 |
| Type=”radio” | 单选按钮的属性值 |
- 复选框
语法：
<input type="checkbox" name="game" value="shangwang" checked="checked">上网
<input type="checkbox" name="game" value="youxi" checked="checked">游戏
<input type="checkbox" name="game" value="shuijiao">睡觉
属性：
| Name | 复选框 组的识别名称 |
| Value | 复选框 组的初始值，提交给程序看的 |
| Checked | 预选选择 |
| Type=”checkbox” | 复选款的属性值 |
- 多行文本框
语法：
<textarea name="liuyan" id="no" cols="30" rows="10">请输入流言内容</textarea>
属性：
| Name | 多行文本框的名称 |
| Id | Id名称 |
| Cols | 多行文本框 一行多少字符 |
| Rows | 多行文本框 显示多少行数 |
| textarea | 标签 |
- 下拉列表
语法：
<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
属性：
| Name | 下拉列表名称 |
| Option value | 下拉列表选项 |
| <Select><option></select></option> | 下拉列表标签 |
- 隐藏域
语法：<input type="hidden" name="id12">
属性：
| Name | 隐藏域 的名称 |
- 文件域
语法：<input type="file" name="file_name">
属性：
| Name | 文件域 的名称 |
- 按钮
- 提交按钮：<input type="submit" value="提交">
- 图片按钮：<input type="image" src="images/3.ico">
- 重置按钮：<input type="reset" value="重置">
- 其他按钮：<input type="button" value="普通按钮">
