html
本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改Sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器
HTML起源
刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收
HTML(HyperTextMark-up Language)超文本标记语言
HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)
HTML标签
标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的
Web浏览器
读取 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 适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图)Sublime插件列表
插件名描述详情请戳emmet前端自动补全，提供快捷补全方式ColorPicker调色板，颜色选择器SublimeTmplsublime模板，可以快速创建一个HTML模板view in browser用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页)LiveReload实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新)谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载Color HighlighterCSS颜色代码高亮及颜色预览提示CSS3CSS3的代码高亮提示还针对了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模板
简单了解，并不需要熟练掌握
HTML树状结构
Dom节点树
HTML网页扩展名
.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名
标签的学习
接下来所有的标签元素学习都在body标签里面去敲打实现、
H标签
为了突出标题，字体大小和加粗发生相应的改变
<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> 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。 </p>
特殊符号
刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示
符号描述空格 小于<大于>引号"版权©×叉×&&加粗标签
符号描述B标签物理加粗，页面呈现加粗状态.Strong标签不仅能加粗，还利于搜索引擎优化<b>物理加粗，页面呈现加粗状态.</b> <strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>
可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>
A标签
链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置
<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滑落Font标签
属性描述color颜色size0-7face字体hr水平线
与font相似，拥有color和size属性
hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、
练习一、
结合今天所学，写一个简单的网页
内容如下：
写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字
练习二、
在习题一的文章底部，使用滚动标签进行滚动方向为45°
可以在头部找到我，如有勘误、错别字、尽情见谅很用心的检查了 码了这么久
还没有评论，来说两句吧...