HTML5总结

快捷键：

​ 快速注释 ctrl+/

​ 复制当行：ctrl+D

常用代码：

标题标签：<h1..hn> 段落标签：<p> 换行:<br> 水平线：<hr> 特殊： &xxx; 字体样式:粗体<strong>
图像标签：<img src=.. alt="图片替代文字" titli="图片悬停文字" width height>
视频/音乐标签：<video/audio src=".." controls(控制条) autoplay(自动播放)>
链接：<a href=".."> 锚链接：<a name="锚处"> <a href="锚处"> 邮箱链接：<a href="mailto:xx@xx">
内联框架：<iframe src=".." name=".." w/h>
表格：表格：table 行：tr 列：td 跨列：colspan 跨行：rowspan 居中：align="center"

重点:
    
表单：	  <form action="xx.html" method="post/get">  表单送到xx位置，提交方式post/get
    	<p>名字：<input type="text" name="username"></p> 文本框：用户输入名字 
    	<p>密码：<input type="password" name="psw"></p>  文本框：用户输入密码(type改为password)
    	<p><input type="submit"><input type="reset"></p> 提交与重置按钮										<form/>  都在form下<form action".." method="..">xxx</form>
表单字符限制：maxlength 表单框长度限制：size 表单默认值：value
    
表单单选项radio:  <input type="radio" value="boy" name="sex">男
        		<input type="radio" value="girl" name="sex">女
表单多选项checkbox:<input type="checkbox" value="slepp" name="hobby" >睡觉
        		 <input type="checkbox" value="game" name="hobby" >游戏
表单下拉框selecet:<select name="列表名称">
            	<option value="提交选项的值">中国</option>
            	<option value="提交选项的值">美国</option><select/>
           
按钮：input type="button/submit/reset/image" 图片也可当按钮
上传文件/文本：
    文本域(上传文本) textarea  属性cols 列 rows 行
    	<p align="center">填写其他建议:
        <textarea name="columns" cols="30" rows="10">其他信息</textarea></p>
    文件域（上传文件） input type="file"
    	<input type="file" name="files">
    	<input type="button" value="上传" name="upload">
滑块： input里的range 也可有step
    	<input type="range" name="range">
搜索框：input里的search
 		<input type="search" name="search">
验证：邮箱验证：input里的email URL验证：input里的url 数字验证：input里的number
    	<input type="email" name="email">//<input type="number" name="num" step="10">
表单其他应用属性：只读：readonly  禁用：disabled  隐藏：hidden 默认提示信息：placeholder
    		   非空判断：元素/表单不能为空:required  正达表达式：pattern

网页的基本标签

标题标签：<h1>一级标签</h1>
段落标签：<p> <p/>
换行标签：<br>
水平线标签：<hr/>
字体样式标签：<strong><strong/>粗体 <em><em/>斜体
注释：<!-- -->
特殊字符：&nbsp; 空格 （格式 &xxx;）

图像标签

<img src="../statics/images/tx.jpg" alt="实例" title="测试"
     width="640" height="640" />
alt：若图片链接失效，图片的替代文字　
titles：图片悬停的文字
注意：src下文件目录　最好根据提示来　

超链接

锚链接

target:表示窗口在哪打开  _blank:在新标签打开 
	<a href="1.first.html" target="_blank">在新标签页跳转到我的第一个网页</a>
锚链接：自定义name
	<a name="top">顶部</a>  
		。。。。
	<a href="#top">回到顶部</a>

行内元素和块元素

块元素
    无论内容多少 该元素独占一行
    如 <p>2</p> <h1>1</h1>
行内元素
    内容可以撑开宽度 如
    <a href=""></a> a hrpe="" ,<strong><strong/>,<em></em>

列表

​ 有序，无序，自定义

<!--有序列表-->
<ol>
    <li>php</li>
    <li>java</li>
    <li>c++</li>
</ol>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>php</li>
    <li>c++</li>
</ul>

<!--自定义列表-->
dl：标签
    st:列表名称
    dd:列表内容
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>c++</dd>
    <dd>php</dd>


    <dd>福建</dd>
    <dd>厦门</dd>

表格

​ 列，行 跨行，列

<!--表格：table
行： tr
列： td
跨列：colspan
跨行：rowspan
居中：align="center"
-->
<table border="1px">
    <tr>
        <td colspan="4" align="center"><em><strong>学生成绩表</strong></em></td>
    </tr>
    <tr>
        <td rowspan="2">卿兴</td>
        <td>语文</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td rowspan="2">超哥</td>
        <td>语文</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>不错</td>
    </tr>

</table>

媒体元素

​ 音频，视频

muted（在src前） autoplay：自动播放
control:控制条 必加

视频：<video muted src="china.mp4" controls autoplay></video>
音频：<audio src="ab410f7bbbb0955e7ae476ae89527a5d.m4a" controls></audio>

网页的简单布局

​ 头，脚部，主体

<!--header:头部footer:脚部section:主体 web中的独立区域article:文章内容aside:相关内容或应用（侧边栏）nav:导航类辅助内容--><hrader>头部</hrader><foot>脚部</foot><section>主体</section><article>文章</article><aside>侧边栏</aside><nav>导航辅助</nav>

