typora-copy-images-to: img
学前了解
1.浏览器
5大常见浏览器：
IE浏览器、谷歌浏览器、火狐浏览器、Opera浏览器、Safari浏览器
| 5大浏览器图示 |
|---|
 |
多学一招：360浏览器不算主流浏览器，因为360浏览器用的是IE浏览器的内核。浏览器的内核相当于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面
2.快捷键
| 按键 | 作用 |
|---|---|
| ctrl + c | 复制 |
| ctrl + v | 粘贴 |
| ctrl + x | 剪切 |
| ctrl + f | 搜索 |
| ctrl + s | 保存 |
| ctrl + a | 全选 |
| ctrl + z | 撤销 |
| ctrl + y | 反撤销 |
| ctrl+n | 新建 |
| F2 | 重命名 |
| win + e | 打开我的电脑（计算机/此电脑） |
| win+d | 返回桌面 |
| win+l | 锁屏 |
3.文件名
文件名由基本名和扩展名（后缀名）组成，例：123.txt基本名是123，扩展名是txt
后缀名代表文件的类型，例如：txt是文本，jpg是图片，doc是word文档
文件扩展名不显示：
| win7解决图示 |
|---|
 |
| win10解决图示 |
|---|
 |
认识html
引子：在地址栏输入www.itcast.com，在敲回车的时候，网页加载出来，页面中的内容并没有存在我自己的计算机上，内容是从服务器（远程计算机）传过来的，传送的是什么？就是html
| 客户端和服务器交互图示 |
|---|
 |
1.概念
HTML（英文Hyper Text Markup Language的缩写），超文本标记语言。
说白了HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释
超文本： 在文本文件里面除了基本文本之外还含有图片，音频，视频的内容
标记：特殊符号作为的一个记号
2.作用
编写网页
3.查看网页的html
在网页空白处点击右键-->查看网页源代码：
| 网页源码图示 |
|---|
 |
4.html的基本结构
HTML有固定的基本格式，就跟我们书信有基本的格式是一样的
<html>
<head>
<title>页面的标题</title>
</head>
<body>
这里写内容
</body>
</html>
| html基本结构图示 |
|---|
 |
5.制作第一个网页
新建文本文档（记事本），写入如下内容
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页，怎么样，厉害吧！
</body>
</html>
将文件的后缀名改为html
双击（默认会使用浏览器）打开
| 第一个网页效果 |
|---|
 |
编辑器介绍
Dreamweaver、Sublime、Editplus（notepad++）、phpstorm、NetBeans
| 常用编辑器图示 |
|---|
 |
Dreamweaver：简称DW，适合html+css开发，优点：代码提示比较好，缺点：打开速度慢，收费
EditPlus：小型的编辑器，优点：打开速度快，缺点：代码提示需要手动设置，做大型项目不太方便
Sublime：适合javascript开发，优点：快捷操作比较方便，打开速度比较快
phpstorm和NetBeans适合php开发
Dreamweaver介绍
1.站点
一个网站由很多网页组成，还包括图片等资源，为了方便管理，将这些资源放在一个文件夹里面，这个文件夹就是站点
2.在Dw中新建站点
手动创建一个文件夹
脚下留心：DW创建的站点其实就是创建了编辑器和文件夹的关联，DW可以创建多个站点，删除站点就是将编辑器和文件夹的关联删除了，不会删除文件夹
3.使用DW
新建html文件
多学一招：DW中快捷键F12是预览网页
4.浏览器设置
多学一招：如果在dw的设置中无法添加浏览器，则可以从注册表中添加
| 从注册表中添加DW浏览器图示 |
|---|
 |
然后在注册表中依次打开HKEY_CURRENT_USER--->Software--->Adobe--->Dreamweaver CS6--->Browser Launch Menus ，然后编辑即可，如下图
| 注册表图示 |
|---|
 |
注释
概念：我们在看书的时候，可以在书上看到注解，我们写代码也需要做一些备注----浏览器不解析的标签
作用：给程序员做提示，提示开发人员或者便于开发人员理解和阅读
语法：<!--注释的内容-->
<html>
<head>
<title>我的网页</title>
</head>
<body>
这是我的第一个网页，怎么样，厉害吧！
<!--这是主体内容-->
</body>
</html>
| 注释图示 |
|---|
 |
常见的标记
| 报纸图 |
|---|
 |
1.标题
一级标题：<h1></h1>
二级标题：<h2></h2>
...
六级标题：<h6></h6>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<h2>第一个网页</h2>
<h3>第一个网页</h3>
<h4>第一个网页</h4>
<h5>第一个网页</h5>
<h6>第一个网页</h6>
这是我的第一个网页，怎么样，厉害吧！
</body>
</html>
| 标题效果 |
|---|
 |
