目录
HTML5作用
构造出网页的基础结构，修饰美化用css，多功能更加高级的操作用js。
HTML5的文件结构
<!DOCTYPE html>
<html>
<head> //
<meta charset="utf-8"> //utf-8编码方式占用空间小，且适用于所有语言
<title>文档标题</title>
</head> //头部
<body> //
文档内容......
</body> //主体
</html> //代码由各种标签组成
重要标签
1.标题h1-h6
<h1>标题内容</h1> //一级标题 一个
<h2>标题内容</h2> //二级标题
<h3>标题内容</h3> //三级标题
2.段落p
3.段内换行br， 空格字符 ；
<br/> //单标签
<p>这是一个段落但是在 中间就能换行，<br/>因为使用了br标签</p>
4.预留格式标签pre
<pre> 保留了 原 格式； 适合显示计算机 代码 </pre>
5.行内组合span
6.水平线hr（单标签）
7.注释
ctrl+/ 多行注释
8.超链接a
<a href="网址链接">文字或图片</a>
<a href="#" target="_blank">文字或图片</a>//空链接
<p><a href="网址链接" target="_self">内容</a></p>
9.图片标签img和路径问题
10.区域div 和无(有)序列表 及 表格
——>div最大的用处是结合css对每个区域进行不同的修饰
——>无序列表ul 有序列表ol
<ul>
<li>苹果</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
——>表格
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>//每行
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- //表格结构是两行三列 快捷键：table>tr*2>td*3 -->
11.表单和表单元素
<form action="表单内的数据将提交的目标网站" post="post">
账号：<input type="text" name="后端获取这个数据时有用">
<br>
密码：<input type="password" name="" hidden>
<input type="submit" value="提交" name="s">
<input type="reset" value="重置">
<input type="file" name="files">
<input type="email" name="names">
<input type="range" name="voice" min="0" max="100">
<input type="search" name="searchs">
<!--
hidden使密码隐藏
file是文件域，可以放文件
email可以验证输入的是否为邮箱格式
range是滑块格式
search为搜索框，最右端有×
-->
<br>
<select name="下拉列表">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<textarea name="文本域" id="" cols="30" rows="10">文本</textarea>
</form>
<!-- 表单区域 -->
11.em和strong（语义化问题）
em：斜体强调（i只有斜体没强调）
strong：加粗强调（b只有加粗没强调）
12.自定义列表dl dt dd
<dl>
<dt>第一级</dt>
<dd>第二级</dd>
<dt>家</dt>
<dd>哥哥姐姐们</dd>
</dl>
13.媒体元素
<video src="" autoplay controls></video>
<audio src="" autoplay controls></audio>
<!--
video：视频
audio：音频
autoplay:自动播放
controls：进度条-->
14.header 和 footer 描述页面的头部跟尾部区域
15.内联框架（网页嵌套网页）
<iframe src="" name="b站" frameborder="0" width="100" height="50"></iframe>
<a href="https://www.bilibili.com/" target="b站">点我去b站</a>
<!--可以实现在一个网页里面嵌套一个网页-->
<!--iframe类似容器-->
网课学习推荐
https://www.bilibili.com/video/BV1x4411V75C?share_source=copy_web.
