目标：
1，什么是html？
2，html常用标签
3，文本类标签&特殊符号
1，什么是html?
#1，英文名字：HyperText Markup Language
中文名字：超文本标记语言
超文本：不光有普通文本，还有图片，视频，音频，。。。
标记：使用带尖括号“<>”的标记，将网页中的内容逐一标识出来；这个带简括的标记也叫做标签。
#2，用来设计网页的一门标记语言
#3，后缀名是*.html或者*.htm
#4，由浏览器来解析执行
#5，页面中可以引入脚本语言例如js，也可以引入样式文件（css文件）
html标准结构(html和人很像，有一个头和一个身体)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题，网页的名字，显示在页签栏上</title>
</head>
<body>主要内容</body>
</html>
【注：】
1,<!DOCTYPE html>html5声明 ，声明文件类型是html，告诉浏览器是什么类型的文件
2，<meta charset="utf-8" /> 防止网页乱码的
3，/:标签结束的标志
2，html常用标签【常用标签放在里】
#1，标题标签<hn></hn> n表示1-6，其中h1最大，h6最小；
例如：
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
#2，段落标签<p></p>标签表示一段话，没有特殊的效果
例如：
<p>我表示一段话</p>
#3,图片标签<img>
语法：
<img src="图片的地址" width=“数字” height=“数字”/>
例如：
<img src="1.jpg" />
【注意】这里的图片要和你的html页面在同一个目录下，否则会出现错误，如下图裂的情况
页面显示效果：
图片属性：
1，width=“数字” 设置图片的宽度，这里的数字表示像素
2，height=“数字” 设置图片的高度，这里的数字表示像素
例如：
<img src="1.jpg" width="100" height = "100" />
页面显示效果如下：
【ps：尽量不要使用width和height缩放图片，详情见后续优化】
#4，超链接 <a>标签
语法：
<a href="跳转的地址" target="_self/_blank">内容/图片</a>
属性：
1，打开方式 target
_self:默认值，默认在自身打开
_blank:空白页 也就是在新页签打开链接
例如：
<a href="https://www.baidu.com">点我去百度</a>
<a href="https://www.baidu.com" target="_blank">点我去百度</a>
<a href="https://www.taobao.com" target="_blank">
<img src="1.jpg" />
</a>
<a href="1.html">点我去1</a>
【注意】1.html需要跟你的html同级
#5,分区标签<span>和<div>
行内分区：<span></span>修饰一行中的一个或者一部分：
例如：
一周排行<span style="color:red;">榜</span>
显示效果如下：
块分区：<div></div>常用于页面布局，给网页分块用的；
例如：
<div class="box">
<div class="header">这是头部</div>
<div class="main">这是主体部分</div>
<div class="footer">这是底部</div>
</div>
3，文本类 标签&特殊符号
#1，文本类标签：
加粗：<b></b> <strong></strong>
倾斜：<i></i> <em></em>
下划线：<u></u>
删除线：<s></s> <del></del>
放大：<big></big>
缩小：<small></small>
上标：<sup></sup>
下标：<sub></sub>
例如：
正常文本
<br/>
<b>加粗文本</b>
<strong>加粗文本</strong>
<br/>
<i>倾斜文本</i>
<em>倾斜文本</em>
<u>下划线文本</u>
<s>删除线</s>
<del>删除线</del>
<big>
<big>
<big>放大</big>
</big>
</big>
<small>缩小</small>
2<sup>3</sup>
x<sup>y</sup>
唧唧复唧唧<sub>①</sub>
【注：】<br/>强制换行
#2，特殊符号
大于：>
小于：<
空格：
版权：©
【注：】
#1，大于小于一般与pre标签搭配使用做文档
#2，版权©一般用在网页底部，声明网站版权的，例如淘宝和百度底部如下图所示：
#3，预格式<pre>
pre标签是有格式的缩进，保留源文档种的格式，即保留原来的换行和文本种的空白一般与大于小于特殊符号做文档用（比如w3school文档），例如：
<pre>
<p>我是一段话</p>
</pre>
页面中的显示：
由上述所学标签可以总结如下：
【标签按照显示效果分为两类】
行标签：显示效果并排在一行。
例如：a img 文本类标签 span
块标签：显示效果单独占一行，默认宽度是100%；
例如：body h1-h6 p div
【标签嵌套规则】
行标签只能嵌套行标签；
例如：
<a href="https://www.taobao.com" target="_blank">
<img src="1.jpg" />
</a>
块标签既能嵌套块标签，也能嵌套行标签
例如：
<body>
<p>我表示一段话</p>
<img src="1.jpg" />
</body>
ok，今天的内容到这里就结束了，希望和大家互相交流学习，再见。
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
