整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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
TML 文本格式化
加粗文本
斜体文本
电脑自动输出
这是 下标 和 上标
HTML 格式化标签
HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
| 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。 |
在线实例
文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
"计算机输出"标签
此例演示不同的"计算机输出"标签的显示效果。
地址
此例演示如何在 HTML 文件中写地址。
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
文字方向
此例演示如何改变文字的方向。
块引用
此例演示如何实现长短不一的引用语。
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
TML是超文本标记语言。
web标准是由W3C和其它标准化组织制成集合。
结构（对网页元素进行整理和分类-HTML）
表现（设置网页元素的版式，颜色，大小等外观样式-CSS）
行为（模型的定义及交互的表现-JS）
加粗:<strong>和<b>
倾斜：<em>和<i>
删除线：<del>和<s>
下划线：<ins>和<u>
<div>分割分区<span>跨度跨距
图片标签<img/>
属性: src图片路径
alt替换文本，图片无法正常显示
title提示文本，鼠标放到图像显示
width宽度，height高度（只需要修改其中一个）
border边框（无需单位直接写数值）
注意：
①图像标签可以拥有多个属性，必须写在标签名后面
②属性之前不分先后顺序，标签名与属性，属性与属性之间需要空格分开
③属性采取键值对的格式
相对路径：以引用文件所在位置为参考基础
（同一级路径，下一级路径/，上一级路径../）
绝对路径：从盘符开始的路径（\）
常用属性
img ——vspace垂直边距 ，hspace水平边距 align对齐
details,summary，鼠标点击时显示或隐藏
mark 文本中高亮显示，和strong相似
cite 用于引用标记，斜体显示
draggable true选中后可以拖动操作
font定义 font-style font-weight font-size/line-height font-family 顺序不能改变
word-wrap break-word长单词或url地址自动换行
letter-spacing字间距
word-spacing单词间距
line-height行间距
text-decorantion文本装饰unline下划线，overline上划线，line-through删除线
text-indent 2em 首行缩进两个字符
white-space空白符处理 pre
box-sizing:content-box当widthh和height的时候不包括margin和panding
更换图层位置，z轴偏移z-index:-10
align-items:center居中对齐
align-self:center
超链接标签<a>
href链接目标地址
target链接页面打开的方式（_self当前窗口打开,_blank新窗口中打开方式）
外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接（快速定位到页面的某个位置- 添加id属性）
去除超链接样式:text-decoration:none
特殊字符
空格符
小于号< 大于号>
表格标签
align对齐方式
bolder表格边框
cellpadding单元格与内容之间空白
cellspacing单元格与单元格之前空白
合并单元格：rowspan colspan
列表标签
无序列表：ul li
有序列表：ol li
自定义列表：dl dt dd
表单标签
完整表单：表单域<form>，表单控件，提示信息
<form>
——action（指定接受并处理表单数据的服务器程序的url地址）
——method（get/post设置表单数据的提交方式）
——name（指定表单名称）
<input>输入元素
type属性：button（点击按钮）checkbox（复选框）file（输入字段和“浏览”按钮）hidden（隐藏输入字段）image（图片形式提交按钮）password（密码字段）radio（单选按钮）reset（重置按钮）sumbit（提交按钮）text（单行输入字段，默认20个字符）
name属性：（相同的名字——单选框和复选框）区别不同表单元素
value属性：定义input元素值
checked属性：页面首次加载是否选中
maxlength属性：输入字段的最大值
<lable>标签
用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。
<lable>标签的for属性与相关元素的id属性相同
<select>下拉列表元素
-<option>
-selected="selected"默认选中
<textarea>文本域
-cols rows （每行每列字数）
*请认真填写需求信息，我们会在24小时内与您取得联系。
