html标签使用方法（HTML常用标签）
哈喽大家好，我是公众号作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
第一阶段 HTML504 HTML常用标签
1 什么是标签及其分类
在HTML页面中，带有“< >”符号的元素被称为HTML标签，<html>、<head>、<body>都是HTML标签。所谓标签就是放在”<>”标签符中表示某个功能的编码命令，也称为HTML标签或HTML元素。
1.双标签: <标签名>内容<标签名>
2.单标签: <标签名/>（数量非常少）
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
2 标签嵌套和并列关系
标签的相互关系就分为两种：
1 嵌套关系: <head>和<title>
2 并列关系: <head>和<body>
倡议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。
经常听到有人说：
普通青年 Dreamweaver
文艺青年 sublime
高手和傻子用记事本
其实，用什么工具不重要，重要的是我们的技术要过硬。我看大家都挺文艺的，所以，我们就用sublime来编写代码，sublime非常轻便，只有几十兆，但功能却非常强大。
打开后先保存为html文档，再开始编辑，这个软件非常智能，你只需要输入首个字母，下面就会自动为你展示相关的代码。
5 sublime生成html骨架
这里有个小技巧，可以为我们节约很多时间
写入html:5或者“！”再按下tab键即可完成框架，注意是英文的感叹号！所有的符合都是英文的，中文的符号不能用作代码。
6 文档类型<！doctype>
<!doctype html> 这句话就是告诉我们使用哪个html版本
注意：一些老网站可能用的还是老版本的文档类型比如XLHTML之类的，但是我们学的是HTML5而且HTML5的文档类型兼容很好（向下兼容的原则），所以大家放心的使用HTML5的文档类型就好了。
7 字符集简介
<meta charset=”UFT-8”>
UFT-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
GB2312简单中文包括6763个汉字
BIG5繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
8 标签的语义化及其标题标签
白话：所谓标签语义化，就是指标签的含义。
为什么要有语义化标签?
1 方便代码的阅读和维护
2 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3 使用语义化标签会具有更好地搜索引擎优化
核心：合适的地方给一个最为合理的标签。
语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。什么叫可读性？比如颜色，我们可以用color表示，但你用abc表示就叫可读性差。
遵循的原则：先确定语义的HTML，再选合适的CSS。
HTML标签
首先HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。
排版标签
排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签。
标题标签（熟记）
单词缩写：head头部标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即<h1> <h2> <h3> <h4> <h5> <h6>
标题标签语义：作为标题使用，并且依据重要性递减，其基本语法格式如下：
<h1>标题文本</h1>
注意：h1标签因为重要，尽量少用，不要动不动就向你扔了一个h1。一般h1都是给logo使用。
9 段落标签和水平线标签
段落标签（熟记）
单词缩写：paragraph段蓓
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
<p>文本内容</p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签（认识）
单词缩写：horizontal横线
<hr/>是单标记
11 换行和div span标签
换行标签（熟记）
单词缩写：break打断、换行
<br />也是单标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
div 、 span标签（重点）
Div、 span是没有语义的是我们网页布局主要的2个盒子
div就是 division的缩写分割，分区的意思其实有很多div来组合网页。
span，跨度，跨距；范围
语法格式：
<div>这是头部</div> <span>今日价格</span>
12 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
13 标签属性
<标签名 属性1=”属性值1” 属性2=”属性值2”……> 内容 </标签名>
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。
14 图像标签（重要）
其基本语法格式如下：
<img scr=”图片URL”/>
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
15 链接标签
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href=”跳转目标” target=”目标窗口弹出方式”>文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_se和_bank两种，其中_se为默认值，_bank为在新窗口中打开方式。
1 外部链接需要添加h t t p……
2 内部链接直接链接内部页面名称即可,比如<a href=" index .html”>首页</a>
3 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为#（ 即href=”#”），表示该链接暂时为一个空链接。
4 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
16 锚点定位（难点）
通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：
1 使用<a herf=”# id名 ” >链接文本</a>" 创建链接文本。
2 使用相应的id名标注跳转目标的位置。
<a herf=”#aaa”></a>
<h3 id=”aaa”></h3>
17 base标签
base可以设置整体链接的打开状态（在新窗口打开页面）
<base target=”_blank” />
18 特殊字符标签（理解）
19 注释标签
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：
<！--注释语句-->
1 多使用注释标签这是非常好的代码习惯
2 注释标签里面的内容是给程序员（人）看的，浏览器是不执行。
3 HM注释的快捷键ctr1 /
本章已结束，下篇文章将分享《05相对路径》小伙伴们不要错过哟！上述内容是作者本人的学习笔记，需要原视频学习资料可以在公众号回复关键词“领取资料”
或者
,
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
