学习基础的html代码知识（⼊门篇）
Html介绍
1、定义
HTML(Hyper Text Markup Language ) ： 中⽂译为“超⽂本标记语⾔”，主要是通过html标记对⽹页中的⽂本，图⽚，声⾳等内容进⾏描述。
HTML之所以称为超⽂本标记语⾔，不仅是因为他通过标记描述⽹页内容，同时也由于⽂本中包含了所谓的“超级链接”，通过超链接可以实现⽹页的跳转。从⽽构成了丰富多彩的Web页⾯。
2、结构
1、HTML基本⽂档格式
1<!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <title>FirstDemo</title>
6 </head>
7 <body>
8
9 </body>
10 </html>
2、HTML基本⽂档格式—<html> 标记
1 -- <html>称为根标记，⽤于告知浏览器其⾃⾝是⼀个 HTML ⽂档，<html>标记标志着HTML
⽂档的开始，</html>标记标志着HTML⽂档的结束，在他们之间的是⽂档的头部和主体内容。
2 -- <html lang="en">向搜索引擎表⽰该页⾯是html语⾔，并且语⾔为英⽂⽹站，其"lang"
的意思就是“language”，语⾔的意思，⽽“en”即表⽰english
3 -- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中⽂站还是英⽂站，所以这句话
就是让搜索引擎知道，你的站点是中⽂站，对html页⾯本⾝不会有影响
3、HTML基本⽂档格式—<head>标记
-- <head>标记⽤于定义HTML⽂档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要
⽤来封装其他位于⽂档头部的标记。
-- ⼀个HTML⽂档只能含有⼀对<head>标记，绝⼤多数⽂档头部包含的数据都不会真正作为内容
显⽰在页⾯中。
4、HTML⽂档头部相关标记—<title>标记
-- <title>标记⽤于定义HTML页⾯的标题，即给⽹页取⼀个名字，必须位于<head>标记之内。
⼀个HTML⽂档只能含有⼀对<title></title>标记，<title></title>之间的内容将显⽰在浏览
器窗⼝的标题栏中。其基本语法格式如下：
<title>⽹页名称</title>
5、HTML基本⽂档格式—<body> 标记
-- <body>标记⽤于定义HTML⽂档所要显⽰的内容，也称为主体标记。浏览器中显⽰的所有⽂本、
图像、⾳频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展⽰给⽤户看
的。
-- ⼀个HTML⽂档只能含有⼀对<body>标记，且<body>标记必须在<html>标记内，位于<head>头
部标记之后.
3、html标签关系
1.嵌套关系
2.并列关系
嵌套关系：类似⽗亲和⼉⼦之间的关系
<html>
<head></head>
<body></body>
</html>
并列关系：类似与兄弟之间的关系
<head></head>
<body></body>
4、html标签分类
1、HTML标记—双标记
-- 双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：<；标记名></标记名>
该语法中“<；标记名>”表⽰该标记的作⽤开始，⼀般称为“开始标记（start tag）”，
“</标记名>” 表⽰该标记的作⽤结束，⼀般称为“结束标记（end tag）”。和开始标记相⽐，
结束标记只是在前⾯加了⼀个关闭符“/”。
2、HTML标记—单标记
-- 单标记也称空标记，是指⽤⼀个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：<；标记名/>
5、单标记详解
1、⽔平线标记<hr />
-- 在⽹页中常常看到⼀些⽔平线将段落与段落之间隔开，使得⽂档结构清晰，层次分明。这些⽔平线可以通过插⼊图⽚实现，也可以简单地通过标记来完成，<hr />就是创建横跨⽹页⽔平线的标记
其基本语法格式如下：
<hr />是单标记，在⽹页中输⼊⼀个<hr />，就添加了⼀条默认样式的⽔平线。
2、HTML标记—注释标记
-- 在HTML中还有⼀种特殊的标记——注释标记。如果需要在HTML⽂档中添加⼀些便于阅读和理解但⼜不需要显⽰在页⾯中的注释⽂字，就需要使⽤注释标记。其基本语法格式如下：
<!-- 注释语句 -->
-- 注释内容不会显⽰在浏览器窗⼝中，但是作为HTML⽂档内容的⼀部分，也会被下载到⽤户的计算机上，查看源代码时就可以看到。
3、换⾏标记<br />
--在HTML中，⼀个段落中的⽂字会从左到右依次排列，直到浏览器窗⼝的右端，然后⾃动换⾏。
如果希望某段⽂本强制换⾏显⽰，就需要使⽤换⾏标记<br />，这时如果还像在word中直接敲
回车键换⾏就不起作⽤了。
4、图像标记<img />
-- HTML⽹页中任何元素的实现都要依靠HTML标记，要想在⽹页中显⽰图像就需要使⽤图像标记，接
下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：
<img src="图像URL">
-- 该语法中src属性⽤于指定图像⽂件的路径和⽂件名，他是img标记的必需属性。
6、双标记详解
1、段落标记<p>
-- 在⽹页中要把⽂字有条理地显⽰出来，离不开段落标记，就如同我们平常写⽂章⼀样，整个⽹
页也可以分为若⼲个段落，⽽段落的标记就是<p>。
-- <p>是HTML⽂档中最常见的标记，默认情况下，⽂本在⼀个段落中会根据浏览器窗⼝的⼤⼩⾃
动换⾏。
2、标题标记<hx>
-- 为了使⽹页更具有语义化，我们经常会在页⾯中⽤到标题标记，HTML提供了6个等级的标题，
即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：
<hx>标题⽂本</hx>
3、⽂本样式标记
-- 多种多样的⽂字效果可以使⽹页变得更加绚丽，为此HTML提供了⽂本样式标记<font>，⽤来控
制⽹页中⽂本的字体、字号和颜⾊。其基本语法格式如下：
<font>⽂本内容</font>
4、⽂本格式化标记
-- 在⽹页中，有时需要为⽂字设置粗体、斜体或下划线效果，这时就需要⽤到HTML中的⽂本格式化
标记，使⽂字以特殊的⽅式显⽰。
⽂本格式化常⽤标记：
<i>斜体⽂本标签</i>
html学多久
<b>⽂本加粗</b>
<u>下划线</u>
7、超链接
1、创建超链接
-- 在HTML中创建超链接⾮常简单，只需⽤<a></a>标记环绕需要被链接的对象即可，其基本语法
格式如下：
<a href="跳转⽬标"target="⽬标窗⼝的弹出⽅式">⽂本或图像</a>
-- 在上⾯的语法中，<a>标记是⼀个⾏内标记，⽤于定义超链接，href和target为其常⽤属性，
下⾯对它们进⾏具体地解释。
2、超链接属性
-- href：⽤于指定链接⽬标的url地址，当为<a>标记应⽤href属性时，它就具有了超链接的功能
-
- target：⽤于指定链接页⾯的打开⽅式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗⼝中打开⽅式。-- <base />可以设置整体链接的打开状态
3、超链接注意事项
注意:
-- 暂时没有确定链接⽬标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表⽰该链
接暂时为⼀个空链接。
-- 不仅可以创建⽂本超链接，在⽹页中各种⽹页元素，如图像、表格、⾳频、视频等都可以添加
超链接。
4、锚点链接
通过创建锚点链接，⽤户能够快速定位到⽬标内容。
创建锚点链接分为两步：
-- 使⽤“<a href=”#id名“>链接⽂本</a>”创建链接⽂本。
-- 使⽤相应的id名标注跳转⽬标的位置。
8、特殊符号标记
9、标签语义化
- 标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
- 标签语义化意义：
1:⽹页结构合理
2：有利于seo：和搜索引擎建⽴良好沟通，有了良好的结构和语义你的⽹页内容⾃然容易
被搜索引擎抓取；
3:⽅便其他设备解析（如屏幕阅读器、盲⼈阅读器、移动设备）
4：便于团队开发和维护
- 注意事项：
1：尽可能少的使⽤⽆语义的标签div和span；
2：在语义不明显时，既可以使⽤div或者p时，尽量⽤p
3：不要使⽤纯样式标签，如：b、font、u等，改⽤css设置。
4：需要强调的⽂本，可以包含在strong或者em标签中strong默认样式是加粗（不要⽤b），em是斜体（不⽤i）；
10、新标签语义
谢谢⽀持
本⽂分享给想学HTML的朋友，⼀起学习前端知识，共同进步！
我是【码民的飘柔】，如果觉得写得可以的话，请点个分享、点赞、评论吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。