快捷键：
快速注释 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/>斜体
注释：<!-- -->
特殊字符： 空格 （格式 &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"> 账号: <input type="text" name="usn" value="admin" required> 密码: <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> \</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>
3969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
