本文介绍了HTML的基础知识，包括HTML的定义、标签类型、文档结构、常用标签如标题、段落、图像、链接及锚点定位。强调了<head></head>和<body></body>的作用，以及标签的嵌套和并列关系。此外，还提到了字符集、图像标签、链接标签的使用，以及列表和注释标签的应用。
1.HTML初始：HTML（Hyper Text Markup Language的缩写），超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述；
2.HTML标签：标签分两种，一种是单标签<br />，一种是双标签<p></p>，斜杠表示关闭符号；
一个HTML网页的大致样式是
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
第一行声明这是一个HTML5文件。第二行和最后一行是<html></html>在HTML文档中，所有的标签都必须在这对标签之中。在这对标签之中，整体又可以分为两个部分，一部分是头，一部分是主体，所以头用<head></head>表示，而主体用<body></body>表示；所以<head></head>和<body></body>并不是规定网页内容具体形状、行为等的，而是区分层次的，告诉浏览器，哪个部分是头，哪个部分是主体，仅仅是为了分层的；
在<head></head>标签中，一般包括<title></title>标签，这是现实在浏览器上页面的标题：
<body></body>标签则是浏览器显示的主体：
3.标签关系：只有两种，要么是嵌套关系，要么是并列关系。
嵌套关系：标签之间是可以相互嵌套，如上面的<html></html>和<head></head>之间就是嵌套关系，HTML标签还可以多层嵌套，实际中非常多；
并列关系：标签之间还可以是并列关系，如<head></head>和<body></body>之间是并列，没有谁包括谁，所以两者是并列关系；
4.文档类型：告诉浏览器html文档使用的是哪个版本
5.字符集：<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式，包含全世界所有国家所需要用到的字符；
gb2312简体中文，包括6763个汉字；
BIG5繁体中文，港澳台等地使用；
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容gb2312；
记住一点就够，直接使用utf-8就不会产生由于字符集不统一而乱码的情况了；
6.常用HTML标签：
a、排版标签：主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签；
标题标签（熟记）：有6个等级，分别是<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>、作为标题使用，并且依据重要性递减，即h1>h2>h3>h4>h5>h6；使用方法是<h1>这是一个重要性最大的标题</h1>；因为<h1>是很重要的时候才用，所以轻易不要使用h1标签，一般这是给logo使用的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>老子的测试网站</title>
</head>
<body>
<h1>测试标题之h1</h1>
<h2>测试标题之h1</h2>
<h3>测试标题之h1</h3>
<h4>测试标题之h1</h4>
<h5>测试标题之h1</h5>
<h6>测试标题之h1</h6>
<h7>测试标题之h1</h7>
</body>
</html>
段落标签（熟记）：在网页中要把文字有条理地显示出来，就需要用到段落标签，不然浏览器是不会自己识别某段文字是否为一个段落，而是将所有文字连续地、一行一行的显示；段落标签用法：<p>一个自然段落</p>；默认情况下，段落标签中的内容会根据浏览器的变化自动换行；
水平标签（认识）：网页中常常有一个横线将一些段落之间分隔开，使得整个文章或者页面的结构更加清晰。这些“水平线”，可能是一个细长的图片，也可以是一个<hr />标签；
换行标签<br />（熟记）：如果一个段落内部需要换行，那么就需要使用换行标签，在换行处输入该标签就可以；这个标签的功能看上去<p></p>也能实现，但是段落标签<p></p>换行后，两行之间的间隙会很大，而换行标签不会改变行距；
两个重点布局标签：div、span，没有语义，是网页布局中大量使用的两个标签；就是将整个源码分为一大块一大块的部分，方便对各个部分进行不同的操作；不会在浏览器显示方面有什么效果；
b、文本格式化标签：文本中如果又需要将文字设置为粗体、斜体、删除线、下划线等效果时使用的标签；
| 标签 | 显示效果 |
| <b></b>、<strong></strong> | 文字以粗体方式显示（推荐使用strong标签，不仅加粗显示，还有强调的意义） |
| <i></i>、<em></em> | 文字以斜体方式显示（推荐使用em标签） |
| <s></s>、<del></del> | 文字以加删除线显示（推荐使用del） |
| <u></u>、<ins></ins> | 文字以加下划线方式显示（不推荐使用u） |
<hr />
<p>文本格式化标签</p>
<b>这是用 b 加粗的文字</b><br />
<strong>这是用 strong 加粗的文字</strong><br />
<s>这是 s 删除的文字</s><br />
<del>这是 del 删除的文字</del><br />
<u>这是加了 u 下划线的文字</u><br />
<ins>这是加了 ins 下划线的文字</ins><br />
<i>这是 i 标记的斜体字</i><br />
<em>这是 em 标记的斜体字</em><br />
7.标签的属性：
使用HTML制作网页的时候，如果想要html标签提供更多的信息，可以使用HTML标签的属性加以设置，基本的语法格式如下；
<标签名 属性1="属性值1" 属性2="属性值2" ...>内容</标签名>
a、标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；
b、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
c、任何标签的属性都有默认值，省略该属性不指定时，则该属性取默认值；
d、属性和值之间采取键值对的形式表现；
8.图像标签：（重要），该标签有一个src属性是必须指定的，语法是：
<img src="图片地址">
| 属性 | 属性值 | 描述 |
| src | URL |
图像的路径 |
| alt | 文本 | 图像无法加载显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素值（XHTML不支持页面%百分比） | 设置图像的宽度 |
| height | 像素值（XHTML不支持页面%百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
width和height属性一般只需要更改一个就可以了，另一个会等比缩小；
9.链接标签：跳转到另一个资源所在处的标签，基本语法：
<a href="跳转的目标地址" target="目标窗口的弹出方式">文本或图像</a>
href用于指定链接目标的url地址，当为标签指定href属性时，它就具有了超链接的功能；
target指定链接页面的打开方式，其取值有_self和_blank，其中_self为默认值，_blank为在新窗口中打开；
注意：
a、外部链接需要加协议类型，如http://www.baidu.com，而内部链接可以直接是文件名称；
b、如果暂时没有具体的链接地址，可以置为空，即值取#；
c、不仅可以添加超链接，而且同一个页面中，也可以添加锚点
10.锚点定位（难点）
通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：
a、使用<a href ="#id名">链接文本</a>创建链接文本；
b、使用相应的id名标注跳转目标的位置；
c、锚点定位适合内容较长的页面；
可点击跳转处：
<a href="#life">生活</a>
跳转目标处：
<p id="life">生活</p>
11.base标签：在网页中，如果有大量的<a>标签，而又要指定在新窗口中打开链接，那就非常冗余，每个<a>标签中都要指定target属性为_blank，非常繁琐，于是可以这样一次指定：
<head>
<base target="_blank">
</head>
其中target的属性也可以是_self，指定了base标签之后，如果某个单独的链接其target想取另外的值，在其a标签中指定即可；
12.特殊字符标签（理解，需要时查查就可以了）：
| 特殊字符 | 描述 | 代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 |
© |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 加减号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
13.注释标签：多使用注释标签是一个好的习惯，注释标签所包含的内容是给程序员自己看的，浏览器自己不适用；
<!--这是注释的内容-->
Sublime快捷注释：Ctrl+/
14.列表标签：
a、无序列表：（重点）
<ul>
<li>苹果</li>
<li>橘子</li>
<li>荔枝</li>
<li>米饭</li>
<li>其他</li>
</ul>
<ul></ul>标签中一般只放<li></li>标签，直接在<ul></ul>标签中放其它标签或者文字的做法是不允许的；
<li></li>标签之间相当于一个容器，可以容纳所有元素和标签；
样式属性一帮交给css处理；
b、有序列表：（了解）特性或注意事项与<ol></ol>基本一致
<ol>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
<li>英国</li>
</ol>
c、自定义列表：自定义列表常常用于对术语的或名词进行解释和描述，自定义列表的列表项前有没有任何项目符合；
<dl>
<dt>北京</dt>
<dd>昌平区</dd>
<dd>海淀区</dd>
<dd>大兴区</dd>
<dd>通州区</dd>
<dd>朝阳区</dd>
</dl>
<dl></dl>标签是总括自定义列表的，标志这是一个自定义列表的标签；
<dt></dt>定义一个大类，比如一个标题，<dd></dd>解释说明<dt>的类；
一般用在网页尾部：
扫一扫
5975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