脚下留心：
1.标题都是加粗的，数字越大，字体越小，数字最大为6
2.在DW中通过快捷键ctrl+数字可以直接创建标题标签
3.标题标签在SEO搜索引擎中权重比较大
多学一招：
SEO：（Search Engine Optimization）：汉译为搜索引擎优化
我们在搜索引擎中搜索东西，会出来很多网页，我们习惯点击排名靠前的链接，也就是说一旦这个网页排名靠前了，那用户量就会增多，网站就有价值了，网页的点击率和流量就都有了。如何才能让网页排名靠前呢？就是要讨好搜索引擎。提升网页在搜索引擎中的排名就是搜索引擎优化。
如何优化：
1、花钱(竞价排名)买关键字 见效快，花钱多（买点击量，点完次数就不会靠前了）
2、让页面更加规范，语义更加明确（在合适的地方使用合适的标签），搜索引擎更喜欢
3、发外链，在贴吧、论坛等地方发网站的链接
2.排版标记
a) 段落标记：<p></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>2019年全国两会来了。回顾2013-2018年全国两会，习大大先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。</p>
<p>十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。</p>
</body>
</html>
| 段落标记效果图 |
|---|
 |
b) 水平线：<hr>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
2019年全国两会来了。回顾2013-2018年全国两会，习大大先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。
<hr />
十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。
</body>
</html>
| 水平线效果图 |
|---|
 |
c) 换行：<br>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
今天<br />明天<br />后天
</body>
</html>
| 换行标签图 |
|---|
 |
3.字体标记
a) 粗体：<b></b>
b) 斜体：<i></i>
c) 下划线：<u></u>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<b>加粗的字</b>
<i>倾斜的字</i>
<u>带有下划线的字</u>
</body>
</html>
| 字体标记效果图 |
|---|
 |
4.强调标记
a) 强调标记，通过加粗来强调：<strong></strong>
b) 强调标记，通过斜体来强调：<em></em>
c) 强调标记，通过下划线来强调：<ins></ins>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<strong>加粗的字</strong>
<em>倾斜的字</em>
<ins>带有下划线的字</ins>
</body>
</html>
| 强调标记效果图 |
|---|
 |
脚下留心：
- 字体标记和强调标记都能实现视觉效果，但含义是有区别的，强调标记在SEO（搜索引擎优化）的角度，权重更高
- 强调标签具有语义化，语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前
小案例：
| 小案例效果图 |
|---|
 |
分析：
1.一个大标题
2.一个小标题
3.一个分割线
4.三个段落
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>中央气象台发暴雨蓝色预警 东北局部地区有大暴雨</h1>
<h6>2018-08-23 06:07:00 来源：中国新闻网（北京）</h6>
<hr />
<p>(原标题：中央气象台发布暴雨蓝色预警 东北局部地区有大暴雨)</p>
<p>中新网8月23日电 中央气象台8月23日06时发布暴雨蓝色预警：</p>
<p>预计8月23日08时至24日08时，黑龙江东北部、吉林中东部、辽宁东部、云南西南部、贵州中部、重庆南部、福建西北部和东南部以及台湾岛等地的部分地区有大到暴雨，其中，吉林东南部、辽宁东部、贵州中部以及台湾岛东部局地有大暴雨或特大暴雨(250~300毫米)；上述部分地区伴有短时强降水(小时雨量20~50毫米，最大可达60毫米以上)，局地有雷暴大风等强对流天气。</p>
</body>
</html>
标签的属性
1.标签的分类
双标签：成对出现的标签叫双标签，内容写在标签中间-----><p>段落</p>
单标签：单个的标签叫做单标签，没有内容只有属性-----><hr>
2.属性
- 每个标签都有自己的属性（特性）-----单标签和双标签都有属性
- 一个标签可以有多个属性
- 每个属性都有对应的值，值要用引号引起来（单引号和双引号都可以）
- 属性之间使用空格隔开
- 属性没有顺序
3.属性的使用
语法：<标签名 属性1="值1" 属性="值2"></标签名>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<font size="7" face="叶根友毛笔行书2.0版" color="red">字体标签</font>普通文字
</body>
</html>
效果
这个字体ie可以识别
列表
1.无序列表
| 无序列表图示 |
|---|
 |
