1.乱码问题
<!DOCTYPE html>
<html>
<head>
<!--需要告诉浏览器，网页所采用的编码字符
meta标签用来设置网页的一些元素，比如网页的字符集，关键字，简介
meta是一个自结束标签，编写一个自结束标签中添加一个/
-->
<meta charset="utf-8" />
<title>网页的标题</title>
</head>
<body>
<h1>这是一个非常漂亮的网页</h1>
</body>
</html>
运行结果：↓
2.常用标签
标题标签
在HTML，一共有六级标题标签h1~h6
- 在现实效果上h1最大，h6最小，但是文字的大小我们不关心【使用HTML标签时，关心的时标签的语义，我们使用的标签都是语义化的标签】
- 6级标题中，h1最重要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于收索引擎来说，h1的重要性仅次于title，收索引擎检索完title，会立即查看h1中的内容
- h1标签非常重要，它会影响到页面在收索引擎中的排名。页面中只能写一个h1（若有多个h1会被浏览器当成垃圾网站））
- 一般页面中标题标签只使用h1,h2,h3，h3以后的基本不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常用标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落标签
段落标签，段落标签用于表示内容中的一个自然段
- 使用p标签来表示一个段落
- p标签中的文字，默认会独占一行，并且段与段之间会有一个间距
<p>我是一个p标签，我用来表示一个段落</p>
- 在html中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析
- 在页面中可以使用
<br />标签来表示换行,<br />标签是一个自结束标签
<p>
锄禾日当午，<br />
汗滴禾下土。<br />
谁知盘中餐，<br />
粒粒皆辛苦。<br />
</p>
<hr />
<hr />标签也是一个自结束标签，可以在页面中生成一条水平线
运行结果：↓
3.实体
在HTML中，一些如< >这种特殊字符是不能直接使用的需要使用一些特殊的符号来表示这些特殊字符，这些特殊字符我们称为实体（转义字符串），浏览器解析到实体时，会自动将实体转换为其对应的字符
- 实体的语法：
&实体的名字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实体</title>
</head>
<body>
<!--
< <（小于号）
> >（大于号）
空格
版权符号 ©
……
-->
<!-- a < b > c -->
a < b > c
<p>©今天天 气晴朗，处处好风光</p>
</body>
</html>
运行结果：↓
4.图片标签
使用<img />标签来向网页中引入一个外部图片
- img标签也是一个自结束标签
- 属性:
src:设置外部图片的路径
alt:可以用来设置 在图片不能显示时 ，图片的描述
收索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width:用来修改图片的宽度,一般使用px作为单位
height:用来修改图片的高度，一般使用px作为单位
宽度和高度两个属性如果只设置一个另一个也会同时等比例调整大小，如果两个值同时指定则按照你指定的值来设置【一般开发中除了自适应的页面，不建议使用width和height来设置宽高】（让美工直接改原始图片的大小这样的话可以节省大图片变小图片的空间，也可以提高小图片变大图片的清晰度）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<img src="1.jpg" alt="这是一张风景图" width="200px" />
<!--
<img src="111.jpg" alt="这是一张风景图" /><!--没有这张图片，那个位置出现alt里面的文字- ->
-->
</body>
</html>
运行结果：↓
5.相对路径
src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对路径</title>
</head>
<body>
<!--
src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径
相对路径：
相对路径指的是相对于当前资源所在目录的位置
<img src="1.jpg" alt="这是一张风景图" width="200px" />
<img src="img/2.jpg" alt="这是一张风景图" width="200px" />
<img src="img/img/2.jpg" alt="这是一张风景图" width="200px" />
可以使用../来返回上一级目录，返回几级就写几个../
<img src="../img/1.jpg" alt="这是一张风景图" width="200px" />
<img src="../../img/2.jpg" alt="这是一张风景图" width="200px" />
-->
</body>
</html>
6.图片的格式
- JPEG(JPG)
JPEG支持图片的颜色比较多，图片可以压缩，但是它不支持透明
一般使用GPEG来保存照片等颜色丰富的图片 - GIF
GIF支持的颜色少，只支持简单的透明（直线），支持动态图
图片颜色单一或者是动态图时可以使用gif - PNG
PNG支持的颜色较多，并且支持复杂的透明
可以一同来显示颜色复杂的透明的图片 - 图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
7.meta标签
<meta />标签的作用：
- 需要告诉浏览器，网页所采用的编码字符
- 用来设置网页的一些元素，比如网页的字符集，关键字，简介
- 是一个自结束标签，编写一个自结束标签中添加一个/
- 使用meta标签还可以用来设置网页的###关键字###（当你搜索那个字时，网页会在你搜索那个字中显示出来）
<!-- 有了下面这个meta以后，当我们在网页中搜###关键字### HTML5,JavaScript,前端，Java时，会将这个网页显示出来 -->
<meta name="keywords" content="HTML5,JavaScript,前端，Java" />
<!-- name 名字，content 内容；name 的值是对content值的描述 -->
<!--
还可以用来指定网页的###描述###
收索引擎在检索页面时，会同时检索页面中的关键字和描述，但是这两个值不会影响页面在收索引擎中的排名
-->
<meta name="description" content="发布 h5，js，前端相关信息" />
<!--
使用meta可以用来做请求的重定向
（那种常见的几秒后跳转页面，然后网页发生跳转……）
<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
其中，5是跳转的时间，url是5秒后跳转到的页面的目的地址，可以是，相对路径也可以是绝对路径
-->
<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
xHtml语法规范
- XHtml的语法比html语法严格
- HTML不区分大小写,但是我们一般都使用小写
- HTML中的注释不能嵌套！
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- 浏览器会尽最大努力正确的解析页面，你所有的不符合语法规范的内容,浏览器都会为你自动修正，但是有些情况会修正错误
- HTML标签可以嵌套，但是不能交叉嵌套
- HTMl标签中的属性必须有值，且值必须加引号（单引号双引号都可以）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xHtml语法规范</title>
<!-- XHtml的语法比html语法严格 -->
</head>
<body>
<!--
1.HTML不区分大小写,但是我们一般都使用小写
-->
<!--
2.HTML中的注释不能嵌套！
-->
<!--
3.HTML标签必须结构完整，要么成对出现，要么自结束标签
-->
<!--
浏览器会尽最大努力正确的解析页面，你所有的不符合语法规范的内容，
浏览器都会为你自动修正，但是有些情况会修正错误
-->
<!--
4.HTML标签可以嵌套，但是不能交叉嵌套
-->
<hr /><!--分割线-->
<!--
5.HTMl标签中的属性必须有值，且值必须加引号（单引号双引号都可以）
-->
</body>
</html>
<!--
<h1>这是一个在html外面的标签</h1>
这句话会被浏览器自动修正到budy里面，可以在开发者工具中看浏览器修正后的代码
（此时，查看源代码中看到的代码和开发者工具中的代码不一样！开发者工具中看到的是修正后的代码）
-->
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
