一. HTML5
Chapter01基本概述
1.网页
1.1什么是网页
网页常以.htm或.html后缀结尾文件，因此将其称为HTML文件。
1.2什么是HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
不是一种编程语言，是标记语言。
1.3 网页的形成
前端人员开发代码
浏览器显示代码/解释渲染
生成最后的Web页面
1.4总结
网页时图片、链接、文字、声音、视频等元素组成 其实就是一个html文件(后缀名为html)
2.常用浏览器
浏览器是网页显示、运行的平台。
常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safar和Opera等。【五大浏览器】
谷歌浏览器必备
浏览器内核
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
3.Web标准（重点）
Web标准是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合。
3.1为什么需要Web标准
浏览器不同，他们显示页面或者排版有些许差异。
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
3.2Web标准的构成（面试提问）【重点】
主要是包括结构、表现、行为三方面
结构：对网页元素进行从整理分类（HTML现阶段）
表现：排版、颜色、大小等外观样式（CSS）
行为：网页模型的定义及交互的编写（JavaScript）
== == == == == == == == == == == == ==
Web标准提出的最佳体验方案：结构、表现、行为相分离
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
Chapter02HTML标签(上)
学习目标
- 标签书写注意规范
- HTMl骨架标签
- 超链接标签
- 图片标签和alt和title区别
- 相对路径三种形式
1.HTML语法规范
1.1基本语法概述
- HTML标签由尖括号包围的关键词，例如
- 成对出现，双标签(开始标签)(结束标签)
- < br / > 单标签
1.2标签关系
包含关系和并列关系
//包含关系
<head>
<title></title>
</head>
//并列关系
<head></head>
<body></body>
2.HTML基本结构标签
2.1第一个HTML网页
每一个网页都会有一个基本的结构标签（骨架标签）
HTML网页也成为HTML文档
2.2基本结构标签总结
<html>//标签 页面中最大的标签
<head>//头部标签（在head标签中 必须要设置的标签是title）
<title>我的第一个页面</title>//网页标题
</head>
<body>//主体 包含文档的所有内容
你我之间，黑马洗练
</body>
</html>
3.网页开发工具VS Code
Visual Studio Code
WebStorm 10
H Builder
Dw cs6
...
3.1 Visual Studio Code的使用
- Ctrl + N 新建文件
- 保存文件.html文件
- ！（建立骨架）
- Ctrl + （加号）/（减号） 放大缩小试图
- 【Alt + B】/右键，点击“Open Default Browser”【默认浏览器打开】 利用插件在浏览器中预览页面
3.2 VS Code 插件安装
安装插件后需要重启
3.3 VSCode 工具生成骨架标签新增代码
-
< !DOCTYPE html >
文档类型声明，哪个版本的HTML版本来显示网页
< !DOCTYPE html >//当前页面采取HTML5版本来显示网页
声明位于文档最前面，不是一个HTML标签，是文档类型声明标签
- < html lang=" "> lang语言种类
en定义语言为英语（英文网页） zh-CN定于语言为中文（中文网页） fr 法文网页
- < meta charset="UTF-8" > [字符集]
通过< meta >标签的charset属性来规定HTML文档字符编码
charset常用的值：GB2312（简体中文）、BIG（繁体中文）、GBK（简体、繁体中文）和UTF-8
UTF-8：万国码【常用】 ### 4.HTML常用标签
4.1标签语义
4.2标题标签< h1 >-< h6>
1~6级标签
< h1 > 一级标题标签 < /h1>
head 的缩写
4.3段落标签和换行标签
< p> 我是一个段落标签< /p>
文本会根据浏览器窗口大小自动换行
段落之间有空隙
< br />
单标签 强制换行
和换行不一样 没有空隙 只是另起一行
4.4练习 小短文改页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪体育</title>
</head>
<body>
<h1>女篮世界杯前瞻:中国队小组赛前两战不容有失</h1>
<p> 北京时间9月21日消息，2022年女篮世界杯将于明天在澳大利亚的悉尼开赛，中国女篮首战将于明天下午15：30对阵韩国队。
根据赛制，12支参赛队分为两个小组，每组6支球队进行单循环小组赛，前四名晋级1/4决赛。
中国女篮与比利时、波黑、波多黎各、韩国、美国分在A组。B组的6支球队分别是：法国、塞尔维亚、日本、马里、加拿大和澳大利亚。</p>
<p> 从中国队的赛程可以发现，五场小组赛基本呈现了由易入难的趋势，因此，前两场小组赛对阵韩国和波黑绝对不容有失，
第三场对阵美国取胜的可能性比较低，如果能顺利击败波多黎各，那么中国女篮很有可能在最后一场小组赛和比利时队直接争夺小组第二的排名。</p>
<p> 中国女篮近几年逐渐完成新老交替，这批队员已经到了出成绩的时候，其实我们不需要太担心小组赛的排名，因为B组的情况更加复杂。</p>
<p> 法国、塞尔维亚、日本和澳大利亚四强难分伯仲，中国女篮在东京奥运会上正是负于塞尔维亚队无缘四强，
法国是东京奥运会季军，日本队是亚军，而澳大利亚队的纸面实力摆在那里，还是主场作战，因此，
1/4决赛碰上这四队中的任何一队都不会轻松，但中国队也都有战胜对手的可能，关键还在于姑娘们的临场发挥，可以说本届世界杯从1/4决赛开始每一场比赛都是决战。</p>
<p> （勿忘初衷）</p>
<strong>声明：新浪网独家稿件，未经授权禁止转载！</strong>
</body>
</html>
4.5 文本格式化标签
重点记住加粗和倾斜
4.6.< div>和< span>双标签
没有语义，用来装图片和文字的“盒子”
div是division缩写，表示分割、分区。（大盒子，独占一行）
span意为跨度，跨距 （小盒子，一行放多个）
4.7图像标签和路径
4.7.1 图像标签
在HTML标签中，< img>标签用于定义HTML页面中的图像，
< img src="图像URL" />//“ ”内为图片文件名
src是< img>标签的必须属性，用于指定图像文件的路径和文件名
图片必须放在网页文件的文件夹中
图像标签的其他属性
图像标签属性注意事项
4.7.2 路径（前期铺垫知识）
（1）目录文件夹和根目录
目录文件夹->根目录
(2)相对路径和绝对路径
4.8 超链接标签(重点)
4.8.1链接的语法规范
< a href="跳转目标" target="目标窗口的弹窗方式">文本或图像< /a>
4.8.2链接分类：
4.9锚点链接
先编写
后定位
4.10练习 图片、链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猫舍</title>
</head>
<body>
<a href="#cat">小猫的世界</a><br />
<h1>欢迎进入小小猫舍^—^</h1>
<img src="小猫.jpg" title="这是小小猫咖的喵~" width="500" />
<h4><a href="小猫.jpg" target="_blank">猫舍入口</a></h4>
<h4><a href="#">小猫1号</a></h4>
<h4><a href="http://www.baidu.com"><img src="小猫.jpg" width="100"/</a></h4>
<h3 id="cat">小猫的世界</h3>
</body>
</html>
