- 作者：老汪软件技巧
- 发表时间：2024-09-23 17:01
- 浏览量：
HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型
html>
它的作用有如下几点：
HTML文档声明，告诉浏览器当前的页面是HTML5页面。让浏览器用HTML5的标准去解析识别内容。必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题。
HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)
四.html元素
html元素 表示一个HTML 文档的根（顶级元素），所以它也被称为根元素，所有其他元素必须是此元素的后代
W3C标准建议为html元素增加一个lang属性，作用是帮助语音合成工具确定要使用的发音，帮助翻译工具确定要使用的翻译规则，比如常用的规则：lang=“en”表示这个HTML文档的语言是英文lang=“zh-CN”表示这个HTML文档的语言是中文。
五.head元素
HTML head 元素规定文档相关的配置信息，包括文档的标题，引用的文档样式和脚本等，什么是元数据，是描述数据的数据，这里我们可以理解成对整个页面的配置：常见的配置有如下两个：
网页的标题title 网易云音乐网页的编码meta可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码，一般都使用utf-8编码，涵盖了世界上几乎所有的文字；六.body元素
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构，之后学习的大部分HTML元素都是在body中编写呈现的。
<body>
<input type="text">
<ul>
<li>苹果li>
<li>香蕉li>
<li>橘子li>
<li>橙子li>
<li>瓜子li>
ul>
body>
七.HTML元素
HTML中的元素有很多，但是常用的也就那么几个
p元素、h元素。img元素、a元素、iframe元素div元素、span元素ul、ol、li元素button元素、input元素table、thead、tbody、thead、th、tr、td八.常见的元素h
在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素h1~h6标题元素呈现了六个不同的级别的标题，Heading是头部的意思，通常会用来做标题h1级别最高，而h6级别最低。
注意：h元素通常和SEO优化有关系
九.常见元素p
如果我们想表示一个段落，这个时候可以使用p元素，表示文本的一个段落，p元素是paragraph单词的缩写，是段落、分段的意思，p元素多个段落之间会有一定的间距；
<body>
<p>半天上的秃鹰那张脸p>
<p>半生中的记忆在盘旋p>
<p>第五十三天后的日夜线p>
<p>等黑夜问白天p>
<p>能不能赦免灰色的人间p>
body>
十.常见的元素img
我们应该如何告诉浏览器来显示一张图片呢？使用img元素，img元素将一份图像嵌入文档，img是image单词的所以，是图像、图像的意思，事实上img是一个可替换元素，img常见的有两个元素，其他元素不太常用：比如width height border
src属性：source单词的缩写，表示源，是必须的，它包含了你想嵌入的图片的文件路径。alt属性：不是强制性的，有两个作用，作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本，作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义十一.img元素-图片的路径
设置img的src时，需要给图片设置路径：
网络图片：一个URL地址，网络图片的设置非常简单，给一个地址即可本地图片：本地电脑上的图片，后续会和html一起部署到服务；
本地图片的路径有两种方式：
方式一：绝对路径（几乎不用）从电脑的根目录开始一直找到资源的路径；方式二：相对路径相当于当前文件的一个路径。
提示：对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是/，而不是\
十二.img元素-图片的格式
img图片元素支持的格式非常的多
十三.常见的元素a
在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素，a元素用于定义超链接，用于打开新的URL，超链接元素有两个常见的属性：
href：指定要打开的URL地址，也可以是一个本地地址。target：该属性指定在何处显示链接的资源。
超链接元素跳转打开URL常用的值有如下两个
_self:默认值，在当前窗口打开URL。_blank:在一个新的窗口中打开URL。其他不常用，后面iframe可以讲一下。
<a href="http://www.baidu.com">百度一下a>
十四.a元素-锚点链接
锚点链接可以实现：跳转到网页中的具体位置，锚点链接有两个重要步骤：
在要跳到的元素上定义一个id属性定义a元素，并且a元素的href指向对应的id
十五.a元素-图片链接
在很多网站我们会发现图片也是可以点击进行跳转的img元素跟a元素一起使用，可以实现图片链接
a元素中不存放文字，而是存放一个img元素。也就是img元素是a元素的内容。
十六.a元素-其他URL地址
超链接标签只能用来跳转网页和锚点吗？其实并不是的，我们日常发送邮件和下载一些资源本质上都是超链接
十七.iframe元素
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档，但是目前并不是所有的网页都允许iframe进行嵌套，很多网站都禁止了iframe的嵌套，比如京东等等，如果想要禁用ifrme可以设置X-Frame-Options
<iframe src="https://www.jd.com/?cu=true" frameborder="1">iframe>
有些网站是允许我们进行iframe的嵌套的
<iframe src="https://www.taobao.com/?cu=true" width="800" height="300" frameborder="1">iframe>
十八.iframe和a元素一起使用frameborder属性：规定iframe是否与边框0没有边框1有边框。a元素target、其他值_parent和_top
iframe不仅仅可以到单独的使用，iframe还可以和超链接标签一起使用：
_parent：在父窗口中打开URL。
<a href="https://uland.taobao.com" target="_parent">淘宝一下a>
<iframe src="./link.html" frameborder="1" width="800" height="300">iframe>
<iframe src="./other/a元素所在的网页.html" width="800" height="300" frameborder="1">iframe>
_top：在顶层窗口中打开URL
<a href="https://uland.taobao.com" target="_top">淘宝一下a>
<iframe src="./link.html" frameborder="1" width="800" height="300">iframe>
<iframe src="./other/a元素所在的网页.html" width="800" height="300" frameborder="1">iframe>
_self:在当前页面打开。
<a href="https://uland.taobao.com" target="_self">淘宝一下a>
<iframe src="./other/a元素所在的网页.html" width="800" height="300" frameborder="1">iframe>
十九.div元素、span元素的历史
在HTML中有两个特殊的元素div元素、span元素，div元素：division，分开、分配的意思，span元素：跨域、涵盖的意思，这两个元素有什么作用哪？无所用，无所不用，网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示，后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可，比如h1元素可以是一段普通的文本+CSS修饰样式，这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理，所以，理论上来说，我们的页面可以没有div、span，我们的页面也可以全部都是div span
二十.div元素和span的区别
这个时候有一个问题：我出现一个不就可以了吗？其实它们之间有如下的区别.
div元素：多个div元素包裹的内容会在不同的行显示
一般作为其他元素的父容器，把其他元素包住，代表一个整体。用于把网页分割为多个独立的部分。
span元素：多个span元素包裹的内容会在同一行显示
一般作为其他元素的父容器，把其他元素包住，代表一个整体。用于把网页分割为多个独立的部分。二十一.不常用元素strong元素：内容加粗、强调，通常加粗会使用css样式来完成，开发中很偶尔会使用一下。i元素：内容倾斜，通常斜体会使用css样式来完成，开发中偶尔会用它来做字体图标。code元素：用于显示代码，偶尔会使用用来显示等宽字体。br元素：换行元素，开发中已经不使用。二十二.全局属性
我们发现某些属性只能设置在特定的元素中：比如img元素的src、a元素的href，也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为“全局属性”
常见的全局属性如下：
id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。class：一个以空格分隔的元素的类名（classes）列表，它允许CSS 和Javascript通过类选择器或者DOM方法来选择和访问特定的元素；style：给元素添加内联样式；title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的二十三.总结
这篇文章到这里就结束了，这篇文章我们讲解了HTML中的常见元素，HTML元素是网页构建的基石，这篇文章我们分别介绍了html标签，head标签等等，然后我们讲解了超链接标签和iframe标签的使用，区别了不同跳转方式，HTML中有很多元素很多元素我们都是用不到的其实，这些元素我们了解即可~
