search

博客列表 >【前端开发-HTML】之HTML文档结构，html-css元素与属性的关系，HTML语义化的结构元素与文本元素，链接元素，列表元素介绍

【前端开发-HTML】之HTML文档结构，html-css元素与属性的关系，HTML语义化的结构元素与文本元素，链接元素，列表元素介绍

林辉
林辉原创
2020年07月27日 09:22:50744浏览

html文档结构

HTML文档的结构，我们可以将它理解为网页的语法结构，一种编码的格式。
下面就是一个完整的HTML文档。

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.         <head>
  4.             <meta charset="UTF-8">
  5.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.             <title>Document</title>
  7.         </head>
  8.         <body>
  9.         </body>
  10.     </html>

接下来我们就以上HTML文档来逐个解释。
首先，利用< !DOCTYPE>对文档类型进行说明，告诉浏览器这是一个html5的文档 。

  1. <!DOCTYPE html>

HTML文档是以< html>标签开始并以< /html>结束的。 也就是说，网页的内容全部全部包含在< html>与< /html>之间。
lang=”en”是属性，表示当前页面的主演语言。

  1. <html lang="en">
  2. ......
  3. </html>

所有的HTML文件都有两个主要结构：头部head和主体body。 通常将文档的描述信息放在头部，而将文档的主题信息（浏览器上房显示的信息）放在主体部分

  1. <html>
  2.     <head>
  3.         ......
  4.     </head>
  5.     <body>
  6.         ......
  7.     </body>
  8. </html>

UTF-８为当前文档字符编码集，viewport是视口，为当前文档在浏览器中可以被用户看到的部分。
文档标题放在文档头部的< title>与< /title>之间。
其结构如下：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5. </head>

HTML文档的主体部分包含了在网页中显示的文本、图像、超链接等 在文档的主体部分为用户正在看到和感兴趣。主体部分以< body>标签开始，并以< /body>结束。其结构如下：

  1. <body>
  2.      <!-- 文档主要内容：文本、图像、音频、视频、超链接等。 -->
  3.     <h2 style="color: red;">欢迎大家选择Rinki.me来学习Web开发技术</h2>
  4. </body>

最后，再把HTML文档的完整结构以及注释献上：

  1. <!-- html文档结构 -->
  2. <!-- 告诉浏览器这是一个html5的文档 -->
  3. <!DOCTYPE html>
  4. <!-- <html>....</html>：根标签，根元素，代表整个htnl文档 -->
  5. <!-- lang:en：属性，表示当前页面的主演语言 -->
  6. <html lang="en">
  7. <!-- 头元素：它的内容不在页面中显示，这是给浏览器和搜索引擎使用 -->
  8.     <head>
  9.     <!-- 当前文档字符编码集 -->
  10.         <meta charset="UTF-8">
  11.     <!-- viewport: 视口，当前文档在浏览器中可以被用户看到的部分（可视区域） -->
  12.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.         <title>Document</title>
  14.     </head>
  15. <!-- 主体元素：这才是用户正在看到和感兴趣 -->
  16.     <body>
  17.         <h2 style="color: red;">欢迎大家选择Rinki.me来学习Web开发技术</h2>
  19.     </body>
  20. </html>
  21.     <!-- 文档主要内容：文本、图像、音频、视频、超链接等。 -->

html-css元素与属性的关系

我们来了解一下标签、元素、属性、样式的关系与区别

标签和元素

比如，<p>这就是一个标签； <p>这里是内容</p>这就是一个元素。另外还有下列例子也都是元素：

  1. <span>这里是内容</span>
  2. <div>这里是内容</div>。

也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；
而单标签是个例外。例如<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。
html网页就是由各种个样不同的元素构成的文件，可以说html元素就是构成html文件的基本对象，标签就是用来标记HTML元素的。

属性和样式

1.属性：

属性就是为html元素提供各种附加信息的。它总以“属性名=属性值”这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
例如：

  1. <p style="color: green;">Hello,Rinki.me</p>

