HTML基础操作
HTML：Hyper Text Markup Language (超文本标记语言)
HTML5优势
世界知名浏览器厂商对HTML5的支持（微软、Google、苹果、Opera、Mozilla）市场需求跨平台
W3C标准
w3c World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机 构 http://www.w3.org/l http://www.chinaw3c.orgl w3C标准包括 结构化标准语言(HTML、XML) 表现标准语言(css) 行为标准(DOM、ECMAScript )
网页基本标签
标题标签
<h1>一级标题
</h1>
<h2>二级标题
</h2>
<h3>三级标题
</h3>
<h4>四级标题
</h4>
<h5>五级标题
</h5>
<h6>六级标题
</h6>
段落标签
<p>
+文本内容
</p>
换行标签
<br/>
水平线标签
<hr/>
字体样式标签
粗体：
<strong>内容
</strong>
斜体：
<em>内容
</em>
注释和特殊符号
空格：
大于：
>
小于：
<
版权：
©
对特殊符号的记忆：输入&后在输入一个字母会出现相关信息
图像标签
常见图像格式：JPG GIF PNG BMP……
<img src="图片地址" alt="图片名字" title="鼠标悬停文字">
超链接标签
<a href="链接地址">链接信息
</a>
/*功能性链接*/
<a href="mailto:邮箱">文本
</a>
/*锚链接
1.需要一个锚标记
2.跳转到标记
*/
<a href="#top">回到顶部
</a>
<a href="down">底部
</a>
行内元素和块元素
块元素
无论内容多少，该元素独占一行（p、h1-h6…）
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em…）
列表
什么是列表 ◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并 以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息 列表的分类 ◆无序列表 ◆有序列表 ◆定义列表
<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>
<dd>列表内容
</dd>
</dl>
表格
<table border="1px"> /*border表格边框*/
<tr>
<td colspan="3">1
</td>
</tr>
<tr>
<td rowspan="2">1
</td>
<td>2
</td>
<td>3
</td>
</tr>
<tr>
<td>1
</td>
<td>2
</td>
</tr>
</table>
视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频音频练习
</title>
</head>
<body>
<video src="资源路径" controls >视频
</video>
<audio src="资源路径" controls>音频1
</audio>
<audio src="资源路径" controls>音频2
</audio>
</body>
</html>
iframe内联框架
<iframe src="path" name="mainFrame"></iframe>
表单
基本语法
<form method="post" action="result.html">
<p>名字:
<input name="name" type="text" > </p>
<p>密码:
<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
表单元素格式
属性说明
type指定元素的类型。text、password、checkbox、radio、submit.reset、file、hidden、image和button，默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当type为text或password时，表单元maxlengthtype为text或password时，输入的最大字符数checkedtype为radio或checkbox时，指定按钮是否是被选中
表单初级验证
placeholder 提示信息
required 不能为空
pattern 正则表达式
登录注册页面练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册
</title>
</head>
<body>
<h2>注册
</h2>
<form action="XXXX.html" method="get">
<p>名字:
<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码:
<input type="password" name="psw" required></p>
<p>性别：
<input type="radio" value="boy" name="sex"> 男
<input type="radio" value="girl" name="sex"> 女
</p>
<p>国家
<select name="列表名称">
<option value="China">中国
</option>
<option value="Ameriac">美国
</option>
<option value="England">英国
</option>
</select>
</p>
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容
</textarea>
</p>
<p>
<input type="file" name="files" >
<input type="button" value="上传" name="upload">
</p>
<p>邮件
<input type="email" name="email" required>
</p>
<p>URL
<input type="url" name="url">
</p>
<p>数量
<input type="number" name="num" min="0" max="100" step="10">
</p>
<p>音量
<input type="range" name="voice" min="0" max="100">
</p>
<p>搜索：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
快捷键操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
</head>
<body>
注释（// 或者/*…*/ ）
Shift+F6 ---->重构-重命名
Ctrl+X ----->删除行
Ctrl+D --->复制行
Ctrl+G ---->查找行
Ctrl+Shift+Up/Down ---->代码向上/下移动。
F2 或Shift+F2 ---->高亮错误或警告快速定位
写代码，按Tab ---->生成代码
选中文本，按Ctrl+Shift+F7 ------>高亮显示所有该文本，按Esc高亮消失。
Ctrl+B ------>快速打开光标处的类或方法
Ctrl+E------>最近打开的文件
Alt+F1------>查找代码所在位置
Ctrl+Alt+L------>格式化代码
Ctrl+R------>替换文本
Ctrl+F------>查找文本
Ctrl+P------>方法参数提示
Ctrl+shift+c------>拷贝文件路径
Ctrl+alt+shift+c------>拷贝相关数据 包括路径和所在行
Ctrl+shift+v------>从历史记录中粘贴
ctrl+Y ------>删除整行
ctrl+shift+enter------>新建行
ctrl+alt+enter------>在当前行前面新建行
</body>
</html>
