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，空格字符&nbsp；

<br/>  //单标签
<p>这是一个段落但是在&nbsp;中间就能换行，<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类似容器-->