HTML常用标签

.图片标签img

2.h标题系列（有6个级别）

3.分段标签p

4.换行标签br

5.分割线标签hr

6.特殊字符

<— — 小于号

>— —大于号

&nbsp；— —空格

&— —&符号

"— —双引号

7.a标签做超链接

8.a作为锚点

9.div标签和span标签

div是块级元素，Span是行元素

么是HTML

Hyper Text Markup Language, 超文本标记语言

标记又称为标签(Tag), 一般语法:

它可以有属性(Attribute):

<tagName attributeName="value">, 如:

标签也可以不成对地关闭:

HTML文档由浏览器解释并执行。

HTML文档基本结构

<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页
<html>
<head> ---- 头部, 可包含meta, title等标签

</head>
<body> ---- 主体, 包含主要内容

</body>
</html>

title

网页标题, 显示在浏览器选项卡的标题栏上!

文本排版标签

h1-h6: 内容标题标签
p: 段落
br: 换行
hr: 水平线
strong: 粗体文本
em: 斜体文本
span: 无任何特殊样式的文本
pre: 预格式标签,其中的内容在页面上带格式渲染
small: 比当前字体小的文本

html特殊字符/转义字符

空格
< 小于
> 大于
© 版权符
" 双引号

html注释

图像标签

<img
src="图像地址"
title="鼠标悬停提示"
alt="图像加载错误时的替代文本"
width="宽度"
height="高度"
/>

图像地址分为2种:

1. 相对地址, 如: img/cc.jpg

2. 绝对地址, 如: http://img.bcd.com/2017/1644232421.jpg

超链接

<a href="链接地址" target="目标窗口">文本|图片</a>

目标窗口:

_self: 目标页面在当前窗口打开

_blank: 目标页面在新窗口中打开

如果是在页面具有frameset/frame/iframe的场景下:

_top: 在顶级窗口中打开

_parent: 在父级窗口中打开

_自定义名称: 在指定的特定窗口中打开

三种用法:

1. 页面间链接
<a href="page/login.html"></a>
2. 锚链接
<a href="#help"></a>
help是本页面中一处id为help的标签, 如: 
或者:
help是通过a标签命名的锚记, 如: <a name="help"></a>
3. 功能性链接
唤醒本地安装的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>

div标签

div是一个容器, 常用于页面的布局

标签的分类:

1. 块级标签/块级元素
如: div, h1-h6, p, hr
特征: 独占容器中的一行, 其宽度是容器的100%
2. 行级标签/行级元素
如: span, img, strong, em, a

特征1: 多个行级元素可以同处一行, 其宽度由内容来撑开(auto)

特征2: 大部分行级元素设置其width/height无效

HBuilder常用快捷键

ctrl + D : 删除当前行
ctrl + PgUp : 当前行上移
ctrl + PgDown : 当前行下移
ctrl + / : 注释 | 取消注释
ctrl + shift + F : 整理代码格式
ctrl + C : 复制当前行
ctrl + X : 剪切当前行
ctrl + V : 粘贴
ctrl + Z : 撤消上一步操作
ctrl + S : 保存当前文件
ctrl + shift + S : 保存项目中全部文件
ctrl + Enter : 在当前行的下方插入新行
ctrl + shift + Enter : 在当前行的上方插入新行

以上知识能做的效果图

部分效果

TML

本文，有很多很棘手的问题，例如使用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	调色板，颜色选择器
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模板

简单了解，并不需要熟练掌握

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是倾斜同样适用于标签
我是倾斜 我加了下划线

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	颜色
size	0-7
face	字体

hr水平线

与font相似，拥有color和size属性

hr标签没有结束标签按照早期的习惯也H5也遵循XHTML的解析所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、

练习一、

结合今天所学，写一个简单的网页

内容如下：

写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字

练习二、

在习题一的文章底部，使用滚动标签进行滚动方向为45°

可以在头部找到我，如有勘误、错别字、尽情见谅很用心的检查了码了这么久

在线咨询

上一篇：在手机上如何将PDF文件转换为HTML？小妙招get
下一篇：HTML表单｜如何在HTML页面创建表单的文本域和密码域？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商