Lesson18：HTML
W3C标准
World Wide Web Consortium（万维网联盟）
国际中立性技术标准机构
W3C标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言（CSS）
-
行为标准（DOM、ECMAScript）
第一个网页
<!DOCTYPE html>
<!-- DOCTYPE 告诉浏览器我们要使用什么规范 -->
<!-- Ctrl+/:注释标签快捷键 -->
<html lang="en">
<head>
<!-- meta:描述性标签，用来描述网站的一些信息 -->
<!-- meta一般用来做seo（seo：搜索引擎优化） -->
<meta charset="UTF-8">
<meta name="keywords" content="26岁大龄菜鸡学前端">
<meta name="description" content="不久我一定会成为技术大牛！">
<title>测试网页</title>
</head>
<body>
测试！
<br>
啊哈！
<hr>
<b>粗体字</b>
<i>斜体字</i>
<p></p>
<!--特殊符号-->
空 格
<p></p>
<>
<p></p>
©版权符号
<br>
<img src="../resources/image/1.jpg" alt="测试图片" title="DNF女机械" width="700" height="718">
<hr>
</body>
</html>
注
-
br换行标签比p段落标签的行间距要小
-
strong和b都是粗体标签
-
em和i都是斜体标签
-
idea的html可以用&加个字母来选择符号
-
BMP格式的图片叫位图
-
锚链接可以用作书签
-
行内元素：不会换行，只会撑开宽度的元素标签
-
块元素：会自动换行的元素标签
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试网页2</title>
</head>
<body>
<!--锚链接:
1.需要一个标记:<a name="top">顶部</a>
2.跳转到标记:<a href="#top">跳转到顶部</a>-->
<a name="top">顶部</a>
<hr>
<!--超链接标签的target值含义：
_blank:在新页面中打开
_self:默认，在当前页面打开-->
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="测试网页.html" target="_blank">
<img src="../resources/image/1.jpg" alt="跳转图片" title="DNF女机械">
</a>
<hr>
<a href="#top">跳转到顶部</a>
<a name="down">底部</a>
<!--功能性链接：
1.邮件链接：
2.qq链接:-->
<a href="mailto:13560941342@163.com">邮件链接</a>
<hr>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击链接加我领取小电影" title="点击链接加我领取小电影"/>
</a>
</body>
</html>
<a href="测试网页2.html#down">跳转</a>
列表与表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试网页3</title>
</head>
<body>
<ol>
<li>有序列表</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>无序列表</li>
<li>2</li>
<li>3</li>
</ul>
<dl>
<dt>自定义列表1</dt>
<dd>1</dd>
<dd>2</dd>
<dt>自定义列表2</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
<table border="1px">
<tr>
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦将</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒体元素
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
<video src="../resources/video/3.mp4" controls autoplay></video>
页面结构分析
<header>头部</header>
<section>主要区域</section>
<footer>底部</footer>
内联框架
<iframe src="测试网页4.html" name="测试网页4" frameborder="0" width="500" height="500"></iframe>
<a href="测试网页3.html" target="测试网页4">跳转</a>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--<form action="测试网页3.html" method="get">-->
<!-- <p><h2>登录</h2></p>-->
<!-- <p>用户名：<input type="text" name="username"></p>-->
<!-- <p>密 码：<input type="password" name="password"></p>-->
<!-- <input type="submit">-->
<!-- <input type="reset">-->
<!--</form>-->
<!--get方式不安全且只能传输少量数据，但高效
post方式安全，可以传输大文件-->
<form action="测试网页3.html" method="post">
<p><h2>登录</h2></p>
<p>用户名：<input type="text" name="username"></p>
<p>密 码：<input type="password" name="password"></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
表单元素格式
<p>用户名：<input type="text" name="username" maxlength="8" size="30" value="李大冶"></p>
<p>密 码：<input type="password" name="password" maxlength="8" size="30" value="123456"></p>
<p>
性别：
<input type="radio" value="boy" name="gender">男
<input type="radio" value="girl" name="gender">女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="girlfriend" name="hobby">女朋友
<input type="checkbox" value="game" name="hobby">打游戏
</p>
<input type="button" name="btn1" value="无效按钮">
<br>
<input type="image" src="../resources/image/1.jpg">
<!-- 图片有自动提交功能-->
<p>
国家：
<select name="select">
<option value="nation1" selected>China</option>
<option value="nation2">Japan</option>
<option value="nation3">American</option>
</select>
</p>
<p>
自我介绍：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
具有自动验证功能的组件：
<p>
邮件：
<input type="email" name="email">
</p>
<p>
URL：
<input type="url" name="url">
</p>
<p>
数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>
音量：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<p>
搜索：
<input type="search" name="search">
</p>
<p>
<!--增强鼠标可用性-->
<label for="mark">点击这里选中id对应框:</label>
<input type="text" id="mark" name="testtext">
</p>
表单初级验证