1.网页的相关概念
1.1 什么是网页： a. 网页是由HTML语言创建的， b.网页是由文字， 图片， 链接， 音频， 视频等元素组成，c. 网页由浏览器打开， d. 网页展示的是特定的数据 网页也被叫做 html 文件 1.2 什么是HTML文件 超文本标记语言 语言： 浏览器能够认识的语言 标记/标签： <html></html> 超文本： 文本元素， 图片， 链接， 视频...
2.常用的浏览器 5大浏览器： IE， 火狐， 谷歌， safari, opera 浏览器的内核： 渲染引擎。 将我们写的代码转化成网页
3.web标准（重点） 3.1 由谁创建的？ W3C组织制定的一套标准 3.2 由哪三大部分组成： 结构(html)， 表现(css), 行为(javascript) 3.3 web标准的作用： 解决浏览器内核不同所造成的排版的不同， 开发者的代码更加标准和统一。
4.HTML标签(重点)4.1 什么是HTML: 超文本标记语言4.2 HTML的语法规范一规则两类型一规则： HTML的标签包含在'<>'里面 两类型：双标签 <html>内容</html> 单标签 <img>
4.3 HTML标签的关系1.4 HTML骨架标签 <html> // 根标签
<head> // 文档的头部
<title></title> // 文档的标题
</head>
<body></body> // 文档的主体
</html>
5.网页开发工具 vsCode 快捷键： '!' + Tab键
6.DOCTYPE ,lang和字符集（难点） 3.1 <!DOCTYPE html> // 声明文档类型 html5 告诉浏览器我们用的是哪个版本的html 3.2 <html lang="en"> // 'zh-CN' 告诉浏览器我网页内容是以英文来显示的 3.3 <meta charset="UTF-8"> // charset：'字符集' 'UTF-8': 一种编码格式，'万国码' 不加这一句会出现乱码
7.标签语义化 在合适的地方使用合适的标签 目的： 1. 让代码结构更加清晰 2.便于搜索引擎抓取，提高网站流量
8.标题标签<h1></h1> ,<h2></h2> ... <h6></h6> 2.1 作用： 告诉浏览器这是标题 2.2 特点： 是文字变粗，且独占一排 文字逐渐变小,重要性也是如此
9.段落标签和换行标签换行标签：<br>: 使<br>后面的内容换行<p>我是段落标签1</p>
<p>我是段落标签2</p>
<p>我是段落标签3,<br />
我被强制换行了</p>
10.文本格式化标签作用： 强调关键词，有加强的语气 web标准： 结构和样式相分离 我是<strong>加粗</strong>的文字
我是<em>倾斜</em>的文字
我是<del>删除线</del>
我是<ins>下滑线</ins>我是加粗的文字我是倾斜的文字我是删除线我是下滑线
11.html布局标签div和span <div>我是一个盒子，我独占一行</div>
<div>我是另一个盒子，我也独占一行</div>
<span>我是一个口袋，我可以共享一行</span>
<span>我是另一个口袋，我和上面那个span共享一行</span>
12.html图像标签// src: 图片路径(必须)
<img src="img.jpg" />
// alt: 替换文本。图像不能显示时的文字
<img src="img1.jpg" alt="我是替换文本" />
// title: 提示文本。鼠标放到图像上的显示文字
<img src="img.jpg" title="我是提示文本" />
// width: 图像的宽度
<img src="img.jpg" width="500" />
// height: 图像的高度
<img src="img.jpg" height="100" />
// border: 图像的边框
<img src="img.jpg" border="10" />
13.路径13.1 什么是相对路径？ 以引用文件所在位置为参考基础 而建立的目录文件 图片相对HTML文件的位置 1.1.1 同一级路径 <img src="img.jpg" />
1.1.2 下一级路径 <img src="images/img.jpg" />
1.1.3 上一级路径 <img src="../img.jpg" />13.2 什么是绝对路径？ 目录下的绝对位置 1.2.1 盘符路径 <img src="D:\备课\第四节课\img.jpg" />
1.2.2 网络路径 <img src="http://www.itheima.com/images/logo.png" />
14.链接标签 <a></a>作用：从一个页面跳转到另一个页面 <a href="跳转的目标页面路径" target="打开页面的方式">点我实现跳转</a>
target: 默认"_self",在当前页面打开, "_blank": 在新的页面打开
eg: 点击跳转到百度 <a href="http://www.baidu.com" target="_blank">百度</a>链接的分类 1.外部链接
点击跳转到百度 <a href="http://www.baidu.com" target="_blank">百度</a>
2.内部链接 同一个网站内部页面的跳转
<a href="about.html" target="_blank">公司简介</a>
3.空链接#
<a href="#">我是空链接</a>
4.下载链接
页面路径是.exe或者.zip等压缩包形式
<a href="img.zip">下载文件</a>
5.网页元素的链接
链接也可以加在超文本元素上
<a href="http://www.baidu.com"><img src="img.jpg" /></a>
6.锚点链接
快速定位到页面中指定的位置
第一步：href="#文字" <a href="#个人生活">点击去到个人生活</a>
第二步：找到个人生活的标签,添加属性id="文字" <h3 id="个人生活">个人生活介绍</h3>
15.HTML注释标签和特殊符号3.1 注释标签 <!--我是一个没感情的注释标签，我不会出现在页面上-->
3.2 特殊符号 空格， >大于号， < 小于号
| 
收藏
淘帖
踩
