初识HTML
什么是HTML(Hyper Text Markup Language)
HTML：**超文本标记语言(Hyper Text Markup **Language)
**超文本：**超越了文本、不仅仅是文本。除了文本外还包含图片、链接，甚至音乐、程序等非文字元素。
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
一般来讲编程语言都拥有选择和循环结构。
HTML使用标签描述网页中图片、文本、音乐、视频、超链接等
XML：(eXtensive Markup Language)可扩展的标记语言。
**XML和HTML区别：**我们的XML它是可以随意在文件中定义自己的标记，但是HTML它的标记都是官方定制的语法，无法自定义。XML的宗旨是用来传输数据，HTML是用来在网页中描述信息。
扩展名为.htm和.html。
md markdown 一种文件格式，程序员必会！它支持一些标记语法，甚至支持HTML。
HTML的发展史
-
W3C和WHATWG
W3C（万维网联盟） 国际性的中立的技术标准组织，它维护了很多技术的标准，HTML、XML、XHTMTL、CSS、JavaScript…等都是由它维护标准的。
WHATWG（网页超文本应用技术工作小组）主流的浏览器公司：欧朋、Mozilla、苹果、微软…
WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML（可扩展标记记语言下的一个子集）技术。WHATWG邮件列表公布于2004-6-4 , 在Opera–Mozilla宣布加入后的2天 便否决了由万维网联盟（W3C）成员在W3C工作室的Web标准
2007-7-10 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5，将新的HTML（标准通用标记语言下的一个应用）命名为"HTML5".2007-4-7, 新的HTML工作组采纳了他们的建议。
2019年6月的一份新闻稿中，W3C 和 WHATWG 宣布，他们终于把他们的分歧放在一边，并签署了一份新的谅解备忘录。
根据这份新协议，W3C 正式发布未来的 HTML 和 DOM 标准，并支持 WHATWG，将控制权完全交还给浏览器厂商。
取而代之，W3C 及其数百名成员将起草未来的 Web 标准需要包含什么特性的“建议”。然后，WHATWG 将决定把哪些加入到他们的产品中。当前由 WHATWG 维护的 HTML Living Standard 将成为 HTML 标准的官方版本。DOM Living Standard 也是如此。
HTML基本标签
快捷输入标签：输入标签名，按Tab键
Ctrl+D快速复制一行
| 名称 | 标签 | 示例 |
|---|---|---|
| 标题标签 | <h1>~<h6> | <h1>静夜思<h1> |
| 段落和换行标签 | <p>…</p>、<br/> | <p>床前明月光<br/>疑是地上霜</p> |
| 水平线标签 | <hr/> | <hr/> |
| 斜体 | <em>…</em> | 举头望明月 |
| 字体加粗 | <strong>…<strong> | 低头思故乡 |
<!-- Document Type 声明 声明格式和HTML标准版本 -->
<!DOCTYPE html>
<!-- 根标签 固定的结构组成 -->
<html>
<!-- 头标签：一般在头标签中编写大量的网页配置信息 -->
<head></head>
<!-- 体标签：一般情况下网页中显示的超文本内容都是在其中定义的 -->
<!-- 这里是定义HTML用什么编码 -->
<meta charset="UTF-8"/>
<!--Keywords：关键字列表
Description：网站描述-->
<meta name="Keywords" content="HTML,网页,关键字"/>
<meta name="Description" content="这里是一个描述。"/>
<!-- 网页标题 -->
<title>首页</title>
<body>
Hello HTML!
</body>
</html>
标题标签
<!-- h1~h6 标题一(最大的)...标题六(最小的) -->
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!-- 水平线，可以不写参数 -->
<hr width="200px" align="left">
<p>
<em>人生得意须尽欢，</em><br/>莫使金樽空对月。
</p>
<p>
天生我材必有用，<br/>千金散尽还复来。
</p>
</body>
Web前端开发常用IDE：Sublime Text3、HBuilder X、HBuilder、WebStorm、VSCode、DreamWeaver…
标黑的是企业开发比较常用的
图像标签
常见图片格式：jpg、gif、bmp、png
<body>
<img src="图片路径" alt="替换文本" width="x" height="y"/>
</body>
…/ 返回上一级目录
alt 图片不能正常显示才出现
超链接
<body>
<a href="链接地址" target="目标窗口位置">文本或图像</a>
<body>
target：
_self: 自身窗口打开
_blank: 新建窗口打开
超链接的应用
1、页面间连接：A页到B页，网上常见链接
<a href="index1.html" target="_blank" title="点我跳啊">跳转到下一页</a>
<!--文字这里也可以嵌套图片-->
<a href="index1.html" target="_blank" title="点我跳啊"><img src="../../05-图片标签/img/001.png"/></a>
2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记
加标志位
<a href="#login">用户登录帮助</a>
# 跳转到本页指定位置
<a name="login">用户登录帮助</a>
# 跳转到其他页面指定位置
<a href="help.heml#login">用户登录帮助</a>
3、功能性链接：电子邮件、QQ、MSN等链接
<a href="mailto:zhangsan@163.com">给站长写信<a>
注释和特殊符号
| 特殊符号 | 字符实体 |
|---|---|
| 空格 |  ； |
| 大于号(>) | >； |
| 小于号(<) | <； |
| 引号(“) | " ； |
| 版权符号@ | ©； |
W3C标准(World Wide Web Consortium, 万维网联盟)
规范（很重要）
- 标签名称、属性名称必须小写
- 标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
- 属性值必须用引号引起来
视频标签
传统插入方式
<video src = "视频路径" controls/></video>
根据浏览器兼容性来选择视频
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
<!--
controls 提供播放、暂停和音量的控件
autoplay 自动播放
width 宽度
height 高度
loop 循环播放
-->
<video controls autoplay loop width="500" height="500">
<source src = "视频路径" type="视频格式"/>
<source src = "video/video.webm" type="video/webm"/>
<source src = "video/video.mp4" type="video/mp4"/>
</video>
音频标签
<audio controls>
<source src = "music/music.mp3" type = "audio/mpeg"/>
<source src = "music/music.ogg" type = "audio/ogg"/>
</audio>
页面布局分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
| div | 独立区域 |
<body>
<header>
<h2>网页头部<h2>
</header>
</section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部<h2>
<footer>
<div>
<ul>
<li>无序列表</li>
</ul>
</div>
</body>
CSS
层叠样式表(Cascading Style Sheet)
CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS语法规则
标签选择器
选择器{声明1；
声明2；
声明3；
……
}
h1{
font-size：12px;
color:#F00;
}
h1:选择器
font-size:属性
12px:值
color:#F00; 声明
所有的这些标签会使用统一的样式。
类选择器
/* 声明时要写“.” */
.red{
color:read;
}
<h1 class="red">xxxx</h1>
<p class="red">xxx</p>
可多次使用
CSS注释：/* */
ID选择器
/*名字要见名知意*/
#green{
color:#00ff00;
}
<p id="green"></p>
规范只能使用一次且优先级最高
颜色：可以写英文，也可以写十六进制数
如：ff 00 00 代表RGB
- R：red
- G：green
- B：blue
网页中引用CSS样式
-
内联样式表
/*一般不推荐的写法，不利于复用，耦合性高*/ <p style=""></p> -
内部样式表
<style></style> -
外部样式表
新建一个css文件（.css）
把样式写到css文件中，谁想用就调用即可
/*链接式*/ <link rel="stylesheet" href="样式文件的路径"> /*导入式*/ <style> @import "css/types.css"; </style>链接式和导入式的区别
<link/>标签数据XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。
推荐使用link结构先加载样式
优先级：
三种引入方式的优先级：**行内样式表优先级最高 > 内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的，后面的相同设置会覆盖前面的)
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
