整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML标题H标签：
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。
实验代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿景前端教程</title>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
</html>
TML标签：
所有内容都在<html></html>标签之内；
<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。
<head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；
<body></body>是页面的主体，大部分显示内容都定义在这里。
HTML注释：<!-- -->：
注释不允许嵌套
html常用标签:
h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
<br/>只是回车，<p>是段落。<p>前后会有比较大的空白，而<br/>则没有。
<center>居中显示.
<b>、<strong>粗体，<i>、<em>斜体。<u>下划线。
<sub>2</sub>下标，如：H<sub>2</sub>O
<sup>2</sup>上标，如：10<sup>2</sup>
<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
<hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
<pre> 预格式化 保持本色;
HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格）。
超链接：<a>标签的一些常用属性：href、title、target、name
插入图片：<img src=“路径”/>
列表：dl→(定义列表)，ul→(无序列表)， ol→(有序列表)。
表格：<table>；创建行：<tr>；创建单元格：<td>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。
meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）
<meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>
<meta name="description" content="免费更新最新C#相关技术知识，主要包括：.net基础,网页前端,三层架构,SQL数据库..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码
<meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
<meta name="名字" content="值" />关于网页的描述信息。
<meta http-equiv="名字" content="值" />模拟http响应头信息。
C#编程自学_做最好的.net自学资料站_更多文章请访问：http://www.4k8k.net/
欢迎订阅。
本文，有很多很棘手的问题，例如使用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小时内与您取得联系。