这里的style就是属性。三大通用属性有style,id,class。一个元素里可以有多个属性，各属性之间以空格相分离。如，<p 属性1 属性2 ...></p>

2.样式：

样式是一种改变 HTML 元素样式的方式。能够通过使用 style 属性直接将样式添加到 HTML 元素，也可以加在style标签中放在head里。或者在独立的样式表中（CSS 文件）进行定义，样式有值，一般都会带单位,以“样式：样式值”这样的格式出现。例如：

  1. <p style="color: green;">Hello,Rinki.me</p>

这里的color就是样式，green就是该样式的值。直接将添加到 HTML 元素。

加在style标签中放在head里时如下：

  1.     <style>
  2.         p {
  3.             color: green;
  4.         }
  5.     </style>

样式也可以有多个，各个样式之间用；隔开。如，某选择器{样式1：样式1值；样式2：样式1值；…}
注意各个样式之间的标点符号有所不同。

HTML语义化

1. HTML语义化的结构元素

首先我们说说元素的层级关系

a. 元素的层级关系

一般的网站层级在<bady>…</bady>中通常为如下：

  1. <body>
  2.     <!-- 页面 -->
  3.     <div id="header">
  4.         <!-- 导航 -->
  5.         <ul>
  6.             <li><a href="">index</a></li>
  7.             <li><a href="">about</a></li>
  8.             <li><a href="">news</a></li>
  9.             <li><a href="">concant</a></li>
  10.         </ul>
  11.     </div>
  12.     <!-- 主体 -->
  13.     <div id="main">
  14.         <div class="left">广告</div>
  15.         <div class="content">内容区</div>
  16.         <div class="right">推荐</div>
  17.     </div>
  18.     <!-- 页脚 -->
  19.     <div id="footer">
  20.         <ul>
  21.             <li><a href="">baidu.com</a></li>
  22.             <li><a href="">taobao.com</a></li>
  23.         </ul>
  25.     </div>
  26. </body>

分为页眉，主体，和页脚。页眉放导航，搜索栏等。主体放网站主要内容，页脚放上网页简介，联系方式，友情链接，页脚导航等。

b. HTML语义化结构

让 HTML文本 语义化，就是让 HTML元素 能够表明其内部内容的意义。

到了HTML5，为了能浏览代码时，能更清楚更快的知道各个元素的意义。就不都用<div></div>和class配合使用了。而是使用语义化的元素来表示。
如下：

  1. <body>
  2.     <!-- 页面 -->
  3.     <div id="header">
  4.         <!-- 导航 -->
  5.         <nav>
  6.             <a href="">index</a>
  7.             <a href="">about</a>
  8.             <a href="">news</a>
  9.             <a herf="">concant</a>
  10.         </nav>
  11.     </div>
  12.     <!-- 主体 -->
  13.     <main>
  14.         <section class="ads">广告</section>
  15.         <article class="content">内容区</article>
  16.         <section class="recomand">推荐</section>
  17.     </main>
  18.     <!-- 页脚 -->
  19.     <footer>
  20.         <!-- 导航 -->
  21.         <nav>
  22.             <a href="">baidu.com</a>
  23.             <a href="">taobao.com</a>
  24.         </nav>
  26.     </footer>
  27. </body>

用<nav>…</nav>来代替<ul>…</ul>,来表示导航；
用<main>…</main>来代替<div class="...">…</div>，表示主体；

<footer>…</footer>来代替<div class="...">…</div>表示页脚。
这样就是一目了然的知道整个网页的结构。

2. HTML语义化的文本元素

接下来举几个例子来说明一下HTML语义化的文本元素。
1.表示时间
相比于<span>…<span>,用<time>…</time>会来的更加清楚

  1. <span>2020 / 07 / 26</span>
  2. <time>2020 / 07 / 26</time>

2.表示电话

相比于<p>…<p>,用<tel>…</tel>会来的更加清楚

  1. <p>Rinki.me:1881888188</p>
  2. <tel>Rinki.me:1881888188</tel>

3.表示地址

