一、HTML基础标签
什么是HTML?
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言: HyperText Markup Language; HTML 不是一种编程语言，而是一种标记语言;
HTML 使用标记标签来描述网页, HTML 文档包含了HTML 标签及文本内容; HTML文档也叫做 web 页面;
HTML 标签是由尖括号包围的关键词，比如 <html>,HTML 标签通常是成对出现 的，比如 <b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签,开始和结束标签也被称为开放标签 和闭合标签
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<title> 元素描述了文档的标题，即网页名
<body> 元素包含了可见的页面内容，主体内容；
<h1> 元素定义一个大标题
<p> 元素定义一个段落
基本标签：
标题标签：<h1>~<h6>,标题大小依次递减， 例：<h1>静夜思</h1>
段落标签：<p></p> 例： <p> 床前明月光</p>
换行标签：<br/> 特别的单个标签 ； 例：疑是地上霜 <br/>
水平线标签：<hr/> 特别的单个标签 ；
斜体标签：<em>李白</em>
字体加粗：<strong> 李白 </strong>
图片标签：<img src="img/logo.jpg" alt="图面出错了" width="500px" " height="500px" title="请点击我">
超链接标签：<a href="链接地址或者文件路径" target="目标窗口位置">文本或图像</a>
1.页面间链接 ，<a href="链接地址或者文件路径" target="目标窗口位置">文本或图像</a>
例：
<a href="https://weibo.com" target="_self">本窗口跳转到新浪微博界面</a>
<a href="https://weibo.com" target="_blank">新窗口跳转到新浪微博界面</a>
2.锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记
例：
<p><a href="help.html#login" >用户登录</a> <a href="help.html#register" >用户注册</a></p>
<a name="login">登录 <a name="register">注册
这里是跳到名为help.html文件下标签login登录处和register注册处，
3.功能性链接例：<a herf="mailto：邮箱地址“>热点文本或图片</a>
注释和特殊符号
| 特殊符号 | 字符实体 | 实例 |
| 空格 | | <a href="#">百度</a> |
| 大于号(>) | > | 如果时间>晚上6点，就坐车回家 |
| 小于号(<) | < | 如果时间<早上7点，就走路去上学 |
| 引号(") | " | W3C规范中，HTML的属性值必须用成对的"引起来 |
| 版权符号@ | © | ©2003-2013北大青鸟 |
引入视频元素：
普通结构：<video src="视频路径"controls></video>
多种选择格式的写法：<source src="视频路径.mp4" type="类型说明"/>
<video controls autoply>
<source src = "../video.webm">
<source srv = "../video.mp4">
</vidoe>
注：autoply提供自动播放功能，controls提供开始，暂停，音量控制等控件，也可以继续加上width=“宽度”属性，他会自己匹配高度
引入音频元素：
<audio src="音频路径"controls></audio>
<audio controls auqutoply>
<source src="../music.mp3">
<source src="../music.ogg">
</audio>
HTML的结构元素
| 元素名 | 描述 |
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
CSS :层叠样式表
一，内部样式表 ：<style>.......</style>
（注：一般在头部head范围内定义style来设置下面的格式）
（CSS注释：/* */）
1.标签选择器:
<style>
h1{ 标签
font-size:20px; 属性，值
color:red;
}
</style>
例： 使用：<h1>床前明月光</h1> ：直接引用
2.类选择器：
<style>
.red{ //创建一个类选择器
color:blue;
}
</style>
使用： <h1 class="red">床前明月光</h1> ：标签后调用类名可引用， 可重复引用
3.ID选择器：
<style>
#greed { //创建一个ID选择器
color:greed;
}
</style>
使用： <p id="greed">床前明月光</p> ：标签后调用ID名可引用 但ID只能引用一次
二：内联样式： <p style="color=yellow;">文本内容</p>
三：外部样式表：
创建一个css文件，把样式在头部head范围内导入到这个文件中 <link rel="stylesheet" href="该样式文件路径"/>