整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
昨天了解计算机基础知识后，小编今天带大家学习前端三大脚手架之一的HTML，从常用程度上，HTML可以简单的分为：基础HTML、核心HTML。今天将学习基础HTML（一），因为只有把地基打扎实了，才能建高楼。
首先，什么是HTML？书本上称为HTML(Hyper Text Markup Language),超级文本标记语言，说白了就是编写一个网页的语言；可以想象因为要讲话，所以我们学会了文字，同理，因为要编辑网页，所以我们要学习HTML；HTML是有一系列标记组成，同时也具有自己独特的语法。通过标记和语法组成后，最终会由浏览器负责解释，浏览器中有两大解析器，html渲染解析器，js解析器（这块后续会提到）。
HTML的发展进程，从最开始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5；目前HTML已经更新到了HTML5了，HTML5给我们带来了很多新玩意儿，后面会陆续把好东西分享给大家。
HTML5 质的发展
在今日学习之前，先分析一些开发工具，作为新手，不建议使用具有代码提示补全的工具，建议使用EditPlus，记事本之类的工具，只有把代码写扎实了，再进阶到高级工具。
下面进入HTML标签的学习，也有叫标记的。
一、标签语法
1、所有的标签都必须使用尖括号扩起来，例如 <a>,<div> ... <A>,<a>
2、有封闭类型的标签，也有非封闭类型的标签
2.1、封闭类型，也称作双标记，则必须成对出现；语法规则： <标记>文本内容</标记>； 不同的标记，决定 了"文本内容"的不同表现形式；常见的封闭类型标记有:<a></a>,<p></p>,<div></div>
2.2、非封闭类型，也称作单标记、空标记；语法规则： <标记>或者<标记/> 常见的非封闭类型标记有: <hr>,<br>,<img>
区别封闭类型和非封闭类型标签，就看这标签是一对出现的，还是单个出现的。
3、标签嵌套
标签之间可以相互嵌套，形成复杂的语法结构，简单的例子如下：
<body>
<p>
<a></a>
</p>
</body>
4、标签属性，标签属性是指出现在开始标记中的内容，作用是修饰元素，如 <div 属性名="属性值"></div>
标准属性：就是每个元素与生俱来就具备的通用属性，常见的标准属性有：
id ：定义每个标签的唯一标识
title：提示文本
class：样式相关，类样式
style：样式相关，行内样式
现在可以和小编一个编写一个简单的标签，同时设置这个标签的id属性为myDIv。（属性命名方式：驼峰命名，后续会分享给大家）
实战：第一步：先定义一个标签div，即<div></div>
第二步：添加id属性，即<div id="myDIv"></div>
疑问：如果存在多个属性值怎么办？怎么添加属性值是编码规范的？
答：如果是多属性的，那么直接在前一个属性值后继续编写，不需要用“，”或者“；”分开，直接写就对了！而且，多个属性排名不分先后的，举个栗子： <div id="myDiv" title="myTitle"></p>
二、文档结构
1、文档类型声明：即声明使用的HTML版本和风格，HTML5中使用声明为： <!doctype html>
2、html页面
2.1、文档根元素，每个文档有且仅有一对根元素 , html
2.2、在根元素的内部，包含两对子元素；
2.2.1、head : 页面的头部内容，定义页面全局信息 包含的内容有：
<title></title> ;网页标题，就是网页地址上面显示的名称；
<meta />:声明元数据(编码,关键字,描述)，最重要的搜索引擎SEO主要是写这部分；同时也可以定义一些网页属性，比如说，中文显示 <meta charset="utf-8" />；
<style></style>:声明内部样式表，声明当前网页所用到的样式，这种方式的样式定义只能运用在当前页面，其他页面不能使用这里定义的样式；
<link />:引入外部样式表，引入外部定义好的样式，只要是这个页面想要用到某一个外部样式表，就直接引入就可以用了，这种样式表定义运用弥补上面<style></style>不能共享的缺陷，是的代码达到了重用的优势；
<script></script>:定义或引入脚本文件，主要是引入一些js脚本语言，完成这个页面所需要的交互；
2.2.2、body : 页面的主体内容，任何一个标签，都可能会出现在body中；<body>也是标签，它也可以定义自己的属性，比如网页背景有绿色，那么就是<body bgcolor="green"></body>；
3、文本标记
3.1、特殊的文本，除了正常文字外，在一些特定的情况下会需要有特别的标点符号等，小编举例几个常见的特殊符号的标记，如 空格对应的是“ ”、 <对应的是 “<” 可以理解为less than 、> 对应的是 “> ”理解为greater than、 版权标识对应的是 “©”，这里需要特别特别注意的一点是 每个特殊字符有需要“；”
3.2、文本标记
3.2.1、文本样式
<b>...</b>： 加粗文本；
<i>...</i>：斜体文本；
<u>...</u>：下划线；
<s>...</s>：删除线；
<sup>...</sup>：上标；
<sub>...</sub>：下标；
3.2.2、标题元素， 1-6级6个标题 <hn></hn> n：1-6 其中一级是最大的， 六级是最小的；
3.2.3、段落元素，提供了结构化文本的表现方式， 语法：<p></p>， 注意：每对p标签单独成一个段落，常用属性:
align：水平对齐方式 取值：left center right；
4、换行元素，在代码的任何位置处，实现回车的效果 <br />，是非封闭类型标记；
5、水平线， 又叫分割线， <hr /> 也是非封闭类型标记，常用属性；
5.1、size ：水平线的粗细，通常以像素(px)为单位；
5.2、width：宽度；
5.3、align：水平线的水平对齐方式；
5.4、color：颜色；
6、分区元素目的：为元素进行分组，多数用在布局中；
块分区元素：<div></div> ；
行内分区元素：<span></span>；
注意：
div ：主要用在布局上；
span：修改其内部内容的样式；
7、预格式化，保留源文档中的空格和回车 <pre>文本内容 </pre>；
8、注释
可以写在html源码中，但不被浏览器解释的文本；
语法： <!-- 注释内容 -->
！！！特别注意：行内元素与块级元素
块级元素：默认情况下，块级元素独占一行，元素的前后都会自动换行 div、hn、hr、p等 主要用于布局。
行内元素:默认情况，多个元素位于同一行，不会换行，span、文本标记... .主要行内元素作用:修改内部内容的样式。
最后，小编建议多多打代码！
预告：下一篇 前端教程之HTML（二）
HTML简介
HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。
发展史
HTML：Hyper Text Markup Language超文本标记语言
超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）
HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。
HTML3.2—1996年1月14日，W3C推荐标准
HTML4.0—1997年12月18日，W3C推荐标准
HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准
XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
XHTML1.1—2001年5月31日发布
XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。
目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5规范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度
HTML的优势
h1~h6
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <h7>这是七级标题</h7>效果怎么显示不出来呢？？？ <h1>这是一级标题</h1> </body> </html> |
浏览器预览效果
p标签为段落标签，br标签为换行标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和换行标签</title> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你，<br>为你开天辟地</p> <p>北京欢迎你，<br/>有有勇气就会有奇迹</p> </body> </html> |
浏览器预览效果图
hr标签为水平线标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平线标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了半年的积蓄，<br>漂洋过海来看你</p> <hr/> </body> </html> |
浏览器预览效果图
em为斜体标签，strong为字体加粗标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br> <em><strong>漂洋过海</strong></em>来看你 </p> <hr/> </body> </html> |
浏览器预览效果图
注释使用：<!--被注释的内容-->
大于号：> great than的缩写
小于号：< less than的缩写
双引号：""
版权符号：©
空格：
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注释和特殊符号</title> </head> <body> <pre> 注释使用：<!--被注释的内容--> 大于号：> great than的缩写 小于号：< less than的缩写 双引号："" 版权符号：© 空格： </pre> <!-- 我是被注释的内容，我只留给你们看，不会在页面上显示 --> 5<10>6 <br> "我是被双引号引起来的内容"<br> ©自由职业开发者公司<br> 我是 测试 空 格的 </body> </html> |
浏览器预览效果图
以上就是HTML的简单入门，后续带大家更深入的了解HTML
示：点击上方"WEB网页设计自学平台"↑ 可以订阅噢！
摘要 51RGB官方微信在学习CSS制作知识之前，我们必须需要认识的HTML什么基础知识。
一、必知HTML基础-CSS教程系列
目录
搞清浏览器作用
搞清什么是HTML
html作用
html我们涉及哪些基础知识
常见html单词及单词功能作用有哪些
html结构
html与CSS关系
浏览器主要作用是浏览网页作用，在DIV+CSS制作开发时候仍然是浏览我们制作开发重构网页作用。浏览器可测试我们开发的CSS网页兼容性、网页效果、因开发疏忽导致错误等作用。
在CSS测试（CSS工具）里常用浏览器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、苹果Safari、Opera主流浏览器。至于傲游、360浏览器因为他们使用你系统自带的IE内核，所以不必考虑，只要支持你浏览器版本即支持类似这2款浏览器
需要兼容浏览器有哪些？http://www.51rgb.com/css-tool/t86.shtml
html是hypertext markup language的缩写，即超文本标记语言。可以这样理解，HTML文件是一定规则规律以html\htm等命名后缀名的文本文件。
HTML作用，通过一定html自身语法结构（html结构），显示文字、图片、动画（flash）、视频或音频音乐。而CSS则是配合html实现漂亮的各式各样的页面内容。
4、html我们涉及哪些基础知识
Html扩展名、html源代码、DOCTYPE、html结构、head标签、charset
a、B(strong)：加粗
b、P：换行实例：<p>我是第一段内容</p><p>我是第二段内容</p>
c、Br：提行实例：我是第一排<br />我是第二排内容
d、px：像素、长度宽度单位
实例：width:30px; 宽度30像素
e、ul、ol、li列表标签实例：
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
f、div与span：都是html标签
实例：<div>我占一行</div><span>我多长占多长位置</span>
两者区别：DIV占用1整排，而SPAN所占位置是内容多少占用多长长度
g、img：图片引用标签
<img src="/css-images/css-logo.gif" />图片标签
h、dl dt dd：CSS的另类表格组合
实例：
<dl>
<dt>我是标题</dt>
<dd>列表一</dd>
<dd>列表二</dd>
</dl>
j、title：标题标签
实例：<title>标题</title>
特点，在一个网页内只能使用一次（只能出现一次）
6、html结构 - TOP
这里Html结构可用于每次新建制作网页模板使用。
旧html结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5标题</title>
</head>
<body>
具体网页呈现内容
</body>
</html>
经过CSS教程网的DIVCSS5优化后的HTML结构（可用于每次新建HTML模板）：
<!DOCTYPE html>
<html>
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="网页描述" />
<link href="这里CSS文件引入地址" rel="stylesheet" type="text/css" />
内容www.divcss5.com提供
搞清楚html与CSS关系很重要，也是认识CSS基础。html与CSS关系解释：HTML内放置显示网页要显示的具体内容（图片、文字、动画等）而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。
以上7点是学习CSS的html基础，可能还不完善，但是在以后运用的时候DIVCSS5会给大家详细、本简单CSS教程分为15节，此节DIV CSS教程以文字内容为主，以后会穿插更多实例和图例、跟我做的内容希望对大家能有帮助。
*请认真填写需求信息，我们会在24小时内与您取得联系。
