这篇博客是HTML学习笔记的第一部分，介绍了HTML的基础知识，包括W3C准则、HTML结构、常用标签如标题、段落、图片、meta和超链接等。还提到了编码与解码的问题，以及xHTML的语法规范。博客强调了语义化标签的使用和在HTML中处理特殊字符的方法。
文章目录
这篇学习笔记的内容来自于B站视频（尚学堂-html与css）,记录于csdn供大家学习和交流。文章中并没有过多的介绍具体的标签使用。只列出了常用标签。关于标签的学习，大家可以参照网上相关官方文档和教程。
W3C准则
一个网页主要由三部分组成，结构，表现、还有行为。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brLGwDg4-1585556220458)(W3C标准.PNG)]
结构：HTML用于描述页面的结构
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户操作
学习HTML+CSS需要用到的工具
-
浏览器 火狐，IE，Chrome等
-
编辑器 记事本，notepad++，HBuider等
-
调试工具 FireBug
-
图片工具 Photoshop
HTML
HTML(Hypertext Markup Language) 超文本标记语言
它负责网页的三个要素之中的结构。
HTML使用标签的形式来标识网页汇总的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面转到另一个页面
HTML注释
<!-- 这个结构可以编写HTML的注释-->
这个结构中的内容不会在页面中显示出来，但是在源码里面有。这个可以通过写注释来对代码进行描述，从而帮助其他的开发人员工作。
注释一定要简单明了
<!doctype html>
<html>
<head>
<title>标题</title>
<!-- 网页的标题标签，默认会显示在浏览器的标题栏中，
搜索引擎在检索页面时，会首先检索title标签中的内容，
这是对于搜索引擎最重要的内容，会影响到网页在搜索引擎中的排名，SEO会设计这个
-->
<meta charset="utf-8">
</head>
<body>
网页中的主体内容，网页中所有可见的内容，都在body中编写
</body>
</html>标签属性
属性只能在开始标签中添加，通过属性设置标签。实际上就是一个键值对的结构
属性名 = “属性值”
预知标签有哪些属性和哪些属性值，可以查文档，如W3school
文档声明
由于从html诞生到现在出现了多个版本，最新的是html5，因此需要声明文档用的是哪一个标准，html 4.01和xml都比较麻烦，下面列出html5的声明，也是最常用的一种
<!Doctype html>
如果不写文档声明，有的浏览器会进入怪异模式，浏览器解析页面会导致页面无法正常显示，所以为了进入该模式，一定要写该声明。
**怪异模式： **为了兼容一些旧的页面，浏览器中设置了两种解析模式
-
标准模式
-
怪异模式
怪异模式解析网页时会产生一些不可预期的行为，所以应该避免怪异模式的出现，最好方式就是编写正确的doctype
标签
html中的标记指的就是标签，html使用标记来描述网页
结构：<标签名>标签内容</标签名>
<标签名 / >
元素 ：我们还将一个完整的标签成为元素，可以认为元素和标签是一个同义词。
<h1>一级标题<h1> 此处的h1可以称为元素
乱码问题
计算机表示字符时，经历了编码和解码两个过程。编码是依据一定的规则，将字符转化为二进制编码的过程，解码是依据一定的规则，将二进制编码转化为字符的过程。
编码和解码采用的规则，称为字符集。常见的字符集有 ASCⅡ，ISO-8859-1，GBK，GB2312(中文系统的默认编码)，UTF-8(万国码，支持地球上所有文字)
产生乱码的根本原因在于编码和解码采用的字符集不同
在中文系统的浏览器中，默认都是使用GB2312进行解码的，
网页需要告诉浏览器网页所采用的编码字符集,可以用meta标签来设置网页的一些元数据，比如网页对的字符集，关键字、简介
<meta>是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 /
ANSI是一个自动编码，自动采用系统默认编码。
xHTML的语法规范
1.HTML中不区分大小写，但是我们一般使用小写
2.HTML中的注释不能嵌套
3.浏览器会尽最大的努力正确解析页面，所有不符合规范的语法错误，浏览器都会自动修正，但是有些情况会修正错误
HTML标签必须成对出现或者是自结束标签
4.HTML标签可以嵌套但是不能交叉嵌套。
HTML可以这样写
<p>今天天气<font color="red">真不错</font></p>
但是不能这样写
<p>今天天气<font color="red">真不错</p></font>
5.HTML标签中的属性必须有值，且值必须加引号
常用的标签
1.标题标签
标题标签共有六级标题标签，h1~h6
从显示上来说，h1最大，h6最小，但是文字的大小我们并不关心，使用HTML标签时，关注的是标签的语义，我们使用的都是语义化标签
6级标题中，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说，h1的重要性仅低于title，搜索引擎检索完title，会立即查看h1中的内容，h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1
一般页面中标题标签只使用h1,h2,h3。h3以后的基本不使用。
2.段落标签
段落标签用于表示内容中的一个自然段，使用P标签来表示一个段落
p标签中的文字，默认会独占一行，且段与段之间会有一个间距
在HTML 中，字符之间写再多的空格，浏览器也会当成一个空格解析。换行也会当成一个空格解析
在页面中可以使用<br>标签换行，这是一个自结束标签。也可以用实体来换行
hr也是一个自结束标签，可以在页面中生成一条水平线
3.实体
在HTML中，一些如< > 这种特殊字符是不能直接使用的，需要用一些特殊的符号来表示这些特殊字符，这些特殊符号称为实体(转义字符串)
实体的语法： &实体的名字
< < > > 空格 版权符号© 注册商标 ® ®
™ 商标 ™
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Riatd87X-1585556220460)(HTML实体.png)]
4.图片标签
使用img标签向网页中引入一个外部图片，img也是一个自结束标签
img的属性：
**src：**设置一个外部图片路径 。
- 相对路径：相对于当前资源所在目录的位置。
- 可以使用…/来返回一级目录
- 返回几级目录就用几个…/
- 绝对路径：
**alt：**图片没法正常显示的时候显示的替代文字，搜索引擎可以通过alt属性来识别不同的图片，如果没有alt属性，则搜索引擎不会对img中的图片进行收录
**width：**修改图片宽度，一般使用px作为单位，
**height：**修改图片高度，一般使用px作为单位，
当宽度和高度两个属性只设置一个，另一个也会同时等比例调整大小；如果两个同时指定，则按照指定的值来设置
一般开发中出了自适应的调整，一般不建议指定width和height
图片格式：
- JPEG(JPG)
- JPEG支持的颜色表交多，图片可以压缩，但是不支持透明
- 一般使用JPEG保存照片等颜色丰富的图片
- GIF
- gif支持的颜色少，只支持简单的透明(直线透明)，支持动态图
- 图片颜色单一或者是动态图使用gif
- PNG
- png支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
图片的使用原则：如果图片效果一致，使用小的，如果效果不一致，使用效果好的，
5.meta标签
使用meta标签还可以用来设置网页的关键字
还可以用来指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的固安见此和描述，但是这两个值不会影响网页在搜索引擎中的排名
使用meta还可以用来做请求的重定向
<meta http-equiv="refresh" content="秒数;url=目标网址"/>
6.iframe内联框架
<iframe src = 'text.html'></iframe>
在现实开发中并不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎检索
属性：
- name：可以为内联页面指定一个name属性
- width：
- height：
7.超链接
使用超链接可以使我们从一个页面跳转到另一个页面
属性：
-
href：指向链接跳转的目标地址，可以用相对路径，也可以用完整的路径
#，点击超链接以后，会自动跳转到页面顶部
这个属性也可以填元素的id
-
target：规定在何处打开链接文档
- _self 表示在当前窗口打开
- _blank 表示在新的窗口打开
- 可以设置为一个内联框架的name属性值，链接将会在指定的内联框架中打开
<a href="#bottom" target="">
html中有一个属性，每一个元素都可以设置，可以作为标签的唯一标识。id属性在同一个页面中只能有一个，不能重复。
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href = “mailto:邮件地址”
当点击这个超链接使，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
<a href="mailto shdxhsq@qq.com">联系我们</a>
扫一扫
1720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