内联框架

​ 网站内部加内别网页：iframe：farmeborder

	<iframe src="" name="hello" frameborder="0" width="1200px" height="1500px"></iframe><a href="7.列表.html" target="hello">点击跳转</a>

表单

一般格式：

	１．<form action="9.表格.html" method="get"><form\>    ２． 账户：<input type="text" name="username" value="这里输入你的账号">        密码：<input type="password" name="psw" >    ３．提交或重置<input type="submit" name="这是提交">        		<input type="reset" name="这是重写"> action:表单提交的位置，可以是网站、请求处理地址method :提交方式 post get           post:较为安装，可传输大文件           get:url可看提交的信息， 不安全，高效<form action>中间写表单 别超出去了<form/>账号密码 input type"text/password"按钮:submit:提交  reset：重设--><form action="7.列表.html" method="post">    <p>名字：<input type="text" name="username"></p>    <p>密码：<input type="password" name="psw"></p>    <p>        <input type="submit">        <input type="reset">    </p></form>

form[post/get] 文本框 密码框 单选框 多选框 按钮 下拉框 滑块

form[post/get]：<form action="ｘｘ页面" method="get或者post">    文本框：<input type="text" name=ｘｘ>        密码框：文本框的　"text"　改为　"password"         单选框：文本框的　"text"　改为　"radio"    	例：性别：<input type="radio" value="boy" name="sex">男        		<input type="radio" value="girl" name="sex">女        多选框：文本框的　"text"　改为　"checkbox"    	例：<p align="center">多选：爱好        	<input type="checkbox" value="slepp" name="hobby" >睡觉       	 	<input type="checkbox" value="game" name="hobby" >游戏        	<input type="checkbox" value="code" name="hobby" checked>代码        	<input type="checkbox" value="chat" name="hobby" >聊天 </p>    多选：checkbox 单选：radio 都有value（默认值） name(组)属性checked 默认选中	按钮：button 图片也可当按钮 常见的按钮-->						input type="button"						input type="image"						input type="submit"						input type="reset"	    

表单的应用

​ 隐藏域 只读 禁用

	只读：readonly：账号：<input type="text" name="username" value="admin" readonly>    禁用：disabled：<input type="radio" name="sex" disabled>男       			　 <input type="radio" name="sex">女    隐藏：hidden：密码：<input type="password" name="psw" value="123456" hidden>

表单的初级验证

​ 用户提示（默认提示信息） 非空判断 正则表达式

默认提示信息：placeholder：账户：<input type="text" name="usn" placeholder="admin" required>非空判断：元素/表单不能为空:required：同上。输出页面为账户默认填写ａｄｍｉｎ，且不能为空正达表达式：pattern：<input type="ip"  name="diymail" pattern=＂网上w3c有表对应＂邮箱验证：input里的email：<p>邮箱：<input type="email" name="email"></p>URL验证：input里的url：<p>URL:<input type="url" name="url"> </p>数字验证：input里的number  注意：最大最小值max/min 步进step 按多少增加     		<p>数字：<input type="number" name="num" step="10"></p>                

简单使用：

test1:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body><p align="center"><strong><em>填写信息查看表格</em></strong></p><form action="20.test.html" method="get">    <p align="center">        账号:&nbsp;<input type="text" name="usn" value="admin" required>        密码:&nbsp;<input type="password" name="psw" required>    </p>    <p align="center">性别(checked默认先选女)：        <input type="radio" name="sex" >男        <input type="radio" name="sex" checked>女    </p>    <p align="center">兴趣(多选框 写代码被默认选择)：        <input type="checkbox" name="hobby" value="code" checked>写代码        <input type="checkbox" name="hobby" value="game">玩游戏        <input type="checkbox" name="hobby" value="sleep">睡觉    </p>    <p align="center">来自：(下拉框 英国默认先选中)：        <select name="下拉框">            <option name="选项的值">中国</option>            <option name="选项的值" selected>英国</option>            <option name="选项的值">美国</option>        </select>    </p>    <p align="center">..        <select name="下拉框">喜欢的食物：            <option value="1">汉堡</option>            <option value="1" selected>pizz</option>            <option value="1">other</option>        </select>            </p>    <p align="center">其他信息：        你的邮箱：<input type="email" name="email">        你的地址：<input type="url" name="url">    </p>    <hr/>    <p align="center">(重置被禁用disable）:        <input type="submit" name="提交">        <input type="reset" name="重置" disabled>    </p></form></body></html>

test2:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>跳转到的信息</title></head><body><!--表格：table行： tr列： td跨列：colspan跨行：rowspan居中：align="center"--><table border="2px">    <tr>        <td colspan="4" align="center" ><strong>学生成绩表</strong></td>    </tr>    <tr>        <td>&nbsp;&nbsp;\</td>        <td>语文</td>        <td>数学</td>        <td>英语</td>    </tr>    <tr>        <td >张三</td>        <td >100</td>        <td >60</td>        <td >B</td>    </tr>    <tr>        <td >李四</td>        <td >60</td>        <td >80</td>        <td >B</td>    </tr></table></body></html>