这些常用的HTML标签，你还不知道吗？

着互联网的不断发展与前端开发技术的不断进步，越来越多的人想在前端开发市场中分一杯羹，而HTML语言凭着它简单易懂的特性成为了不少计算机萌新的入门语言。那么什么是HTML呢？

什么是HTML

HTML，即超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。而HTML标签是HTML语言中最基本的单位，是HTML最重要的组成部分。

什么是HTML标签

HTML标签是由一对尖括号括起来的关键词，像<html>、<body>等。
HTML标签通常是成对出现的，第一个标签是开始标签，第二个标签是结束标签。
标签不区分大小写，最好用小写。
标签可以嵌套，但是不可以交叉嵌套，如<a><b></a></b>。
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭合标签.如<br/> <hr/> <img />等。

标签分类

标签一般分为两种：

1. 块级标签

占一整行的标签。如<h>、<p>、<div>、<form>等

2. 行内标签

可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等

3. 块级标签特点

总是在新行上开始
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

4. 行内标签特点

和其他元素都在一行上
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

HTML特殊字符

平时写代码很少用到HTML的特殊字符，最常用的可能是（空格）了，但有时在移动端为了节省时间，可能会用这些字符实现某种特殊效果。

使用方法：

这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；
编号用在HTML中时，需要在前面加上&#符号；
用于CSS文件中，但是需要用反斜杠\转义；
用于JavaScript，和CSS用法一样，不过要用\u来转义。

常用HTML特殊字符

HTML基本标签简介

<!DOCTYPE html>标签

作用：声明文档的解析类型(document .compatMode)，避免浏览器的怪异模式。

浏览器有怪异模式（BackCompat）和标准模式（CSS1Compat）两种模式，那么何为怪异模式和标准模式呢？

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,，如果是这样的话那就很麻烦了-------浏览器按照自己的方式解析渲染页面，即在不同的浏览器显示不同的样式。

但是如果你的页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

<meta>标签

http-equiv属性

顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

页面编码：

页面刷新和跳转

解决IE浏览器兼容性问题

name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

供搜索引擎使用（关键词）

网站信息描述

<title>标签

title标签写网站头部信息，即网页标签的名称：

<title>开云见日</title>

<link>标签

link标签有两个作用：

1.设置标签页图标：

2.外联CSS文件：

<style>标签

用于存放或编写css文件：

<style type="text/css"></style>

<script>标签

1.引进文件

<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

2.写js代码

<script type="text/javascript">...</script>

常用标签

<hn>：n的取值范围是1~6; 从大到小. 用来表示标题.
<p>：段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>：加粗标签.
<strike>：为文字加上一条中线.
<em>：文字变成斜体.
<sup>和<sub>：上角标和下角表.
<br>：换行.
<hr>：水平线
<div>：白板，本身没有特性，块级标签。
<span>：白板，本身没有特性，行内标签。

<sup>和<sub>的使用

<p>这个文本包含 <sub>下标</sub>文本。</p>

<p>这个文本包含 <sup>上标</sup> 文本。</p>

<a>标签

作超链接：跳转到指定url

作锚点：条转到指定id

<img>标签

属性如下：

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放

HTML还有很多标签，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移动应用开发大潮下，使用web技术进行移动应用开发正变得越来越流行，慢慢会变成以HTML为核心的技术栈配合数据库的天下。让我们找准时代发展方向，努力学习，成为时代的弄潮儿吧!

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是倾斜同样适用于标签
<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	颜色
size	0-7
face	字体

hr水平线

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

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

练习一、

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

内容如下：

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

练习二、

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

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

过web前端开发的都知道，每个标签都自带样式，比如body自带margin，a标签自带下划线，li标签自带小圆点，但是你知道更具体的吗？以下的文档还原了w3c对每个标签最初的定义，收藏一下，对你一定有帮助。

@charset "utf-8";/*@charset "gb2312";*//**
* ============================================================================
* 版权所有: 切版
* 网站地址: http://www.qieban.cn
* 该文件为W3C为标签赋予最原始样式规则、制作参考无实际作用
* ----------------------------------------------------------------------------
**/ 
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3,
h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }

切版，切图网旗下靠谱的web前端外包服务切图客群体。http://www.qieban.cn/

在线咨询

上一篇：html禁止浏览器文本框填充，烦人的记录都走开
下一篇：d3.js绘制的柱状图html页面源码

您的项目需求

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

整合营销服务商