HTML的基本结构
所有HTML标签都以<>开头 以</结尾>，自闭合标签<></>都可；
网页中内容都需在< body> 标签中；
<meta name="keywords" content="***,*“><!--网站关键字描述-->
<meta name="description" content="***"><!--网站描述-->
<!--注释-->
1. 网站的基本标签
1.标题标签h1~h6
2.段落标签
3.换行标签
4.水平线标签<hr/>
5.字体样式标签<strong>,<em>
6.特殊符号标签  空格,>大于,<小于,©版本符号
2.图像标签
<img src="图片：图片的路径" alt="图片描述" title="鼠标放在图片上的悬浮提示" width="宽" height="高">
3.超链接
1.基本使用
target： _self : 本窗口打开 ? _blank： 新窗口打开
2.锚链接
用于页面间指定位置跳转
锚点：<a name="mark"></a
同一页面跳转到锚点
<a href="#mark">链接名</a>
不同页面中跳转到锚点
<a href="***.html#mark">链接名</a>
3.功能性标签
邮件链接
<a href="mailto:邮箱">链接名【联系我们】</a>
4.块元素，行内元素
块元素：独占一行
行内元素：由内容长度决定行数
<!DOCTYPE html>
列表
无序列表ul-li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li><a href="https://music.163.com/discover/toplist?id=19723756"target="_blank">云音乐飙升榜</a></li>
<li><a href="https://music.163.com/discover/toplist?id=3779629"target="_blank">云音乐新歌榜</a></li>
<li><a href="https://music.163.com/discover/toplist?id=2884035"target="_blank">网易原创歌曲榜</a></li>
<li><a href="https://music.163.com/discover/toplist?id=3778678"target="_blank">云音乐热歌榜</a></li>
</ul>
</body>
</html>
有序列表ol-li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li><a href="https://music.163.com/#/song?id=1409382131" target="_blank"><img src="http://p2.music.126.net/my-6EO4NatR8PaW5eL7QQw==/109951164546930698.jpg?param=50y50&quality=100"></a></li>
<li><a href="https://music.163.com/#/song?id=1405283464" target="_blank"><img src="http://p2.music.126.net/StMr9-QujuAQkOlBZ1BGtA==/109951164503111693.jpg?param=50y50&quality=100"></a></li>
<li><a href="https://music.163.com/#/song?id=1404885266" target="_blank"><img src="http://p2.music.126.net/Aj4X1kpV-C2LLi-e_Xhgvg==/109951164499744148.jpg?param=50y50&quality=100"></a></li>
</ol>
</body>
</html>
自定义列表dl-dt-dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>云音乐特色榜</dt>
<dd>云音乐飙升榜</dd>
<dd>云音乐新歌榜</dd>
<dd>网易原创歌曲榜</dd>
<dd>云音乐热歌榜</dd>
</dl>
</body>
</html>
表格
优点：结构简单，通用
基本结构：
表格 table
行 tr
列 td 跨行rowspan 跨列colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流量统计表</title>
</head>
<body>
<table border="2px">
<tr>
<td>流量统计</td>
<td>访客统计</td>
<td>会员</td>
<td>游客</td>
</tr>
<tr>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr >
<td rowspan="2"></td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr>
<td>平均浏览量</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
音频、视频
音频 audio
视频 video
src：路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放
两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<video src="..\教父2.BD1280高清中英双字版.mp4" controls autoplay>
<video src="..\教父2.BD1280高清中英双字版.mp4" controls autoplay>
</video>
</body>
</html>
</video>
<video controls autoplay>
<source src="..\教父2.BD1280高清中英双字版.mp4">
</video>
网页结构分析
页面的头部
页面的主体
页面的尾部
HTML5新增的结构标签：行业规范，无实际作用
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；[独立区域]
（2）article：特殊独立区块，表示这篇页眉中的核心内容；[文章主题]
（3）aside：标签内容之外与标签内容相关的辅助信息；[侧边栏]
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航栏
（8）figure：独立的单元，例如某个有图片与内容的新闻块。
内联框架
iframe：内联框架
src： 地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https://www.baidu.com/" frameborder="0"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe name="name" frameborder="0"></iframe>
<a href="https://www.baidu.com/" target="name">显示内联框架</a>
</body>
</html>
表单
基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础表单</title>
</head>
<body>
表单元素
所有表单元素都要写在form表单中
1.文本框
2.密码框
3.单选按钮
4.复选框
5.下拉列表框
select-option
6.按钮
普通按钮和javascript结合使用[button]
7.文本域
8.文件域
9.邮箱
10.网址
11.数字调节
12.滑块
13.搜索框
表单的应用
1.隐藏域
type="hidden"
2.只读和禁用
readonly、disabled
3.标注
初级表单验证
是为了减轻服务器的压力,主要在 JavaScript 以及 后台判断
-
默认提示
placeholder=""
-
必填
required
-
正则表达式
pattern="^1[358]\d{9}"
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form action="提交地址.html" method="get" target="_blank">
<p>
用户账号：<input type="text" name="username" value="123456" size="20" maxlength="11" readonly>
</p>
<p>
用户密码：<input type="password" name="password" value="" size="20" maxlength="11" required>
</p>
<p>
性别：<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
<p>
特长：<input type="checkbox" name="hobby" value="sleep">入眠快
<input type="checkbox" name="hobby" value="eat">吃饭快
<input type="checkbox" name="hobby" value="leg" disabled>腿特长
</p>
<p>
路线：<select name="path" size="1">
<option value="1">上路</option>
<option value="2">中路</option>
<option value="3">下路</option>
<option value="4">打野</option>
<option value="5">辅助</option>
</select>
</p>
<p><input type="button" value="按钮"></p>
<p><textarea name="textarea" cols="100" rows="10"></textarea></
