前端大神总结的HTML标签，真的是太全了-连载1

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°

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

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

现在这个社会最害怕的是什么，无非是纸上谈兵这样的人，你对问题的见解，你对事情的看法都有很多独到的解释，但是真正地让你带一个项目，写一行代码的时候，短板就开始暴露，所以对于这样的情况一定要避免。以下内容就是关于HTML的用法介绍，希望对大家的基础提升有所帮助。

首先是最常用的<view>标签与<text>标签

<view>标签也就是盒子模型，在它的里面可以放其他所有标签，<text>标签里面可以写文字，但是我们也可以直接在<view>标签里面写文字。

<view>标签是单独占一行，但是<text>标签却在一行中有两个。

这里就不得不提到一个知识点：行内元素与块级元素。首先，HTML的排版是从上而下进行的，块级元素：不管它的内容有没有达到一整行，它都是会占据一整行，行内元素：不会单独占一行，只会占自己应占的长度，可以在一行中共存。

块级元素：div，p，form，ul，li，ol，dl，form，table

行内元素：span，strong，em，br，img，input，label，select，textarea

<image>标签

也就是图片，我们需要在标签中写上src，后面跟上它的地址，地址可以是本地地址，也可以是网络地址，网络地址写法如下图：

而本地地址就涉及到一个知识点了：相对路径与绝对路径。相对路径：以自己本身A文件为参照物，相对而言B文件所在的路径。可能大家暂时没懂啥意思，我们接着慢慢看，../两个点加一个斜杠，代表着返回上一层（相当于父母），./一个点加上一个斜杠代表同一层（相当于兄弟姐妹），这样大家就好理解多了吧~

这里我在images文件夹中添加了一个图片，但是我此时正在写代码的文件是demo.wxml，我要引入它，就是要返回到上一级的demo文件夹，然后返回到上一级的pages文件夹，找到同一级的images文件夹下的tupian1.png，那么我就应该src="../.././images/tupian1.png"。

而绝对路径就更好写了，直接用一个/表示绝对路径，我们直接src="/images/tupian1.png"就可以啦~

input标签

输入框，可以看到代码中的input标签中间并没有写任何文字，但是我们可以在左边随意输入，我们大家平时使用的登录账号，输入文字都是用这个实现的~

了解着HTML用法，提升自己的能力，是最好的成长。

在线咨询

上一篇：打造炫酷网页：手把手教你用Proton制作粒子动画效果！
下一篇：HTML5的5种存储方式详解

您的项目需求

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

整合营销服务商