相比于<p>…<p>,用<address>…</address>会来的更加清楚

  1. <p>Rinki.me:1881888188</p>
  2. <address>Rinki.me:1881888188</address>

另外还有以下：

  • <header>头部栏（如：Logo，标题）
  • <nav>导航（如：各个部分的链接）
  • <article>文章（如：独立的一篇文章）
  • <figure>流内容（如：图像、图表、照片、代码）
  • <aside>侧边栏（如：相关信息，广告）
  • <footer>底部栏（如：作者信息，联系信息）

等等还有好多，大家如果有兴趣，可以去HTML文档查看。

总结来说，HTML语义化有以下3个好处

  1. 有利于SEO
  2. 代码可读性更高
  3. 访问性更好

链接元素

HTML链接是一个Web资源和另一个资源的连接。
基本结构如下：

  1.  <a href="..." >...</a>

1. 经典用法

href是当前a标签的链接指向，target可以指定当前链接的打开方式。_self:当前页面打开，_blank:新页面打开

  1.  <a href="htpps://blog.rinki.me" target="_self">Rinki.me</a> 
  2.   <a href="htpps://blog.rinki.me" target="_blank">Rinki.me</a>

在href=””中添加标识，还可用作电话拨打，邮件发送软件的联动。
例如：

  1. <!-- 打电话 -->
  2. <a href="tel:18888888888">热线电话</a> 
  3. <!-- 发邮件 -->
  4. <a href="mailto:info@rinki.me">邮件</a>

以上为链接元素的经典用法，在不同页面中跳转，跨域。

2. 锚点用法

通过链接元素与id配合可以在当前页面中跳转。
如下所示：

  1.    <a href="#i">抓到我啦</a>
  2.     <a href="#pig">抓到猪猪啦</a>
  3.     <a href="#dog">抓到狗狗啦</a>
  4.     <a href="#cat">抓到猫咪啦</a>
  5.     <h2 style="margin-top: 1000px;" id="i">我在这</h2>
  6.     <h2 style="margin-top: 1300px;" id="pig">猪猪在这</h2>
  7.     <h2 style="margin-top: 1600px;" id="dog">狗狗在这</h2>
  8.     <h2 style="margin-top: 1900px;" id="cat">猫咪在这<a href="#">回到顶部</a></h2>

在网页中，点击“抓到我啦”文字可立刻跳转到“我在这”的部分，其他同理。

在实际使用中，id的场景会非常的少因为，浏览器不检查id的唯一性，而js又依赖它的唯一性来获取元素，所以以后能不用就不用。但有两种场景中非常常用，也只能用id。那就是
1.锚点
2.表单元素中的控件
第一点的锚点示例已经在上文说明，第二点的表单元素中的控件使用会在《表单元素》章节中说明，可跳转查看。

列表元素

列表元素分为无序列表,有序列表以及自定义列表。无序列表常用于导航，有序列表用于工作计划，购物车等。

无序列表示例：

  1.     <ul>
  2.         <li>html</li>
  3.         <li>css</li>
  4.         <li>javascript</li>
  5.     </ul>

有序列表示例：

  1.    <ol start ="2"> 
  2.         <!-- <li>起床</li> -->
  3.         <li>吃早饭</li>
  4.         <li>上班</li>
  5.         <li>回家</li>
  6.     </ol>

start 属性规定有序列表中第一个列表项目的开始值。

自定义列表示例：

  1.     <dl>
  2.         <!-- 列表项标题 -->
  3.         <dt>php</dt>
  4.         <!-- 列表项内容 -->
  5.         <dd>通用的服务区端编程语言</dd>
  6.         <dd>非常适合快速的Web开发</dd>
  7.         <dt>mysql</dt>
  8.         <dd>免费开源的数据库软件</dd>
  9.         <dd>社区活跃，大厂支持</dd>
  10.         <!-- 通常用来写页脚 -->
  12.     </dl>
上一条：static后期静态绑定-php-27课7.24下一条：php.cn_week1_day2 作业提交【表格与表单】
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多