一，HTML简介（来源HTML百度百科）
HTML：超文本标记语言，是指能够包含链接，图片，程序，视频等非文字元素的页面
二，HTML，XML，XHTML之间有什么区别
- HTML：超文本标记语言，语法比较松散，书写格式不是那么规范，用于展示数据；
- XML：可扩展标记语言，书写格式类似于HTML，但是标签都是自定义，且书写格式严格，用于传输数据；
- XHTML：可扩展超文本标记语言，基于XML，书写格式非常严格的HTML模式，用于展示数据；
之间的区别：
1.XML用于传输数据；
2.HTML和XHTML用于展示数据；
3.相较于XHTML，HTML的书写格式并不那么严谨，其它的和HTML4.0几乎一样；
三：HTML的主要结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>：声明文档类型，用于告诉浏览器以什么样的方式对该文档进行渲染，如果没有这个声明则使用怪异模式进行渲染，有则使用标准模式进行渲染； -
<html>：页面的根标签：限定了页面的开始和结束，在这个标签包裹<head>和<body>标签； -
<head>：头部标签，用于定义文档的头部，包裹该文档的头部元素，用于引入脚本、样式、包裹元标签等； -
<body>：内容标签，用于展示的内容都写在这个标签以内，定义文档的主体；
注意点：
- 标签闭合：例如
<html>这个标签，闭合就用</html>，也就是添加斜杠完成，除了<html>标签外，其它的除了自闭合标签和空标签以外的标签都可以使用这种方式进行闭合； - 添加语言：在
<html>标签内，可以添加属性lang属性来告诉浏览器当前文档使用的是何种语言，例如：
lang = "en"就是告诉浏览器当前文档使用的是英语；
3.书写：标签的书写全部使用小写英文；
四：HTML书写规范
- 行级元素不要包裹块级元素：例如
<span><div></div></span>这样是错误的，但是块级元素可以包裹行级元素； - 标签闭合：例如：
<p></p>,<span></span>； - 标签全部用英文小写书写；
- 标签用尖括号进行包裹：
<标签名>；
五：关于<meta>标签
-
在<html>标签内，你会见到一个叫
<meta>的标签，例如下面这样：<head> <meta> </head>
上面的<meta>就是文档的元标签，它可以通过一些属性提供的值来标示这个文档的元信息，例如解码方式，关键词等，它是一个自闭合标签，不需要闭合，它不提供任何文档的内容；
-
<meta>标签的常用属性介绍：
1.charset：charset属性有一个值，这个值填写的是编码方式，例如：charset = "UTF-8"就是标明该文档的编码方式是 UTF-8，其它的编码方式还有gbk，Unicode等；
2.http-equiv：http-equiv：该属性可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，要与content属性一起使用，正确的格式是：http-equiv = "参数"，例如：http-equiv = "X-UA-Compatible"；
3.content：用于标示数据传输中的值；
4.name：name属性要与content属性一起使用，name属性常用的值有：
①：viewport：例如：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport这个值用来限定用户是否能缩放或放大页面，最大和最小多少；
②：keywords：例如：<meta name="keywords" content="前端 饥人谷">
keywords值顾名思义，是用来告诉浏览器这个页面的关键词是什么，方便搜索引擎进行关键词抓取；
③：description：例如：<meta name="description" content="最有爱的前端学习社区">
description值用来告诉搜索引擎这个页面大体内容的描述，以及搜索出来检索显示的信息；
- 常见问题之——内容文字变成乱码
例子：
网页文字变乱码
1.出现的原因：在<meta>标签内的编码方式是UTF-8
编码方式
而我们的解码方式是：
解码方式
由上可以看出文字变乱码是编码方式和解码方式的不同所造成的；
2 . 如何解决：设置编码方式和解码方式相同即可
3 . 此外还要注意，有些编辑器默认保存的编码方式就是utf-8，例如sublime
默认保存的编码方式
六：常用标签介绍
-
标题标签：
<h1~6>，用来书写标题，<h1>~<h6>字体依次由大到小，表明标题的重要性由大到小；
标题标签展示
-
字体突出标签：
1.<mark>：用来标记文段，标明该文段出错或其他
mark标签
2.
<strong>：用于强调标记的语句，强调语气比<em>强，字体会变成加粗体
strong标签
3.
<em>：用于强调标记的语句，强调语气较轻，字体会变成斜体
em标签
-
段落标签：
<p>：用于包裹文段；
P标签
-
块标签：
<div>：用于划分一个区块，常用于页面布局；
div标签，为显示我加了样式
-
行标签：
<span>：用于组合行内元素，方便进行定位设置样式
span标签用法
-
图片标签：
[站外图片上传中……(1)]，用来插入图片；
图片正常显示时
图片不能显示时
-
列表标签
1.无序列表：<ul><li>，用来显示无序的列表信息，直接子元素必须是<li>，默认样式是小圆点
无序列表
2.有序列表：<ol><li>，用来显示有顺序的列表信息，直接子元素必须是<li>，默认样式是阿拉伯数字
有序列表
3.自定义列表：<dl><dt><dd>，<dt>用来显示列表标题，<dd>用来显示列表项
自定义列表
-
链接标签：
<a href="链接地址" target="以什么方式打开">可点击的文字</a>
a标签
-
表格标签 ：
<table><tr><th><td>
其中<tr>是行，有几个<tr>标签就有几行。<th>是表头单元，是该列信息的归类。<td>是标准单元，用来显示信息
表格
关于HTML文档的语义化
- 什么是HTML语义化：我所理解的语义化就是将文档的书写当做写文章一样，该用什么标签就用什么标签，尽量少用无语义的标签
- 语义化的好处：方便阅读以及搜索引擎的搜索
样式和内容分离原则
- 样式和内容分离是指，样式不要写在标签内，比如这样：
- 最好也不要写在
<head>标签的<style>里，比如这样：
- 最好是另外建立一个文件专门写样式，然后
<head>标签内进行引入，比如这样：
Paste_Image.png
网友评论