本文共 4480 字，大约阅读时间需要 14 分钟。
目录
一、html简介
HTML 是用来描述网页的一种语言，指的是超文本标记语言。HTML 不是一种编程语言，而是一种标记语言
正常的baihtml标记分为4层
第一:<html>,这是最外的一层 第二:<head>网页头部 第三:<title>网页标题，在<head>中包含 第四:<body>网页内容这是标题
所以一般在写代码时主要在body中，至于使用的编译器因人而异，拿记事本都可以写，如果使用记事本一定要改后缀名，将.txt改为.html，我主要使用的是WebStorm
Title
可以看到。当我们新建一个html文件时，webstorm会自动帮我们生成结构
<!DOCTYPE html> !:表申明的意思。这一行代码的意思是：下面的文档标签将以html5规范去解析
<html lang="en"> 表示语言为英语
<meta charset="utf-8"> 表示汉字编码 meta:元，主要用来完成对应设置的，当然还有一些其他的属性，比如
<meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
<meta name="description" content=""><!--网站的描述内容-->
注意，如果新建一个html文件后没有生成结构，自己又不想写可以选择以下两种方式，都可以自动生成文档结构
1、！+tab
2、html:5+tab
暂时不用在意生成后出现的meta下的那些属性，因为是移动端的开发设置
可以随便写一些东西进行测试，比如在body中写一个Test
注意，我们可以看到标题的位置，这里是可以修改的
二、常用标签元素
1、块级标签和行级标签
首先我们要知道什么是块级元素和行级元素
块级元素：独占一行，宽度和高度是可控的，如果没有设置其宽度，将默认铺满整行，其内可以包含块级和行级元素
行级元素：不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行，宽度和高度是不可控的，其内只能包含行级元素
相互转化的实现
块级标签转为行级标签：display:inline;（直接在标签里面添加即可）
行级标签转为块级标签：display:block;
2、div（块级）和span（行级）
div:用来布局的，没有具体含义。如果一定要给个定义，那就可以理解为是层
span:作用与div一样，都是用来布局的，不同的是div会单独占一行，而span不会;span用于行内布局
我们一般写代码时都将各个部分写在不同的div中，方便添加样式以及更有层次性。
3、标题标签（块级）
通过<h1>——<h6>来进行定义
Test
Test
Test
Test
Test
Test
经过测试可以看到字体的大小是不一样的，<h1>是最大<h6>是最小。
还要注意的是，html的容错率是很高的，也就是说即使有些部分写错了，他也不会报错，比如说
Test
它同样会显示，显示的结果只是普通的字体，和只写一个Test的结果是一样的
如果嫌写起来麻烦，可以通过快捷键，比如你想写<h1></h1>，可以直接写h1然后摁下tab键即可自动生成，后面都是一样的
4、段落标签（块级）
通过<p></p>进行定义
特点在于添加段落标签后都会另起一行显示里面的内容
TestTest1
Test2
Test1
TestTest2
Test1
Test2
Test
不管是上面哪种写法，显示的结果都只是
5、换行，回车（行级）
通过<br/>进行定义
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
所以在 HTML 中，把结束标签放在开始标签中，也就是 <br />。
要注意的是，在html里面写代码，他是不认你键盘敲进去回车的
TestTestTestTestTestTestTestTest
所以你不管在body里面敲多少个回车，都不会起作用，显示的结果都是
所以为了避免这一情况，添加了换行标签<br/>
TestTestTestTestTestTestTestTest
不管怎么写，只要遇到<br/>后就会换行
如果你想写多个换行
1、<br/>后选择这一行然后ctrl+D
2、或者直接写br*5然后tab，则会自动生成5个
这样就不用ctrl+c、ctrl+v那么麻烦了
6、水平线（块级）
通过<hr/>进行定义
Test
显示结果就是多了条水平线
可以看到<hr/>自身就有可以换行的属性，所以不管Test写在哪里水平线都会换行显示，即使写的文字在<hr/>后面跟着，也会被换行显示
7、字体加粗（行级）
通过<b></b>或者<strong></strong>进行表示
需要注意的是，两者虽然在网页中显示效果一样，但实际目的不同。
<b>这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；
<strong>这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总的来说就是，<b>为了加粗而加粗，<strong>为了标明重点而加粗，所以使用<strong>好些
Test
Test
8、字体斜体（行级）
通过<i></i><em></em>
和<b><strong>一样，两者虽然在网页中显示效果一样，但实际目的不同。
<i>标签表示对所包含内容显示斜体文本效果。
<em>标签表示对所包含文本内容的强调。
Test
Test
9、注释
通过<!-- -->进行表示，注意这是在html中的注释，css里面是不一样的
这个就不多说了，注释的代码在网页中就不会显示了，因为浏览器不会解析注释的内容
注意：不要在注释中使用“--”
快捷键为ctrl+/这样就可以选择整行或是整段
如果你要在一行中指定一些字符进行注释，比如<p>abcde</p>，你只想注释掉de时。可以选中de然后ctrl+shift+/即可
10、预格式化文本（块级）
通过<pre></pre>进行表示，在文本中会保留空格和换行符， 包括宽度等，但文字的字号会小一号，使用较少
预格式文本标签。 在文本中会保留空格和换行符， 包括宽度等。
11、放大缩小字号（行级）
利用<big></big><small></small>进行表示
TestTestTestTest
注意<big>标签已经被html5所淘汰，但并没有删除，尽量不要使用
12、上下标（行级）
利用<sup></sup><sub></sub>进行表示，调整文本正常显示的基线，且字号会小一号（不常用）
x 2 + y 2 = z x 2 + y 2 = z
13、短文本引用（行级）
利用<q></q>进行表示
hello
主要功能是会为我们自动加上引号
14、特殊符号
注意，在html中有些特殊符号是无法直接显示的，比如空格，小于号
Test TestTest Test
他只会识别一个空格，其余的空格全部就自动忽略了，至于小于号，如果小于号后面跟了其余内容，则会直接报错，因为我们在写标签时都用<>括起来，所以当单独写“<”时，它会去寻找与之匹配的">"，找不到就会报错，但之前说过html的容错率很高，即使一句代码有问题，其余的代码还是可以显示的。
所以想要这些符号有作用时需要一些特殊的符号表示，用&开头;结尾
< 是小于号
> 是大于号
空格
" 引号
© 版权符号
× 乘号
÷ 除号
<<<是小于号>>>是大于号 空格""""引号©版权符号×乘号÷除号
注意，这里的使用其实最多的在于介绍一些标签，比如说在网页上显示<p></p>，如果你单纯的把这句代码写进body中，肯定就换行了，此时就可以用特殊符号来写
<p></p>
其实如果不是这样子的形式，“<”,”>“,“ " ”都可以直接写，也可以显示，要注意如果<后面要跟其他内容则一定要用特殊符号代替，但尽量不要这么写，如果想写这些符号尽量使用特殊符号来代替，至于引号的话主要是在后面人，比如你写一些name=“内容”时，想在里面表示引号时，则可以使用特殊符号。
15、图片
通过<img>进行表示
主要的是<img src="" />src:路径可以写的是：title:鼠标悬浮时的文字 alt：图片不存在时替换的文字
如果图片地址有误时
这里注意的是src里面的路径，如果你写的html和图片在同一级目录下，则不用添加../，如果不在一级，则需要使用../跳出html当前所在的目录中，再去寻找你写的imgs目录，找到图片。
16、超链接
通过<a href=""></a>来显示
通过此标签跳转页面，提前写好另一个html文件，将文件名添加到href中，添加提示文字“点击我”
点击我
和图片一样，如果想跳转到同级目录，这不用写../，如果不是同级目录，则先跳出使用../，然后在找到你想要的文件
href中可以写你编辑过得html文件，也可以写一些其他网站，比如百度网易什么的，只需要把网站地址加进去即可
当然里面还可以添加一些属性 target=" " title=" "
title=" " 表示鼠标悬浮的提示文字
target=" " 表示跳转的目标形式
_blank(另起一个新的窗口) _self（在自己的窗口下也就是自身跳转，不会新开窗口） _parent（返回父一级） _top（返回最顶层）
17、a标签的伪类
a :hove 悬浮
a:link 未访问
a:visited 已经访问过了
a:active 点击鼠标时
设置的顺序： link -> visitied > hover > active
一般建议： 只写 hover 即可
18、锚链接
和超链接一样，只不过它可以跳转到你指定的地方
步骤：
如果要从a跳到b里面指定的位置
1、首先在b里面任选一行起名（用id命名也可以） <a name="my2mao">222b页面</a> 2、跳转要加#name <a href="hellob.html#my2mao"></a>
具体实现：
第一步：命名
第二步：查找
点击我
19、功能性链接
比如发邮件：<a href="mailto:...">点我发邮件</a>
都有一些固定的写法，以后遇到了会进行纪录
三、总结
此次介绍了一些html中常用的基础标签，当然html中的标签还是很多的，而且都可以嵌套使用，主要看个人设计，所以等以后在实践中遇到了其他的新的标签，还会在里面进行添加。
转载地址：http://ayvrn.baihongyu.com/