整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
被标记的缩写词如下：
The<abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.
浏览器支持
所有主流浏览器都支持 <abbr> 标签。
注释：IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签。
标签定义及使用说明
<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。
通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
提示和注释
提示：在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。
HTML 4.01 与 HTML5之间的差异
无。
全局属性
<abbr> 标签支持 HTML 的全局属性。
事件属性
<abbr> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
/一、html
//a、HTML语法规范
//a.1基本语法概述
1、HTML标签是由尖括号包围的关键字，例如,
2、HTML标签通常是成对出现的，例如和,我们成为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
3、有些特殊的标签是单个标签（极少情况），例如
，我们称为单标签
//a.2标签关系
双标签关系可以分为两类：包含关系和并列关系。
//b、HTML基本结构标签
//b.1第一个HTML网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写的。
HTML页面也称为HTML文档
标签名 | 定义 | 说明 |
<html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容，基本都是放到body里面的 |
必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
//c、开发工具vscode
1、<!DOCTYPE>标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>这句代码的意思是：当前页面采用的是HTML5来显示页面。
2、lang语言
用来定义当前文档显示的语言：
a、en定义语言为英语
b、zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义zh-CN的文档也可以显示英文
这个属性对于浏览器和搜索引擎（百度、谷歌等）还是有作用的
3、charset字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在标签内，通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必须写的代码，否则可能引起乱码的情况，一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8",不要写成"utf-8"或"UTF8"。
//d、HTML常用标签
//d.1标签语义
学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
//d.2标题标签
-
(重要)
为了使网页更具有语义，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题集
-
特点：
1、加了标题的文字会变得更加粗，字号也会依次变大。
2、一个标题独占一行。
//d.3段落和换行标签（重要）
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干段落。
<p>我是一个段落标签</p>标签语义：可以把HTML文档分割为若干段落。
特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落和段落之间保有一个较大的空隙。
在HTML中，一个段落中的文字从左到右依次排列，直到浏览器的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签
<br />
单词break的缩写，意为打断，换行。
特点：
1、单标签
2、
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
//d.4文本格式标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更重要。
语义 | 标签 | 说明 |
加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong></strong>标签加粗，语义更强烈 |
倾斜 | <em><em> 或者<i><i> | 更加推荐使用<em><em>标签，语义更加强烈 |
删除线 | <del><del>或者<s><s> | 更加推荐使用<del><del>标签，语义更加强烈 |
下划线 | <ins><ins>或者<u><u> | 更加推荐<ins><ins>标签，语义更加强烈 |
//d.5<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容。
<div>这是头部</div>
<span>今日价格</span>div是division的缩写，表示分割，分区，span意为跨度，跨距。
特点：
1、<div>标签用来布局，但是现在一行只能放一个<div>，大盒子。
2、<span>标签用来布局，一行上可以有多个<span>,小盒子
//d.6图像标签和路径（重点）
1、图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像url"/>单词image的缩写，意为图像
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本，图像不能显示的文字 |
title | 文本 | 提示文本，鼠标放到图像上，显示文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器
刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收
HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)
标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的
读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签
每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）
目前主流的浏览器分为五种
Chrome谷歌浏览器 （Webkit内核，V8 js引擎）
Firefox火狐浏览器 （Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器 （Presto内核） 主要市场：移动端
Safari 苹果浏览器 （Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下
标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意
PS: 所有的标记符号都是半角英文
众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴
| 编辑器 | 描述 |
|---|---|
| EditPlus | 手写模式，适合初学手写，无代码提示(有IE调试视图) |
| Sublime | 插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便 |
| Dreamweaver | 适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图) |
| 插件名 | 描述 | 详情请戳 |
|---|---|---|
| emmet | 前端自动补全，提供快捷补全方式 | |
| ColorPicker | 调色板，颜色选择器 | |
| SublimeTmpl | sublime模板，可以快速创建一个HTML模板 | |
| view in browser | 用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页) | |
| LiveReload | 实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新) | 谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载 |
| Color Highlighter | CSS颜色代码高亮及颜色预览提示 | |
| CSS3 | CSS3的代码高亮提示 | 还针对了CSS3的选择器及锚类选择器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代码提示 | |
| Sublime-Better-Completion | 可自选开启代码提示，支持jQ、js、bootstrap、php、sql ... | 仓库地址此插件只能通过Github克隆下载安装安装方法 |
注：Github 网页中 下面是有详细的使用方法 packagecontrol.io官网 里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是标签，主要用于文档类型的声明 |
| charset="utf-8" | 声明字符编码集 |
| http-equiv="Content-Type" | 把Content属性关联到HTTP头部(协议头) |
HTML模板
简单了解，并不需要熟练掌握
Dom节点树
.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名
接下来所有的标签元素学习都在body标签里面去敲打实现、
为了突出标题，字体大小和加粗发生相应的改变
<h1>我是大主题</h1> <h2>我是大主题</h2> <h3>我是大主题</h3> <h4>我是大主题</h4> <h5>我是大主题</h5> <h6>我是大主题</h6>
<!doctype html><!-- 让浏览器使用html5的标准解析 --> <html> <head> <!-- 设置字符编码集让浏览器使用utf8解析当前网页 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" /> <meta name="description" content="网页描述，八十字内" /> <title>浏览器标签页上的网页标题</title> </head> <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 --> <h1>我是大标题</h1> <h2>我是主题2</h2> <h3>我是主题3</h3> <h4>我是主题4</h4> <h5>我是主题5</h5> <h6>我是主题6</h6> </body> </html>
可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）
h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)
<p> 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。 </p>
刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示
| 符号 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引号 | " |
| 版权 | © |
| ×叉 | × |
| & | & |
| 符号 | 描述 |
|---|---|
| B标签 | 物理加粗，页面呈现加粗状态. |
| Strong标签 | 不仅能加粗，还利于搜索引擎优化 |
<b>物理加粗，页面呈现加粗状态.</b> <strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>
可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>
链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置
<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面 <a href="#"></a> 跳转到当前页面(回归到页面顶部) <a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效 <a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a> <a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少
点击#flag的a标签的时候会跳到到上面h2标签
只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)
| 描述 | 标签 |
|---|---|
| 滚动标签 | marquee |
| 字体标签 | font |
| 定义水平线 | hr |
marquee
| 属性 | 描述 |
|---|---|
| direction | 滚动方向 |
| behivior | 行为 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滚动 |
| scroll | 滚动 |
| slide | 滑落 |
| 属性 | 描述 |
|---|---|
| color | 颜色 |
| size | 0-7 |
| face | 字体 |
与font相似，拥有color和size属性
hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、
结合今天所学，写一个简单的网页
内容如下：
写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字
在习题一的文章底部，使用滚动标签进行滚动方向为45°
*请认真填写需求信息，我们会在24小时内与您取得联系。