| 标签名称 | 无序列表标签 |
|---|---|
| 标签 |
|
| 属 性 | Type 设置列表项目符号样式 circle - 空心圆 square - 正方形 disc - 实心圆（默认） |
| 描 述 | 注意： 1. 列表项里面至少有一个li标签（至少1一个，可以写N个） 2. 写无序列表必须写ul 3. 内容必须写在li标签内 说明： 列表项目结构中没有先后顺序的列表，称之为：无序列表 |
ul：代表标签的模块，范围
li：代表列表的每一项
<ul>
<li>丹麦国家队暂时"解散"！足协征召业余球员组队参赛 </li>
<li>世界足坛最惨之人出炉!只有他欣赏不了梅西的演出</li>
<li>当卢卡库的"大笨钟"晃过门将时，真以为是大罗来了 </li>
<li>C罗又美黑!甲板上拥翘臀女友入眠 他如今是CR5.5?</li>
<li>揭C罗不坐尤文大巴之谜 葡总理:他是全国的荣耀! </li>
<li>巴萨官推:梅西就是最佳 真坑!1月要赴美踢西甲</li>
</ul>
| 效果图 |
|---|
 |
注意：ul标签的直接子元素必须是li标签，li标签是放置列表的容器，可以放任何东西
2.有序列表
| 有序列表图示 |
|---|
 |
链接：https://help.aliyun.com/document_detail/59210.html?spm=a2c4g.11174283.6.546.7c9f2c42lW17FQ
| 标签名称 | 有序列表标签 |
|---|---|
| 标签格式 |
|
| 属 性 | Type 设置列表项目编号样式： A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字（默认） |
| 描 述 | 注意： 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母，超过26个字母，会以aa,ab,ac这样的规律递增 说明： 列表结构中有先后顺序并且可以设置项目编号为（1,2,3或者a、b、c）的列表，称之为：有序列表 |
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
| 效果图 |
|---|
 |
3.自定义列表
| 自定义列表图示 |
|---|
 |
| 标签名称 | 定义列表标签 |
|---|---|
| 标签格式 |
|
| 属 性 | |
| 描 述 | 注意： 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明： 不仅仅是一列项目，还是项目标题和项目描述/注释的组合 |
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>特色服务</dt>
<dd>F 码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
</body>
</html>
| 效果图 |
|---|
 |
注意：dl是列表模块，dt是列表的标题，dd是标题的补充说明，dl和dd是并列的标签
超链接
标记：<a></a>
target（目标属性）：
_blank：跳转到一个新的窗口页面
_self：在原页面的窗口中打开新页面
title：当鼠标悬浮到链接上的时候，显示title属性的值
<a href="#" title="锄禾日当午，汗滴禾下土。">锄禾日当午</a>
| 效果 |
|---|
 |
1.内部链接
在同一个站点内页面间跳转-------在自己电脑本地进行跳转
| 示例图 |
|---|
 |
在本地文件之间跳转
2.外部链接
跳转到其他网站的链接
| 示例图 |
|---|
 |
注意：如果跳转外网页面，例如：百度、新浪等，必须要加http://-----协议
3.下载链接
链接跳转到一个浏览器无法打开的文件时，就会自动出现下载界面
<a href="科比.pptx">打开ppt</a>
| 点击效果 |
|---|
 |
4.锚点链接
| 示例图 |
|---|
 |
链接：https://baike.baidu.com/item/刘德华/114923?fr=aladdin
语法：
<a href="#目标名">去目标地点</a>
<标签名 id="目标名">目标地点</标签名>
在需要跳转的地方添加一个锚点
| 示例图 |
|---|
 |
点击超链接，跳转到指定的锚点处（id）
| 示例图 |
|---|
 |
路径
1.相对路径
相对于当前的文件的地址，从当前文件出发去找目标
当前文件和目标文件在同一个站点中
| 示例图 |
|---|
 |
当前文件和目标文件所在目录同级
| 示例图 |
|---|
 |
前面省略了./，代表当前文件所在的文件夹下
| 示例图 |
|---|
 |
当前页面的上级目录和目标文件同级
| 示例图 |
|---|
 |
../代表当前文件的上一级目录下
| 示例图 |
|---|
 |
2.绝对路径
c:\face.txt，以盘符开头，从计算机出发去找目标
| 示例图 |
|---|
 |
图片标签
语法：<img src='图片的源' alt='' title='' width='' height='' />
src：图片的地址
alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上
title：当鼠标放到图片位置的时候显示提醒性文字。
<img src="1.png" title="这是卡哇伊" />
<img src="2.png" alt="这是猫咪" />
| 效果图 |
|---|
 |
其他
pre标签
预排版标签：<pre></pre>
<pre>
上
左 右
下
</pre>
| 效果图 |
|---|
 |