HTML
前言
关于html入门篇 我会用上中下三篇来描述，下篇讲述HTML5新标签的内容。
只是简述一些HTML里常用的标签与属性。html是一个语义化编程语言，初学者需要更好的理解标签的语义。
记住标签使用方法的同时请记住标签的语义。
html基础
html （Hyper Text Markup Language）即超文本标记语言。
<html>
<head>
<meta charset="utf-8"/>
<tltle>例子</title>
</head>
<body>
<h1>html</h1>
<p>我是一个<em>html</em>文档！</p>
</body>
</html>
我们该如何去理解超文本标记这几个字呢？
你可能好奇，我们不是要学习HTML? 为什么纠结起它名字的到底是什么意思？
如果你是初学者，我想你很有必要知道
超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本详细
文本：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。文本详细
标记：我们把每一个“<>”内的内容看成一个标记。
超文本标记：我们可以简单的理解用HTML里给的标签，标记出网页里与标签语义相同的部分，同时用超链接链接相关的文档等等 。下面百度百科的定义。
超文本标记语言（HTML）：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML发展史
1.1993年（IETF）发布HTML1.0 不是标准
2.1995年（W3C）发布HTML2.0
3.1996年（W3C）发布HTML3.2
4.1997年（W3C）发布HTML4.0
5.1999年（W3C）发布HTML4.0.1
6.2000年（W3C）发布XHTML1.0
7.2001年（W3C）发布XHTML1.1
8.2004年（WHATWG）HTML5草案
9.2008年（合并）HTML5正式版
10.2014年 HTML5定稿
HTML特点
1.html不需要编译，直接由浏览器执行
2.html文件是一个文本文件
3.html文件必须使用html和htm为文件名后缀
4.html大小写不敏感，HTML和html一样（XTML中说到元素必须小写，所以建小写为标准）XTML详细
基础语法
1.基本结构
<!DOCTYPE html> 声明文档类型
<html> HTML根标签
<head > 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
head 标签 是头部标签，我们主要放一些外部样式链接，网页的基本信息等一些不被显示的文件和信息。
body标签 是容纳网页内容的标签，所有在浏览器内显示的不管是文字还是图片都是放在body标签内。
1. 标签的规则
1.1一般标签是成对出现的。
如：
<html>
<head >
<title>
</title>
</head>
<body>
</body>
</html>
有开始标签就有结束标签，结束标签前比开始标签多出"/"来告诉浏览器，我结束了。
1.2少数不是成对出现的。
如：
<br/>
<hr/>
2.什么是元素
<html>
<head >
<title>我是标题，我不在页面内显示</title>
</head>
<body>
我是内容，我在页面内显示
</body>
</html>
标签和标签中的内容 就是元素。 html标签和里边的内容是一个元素
，head标签和里面的内容也是一个元素。同理，tile标签和里面的内容也是一个元素。
<html>
<head >
<title>我是标题，我不在页面内显示</title>
</head>
<body>
我是内容，我在页面内显示
</body>
</html>
3.HTML标签属性
语法：
<标签名 属性名1="属性值" 属性名="属性值">.......内容........</标签名>
标签名和属性名中间用空格隔开，同样属性名和属性名也要用空格隔开。
注释
<!--我是注释内容-->
所有符号都需要在英文下完成
4.文档声明和meta标签
4.1文档声明
<!DOCTYPE>声明必须放在html文档的第一行
<!DOCTYPE>声明不是html标签
<!DOCTYPE html>这样来声明一个html标签
4.2meta标签
<html>
<head >
<title>我是标题，我不在页面内显示</title>
</head>
<body>
asdasd
我是内容，我在页面内显示
</body>
</html>
运行结果会发现乱码的情况！这种情况主要是因浏览器编码问题，我们在代码中head标签中写入meta标签和属性如：
<html>
<head >
<meta charset="utf-8" /> 这句意思是网页的内容使用的什么语言，使用什么编码形式。
<title>我是标题，我不在页面内显示</title>
</head>
<body>
asdasd
我是内容，我在页面内显示
</body>
</html>
注：utf-8，GB2312 国内刚用编码形式。
5.文字和段落
5.1标题标签
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
效果：
我是h1
我是h2
我是h3
我是h4
我是h5
我是h6
h1~h6标签都属于标题标签， h1-h6是六个阶级标签，就好比文章中的目录效果 。
<html>
<head >
<meta charset="utf-8" />
<title>html初级</title>
</head>
<body>
<h1>html初级教程 我是h1标签</h1>
<h2>html的定义 我是h2标签 </h2>
<p>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</p>
<h2>html的定义 </h2>
<p>超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</p>
</body>
</html>
效果：
html初级 html初级教程 我是h1标签
html的定义 我是h2标签
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
html的定义 我是h2标签
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
注：请重视 html 标签语义，这样你才能写出更好的网页。
5.2段落标签等
<p align="center" >我是居中的p标签 我是段落标签</p>
效果：
我是居中的p标签 我是段落标签
在上面的代码中我们已经使用过p标签，意思就是一个段落。
不知道你是否还记得基础语法中提到的属性的写法 如：
p 标签的属性
align属性
| 值 | 描述 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中 |
| justify | 进行伸展，这样每行都是相等的长度 |
如何定义属性
<标签名 属性名1="属性值" 属性名="属性值">.......内容........</标签名>
第一次接触属性，带你一起试用下效果
<p align="left" >我是一段左对齐的段落</p>
<p align="right" >我是一段右对齐的段落</p>
<p align="center" >我是一段居中对齐的段落</p>
<p align="justify" >我是一段伸展的段落，文字太少无法出现效果，我就a来代替aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
效果：
我是一段左对齐的段落
我是一段右对齐的段落
我是一段居中对齐的段落
我是一段伸展的段落，文字太少无法出现效果，我就a来代替aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5.3换行标签
<p>我后边有一个换行标签<br/>我已经被换行<p>
效果：
我后边有一个换行标签
我已经被换行
我们只需要把br标签放在你想要换行的地方即可。
5.4文字斜体标签
下面代码两个标签效果一样，语言不同。
<p>你好！<i>我的</i>朋友！</p>
<p>你好！<em>我的</em>朋友！</p>
效果：
你好！我的朋友！
你好！我的朋友！
i标签: 单纯的斜体效果。
em标签: “含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO(SEO详细)。
5.5文字加粗标签
下面代码两个标签效果一样，语言不同。
<p>你好！<b>我的</b>朋友！</p>
<p>你好！<strong>我的</strong>朋友！</p>
效果：
你好！我的朋友！
你好！我的朋友！
b标签: 单纯的加粗效果。
strong标签: 是一个逻辑标签，意思是加强，它的作用是加强字符的语气，表示该文本比较重要，提醒读者／终端注意。
5.6上标标签
<p>啊啊啊<sup>我是上标</sup></p>
效果：
啊啊啊我是上标
5.7下标标签
<p>啊啊啊<sub>我是下表</sub></p>
效果：
啊啊啊我是下表
上下标多用于数学或科技运算。
6.常用特殊符号
注：冒号改成英文的。
| 属性 | 描述 | 显示效果 |
|---|---|---|
|  ； | 空格 | 衬托 衬托 |
| <； | < | < |
| >； | > | > |
| ®； | 已注册 | ® |
| ©； | 版权 | © |
| &trade； | 商标 | ™ |
<p> 空格 <小于号>大于号®已注册®版权©商标™</p>
效果：
空格 <小于号>大于号®已注册®版权©商标™
多用于页脚的地方。
7. 列表标签
7.1无序列表
<ul>
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
<li>我是无序列表4</li>
</ul>
效果：
- 我是无序列表1
- 我是无序列表2
- 我是无序列表3
- 我是无序列表4
无需列表有ul标签的 li标签组成，对的嵌套方法是ul标签嵌套li标签。
有人可能会问li标签嵌套ul标签可以吗？那我们就试试~
错误示范：
<li>
<ul>我是</ul>
<ul>li</ul>
<ul>嵌套</ul>
<ul>ul</ul>
</li>
效果：
我是
li
嵌套
ul
浏览器无法识别我们想要表达什么。 这样成组的标签我们一定要遵守它的嵌套方法。
不过你可以自试试它们反嵌套的效果。
进入下一个话题
type属性
| 属性值 | 描述 |
|---|---|
| disc | 圆盘（默认） |
| square | 正方形 |
| circle | 空心圆 |
我们来自己在试一下：
<ul type="disc">
<li>圆盘（默认）</li>
</ul>
<ul type="square">
<li>正方形</li>
</ul>
<ul type="circle">
<li>空心圆</li>
</ul>
有需列表有ol标签的 li标签组成，对的嵌套方法是ol标签嵌套li标签。
7.2有序列表
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
效果：
- 我是有序列表1
- 我是有序列表2
- 我是有序列表3
- 我是有序列表4
我们有序列表也有type属性，也有不同的样式。
type属性
| 属性值 | 描述 | 样式 |
|---|---|---|
| 1 | 数字 | 1，2，3… |
| a | 小写字母 | a，b，c… |
| A | 大写字母 | A，B，C… |
| i | 小写罗马数字 | i… |
| I | 大写罗马数字 | I… |
我们来自己在试一下：
<ol type="1">
<li>数字</li>
<li>数字</li>
</ol>
<ol type="a">
<li>小写字母</li>
<li>小写字母</li>
</ol>
<ol type="A">
<li>大写字母</li>
<li>打写字母</li>
</ol>
<ol type="i">
<li>小写罗马数字</li>
<li>小写罗马数字</li>
</ol>
<ol type="I">
<li>大写罗马数字</li>
<li>大写罗马数字</li>
</ol>
7.3定义列表
<dl>
<dt>定义列表项</dt> 定义列表项
<dd>列表项描述</dd> 列表项描述
<dt>HTML</dt>
<dd>HTML是超文本标记语言</dd>
</dl>
效果：
- 定义列表项
- 列表项描述
- HTML
- HTML是超文本标记语言
8.图像和超链接
8.1图像
<img src="我是写图片地址的" alt="定义一串预备的可替换的文本" />
我们来自己在试一下：
<img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=html%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=3374279718,4290974383&os=3086807390,4238110177&simid=3302153197,246161291&pn=1&rn=1&di=4620&ln=1360&fr=&fmq=1552723449483_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fs13.sinaimg.cn%2Fmw690%2F002x5VcBgy71xQ2H3fSec%26690&rpstart=0&rpnum=0&adpicid=0&force=undefined&ctd=1552723458034^3_1600X805%1" alt="我是一张html5的图片" />
我们看到标签内有两个属性一个src 一个alt，下面我们看下它们的用法。
src是img标签中必须要有的
src的是：
绝对 URL - 指向其他站点（比如 src=“http://www.example.com/”）
相对 URL - 指向站点内的文件（比如 src="/i/image.gif"）
ait是规定图像的替代文本，简单描述一下图片即可。
8.2超链接
<a href="链接的地址" target="链接内容在哪里显示">我就是一个超链接</a>
我们来自己在试一下：
<a href="https://www.csdn.net/" target="_blank" title="我到CSDN主页" name="CSDN">CSDN主页</a>
效果
我们看到有四个属性：href，target，title，name
href
绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm”）
相对 URL - 指向站点内的某个文件（href=“index.htm”）
锚 URL - 指向页面中的锚（href="#top"）
target
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
请自行测试
title：链接提示文本。（鼠标停留在超链接上显示）
name： 锚的名称。( 下小节细说 )
8.3超链接锚的用法
同一页面使用方法
<a id="wo" ></a> 用name属性设下锚点
<a href="#wo">点我跳到</a> 用href属性跳转（注意：还有一个#号）
自行测试(html5不支持此功能)
不同页面使用方法
第一页面<a id="to">点我</a>用name属性在第一个页面设下锚点
第二页面<a href="第二页面所在页面地址#to">点我跳到</a> 用href属性跳转（注意：需要第一个页面地址）
总结
本篇我们讲述过 HTML发展史和特点，还有基础语法和文字段落标题标签。标签的属性也是写出常用的。详细的还请看参考文献。如：w3c,菜鸟,mozilla
==如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！==