简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 详解HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素的使用
Blogger Information
Blog 39
fans 0
comment 2
visits 47042
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
详解HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素的使用
Tlilam的PHP之路
Original
927 people have browsed it

什么是HTML文档？

        HTML是超文本标记语言，浏览器可以直接解析的文本文档。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等！目前HTML5是主流版本，HTML主要可以分为两大部分：文档结构、HTML标签

什么是HTML文档结构？

        HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。

        代码展示一下标准的HTML文档：

<!--  <!DOCTYPE html>它是指示 web 浏览器这个页面使用哪个 HTML 版本进行编写的指令 -->
<!DOCTYPE html>
<!-- 标记< html></html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，
    而</html>则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。 
    lang="语言简写"  这是表示当前页面的主要语言  -->
<html lang="en">
<!-- 头部<head></head>：表示头部信息的开始和结尾，这是给浏览器和搜索引擎使用。
    头部中包含的标记是页面的标题、关键字、描述等内容，它本身不作为内容来显示，但影响网页显示的效果。  -->
<head>
  <meta charset="utf-8">
  <title>网页的标题</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<!-- 主体<body></body>：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
  用户真正浏览的区域，普通用户感兴趣的都是展示在这里 -->
<body>
    <h1>PHP中文网，万岁！</h1>
</body>
</html>

        运行结果图：

1595854135(1).jpg

什么是元素和属性

        HTML元素是组成HTML文档最基本的部件，它是用标签来表现的，例如<p>元素也叫<p>标签。这里提示一下HTML标签不区分大小写，但最好规范统一使用小写！

        HTML元素可以按另一种方式分为“块元素”和“行元素”，常见的块元素有：有div，和h1～h6，hr，ol，table等，常见的行元素或者叫行内元素：span，strong，input，a等等，<div>是通用块元素：通用容器，该元素本身无任何意义，<span>是通用行内元素，行内元素通常不会直接暴露出来，应该放在一个块元素中。下面是块元素和行元素的特点：

块级元素

  1.   总是从新的一行开始

  2.   高度、宽度都是可控的

  3.   宽度没有设置时，默认为100%

  4.   块级元素中可以包含块级元素和行内元素

行内元素

  1.   和其他元素都在一行

  2.   高度、宽度以及内边距都是不可控的

  3.   宽高就是内容的高度，不可以改变

  4.   行内元素只能行内元素，不能包含块级元素

        元素的属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。例如要设置<p>元素中文字内容的颜色为绿色，这时就需要用到HTML元素属性了。在<p>元素名称的尖括号内添加了“style="color: green"”内容，浏览器就会按照设定的效果来显示内容。

        三大通用属性: style, id, class，每一个元素必定有这三个属性，不同的标签会有自己专有的属性，例如<a>标签里面有href属性等。 元素标准格式 <element    name1=”value”name2=”value”> 其中element为元素的名称，属性可选且允许有多个属性，name是属性的名称，value是属性的值。

        元素和属性的演示代码：

      <!-- 元素: 用`<p></p>`描述 -->
      <p>我是P元素也是P标签</p>
      <!-- 块元素 h1,p,div等等-->
      <h1>我是独占一行的</h1>
      <p>我也是独占一行的</p>
      <div>我们还可以设置宽高</div>
      <!-- 行元素 a,strong,span,em等 -->
      <a href=""> 我们 </a>
      <strong> 和平 </strong>
      <span> 相处。</span>
      <em> 一行不够就换一行 </em>
      <!-- 三大通用属性: style, id, class 每一个元素都有三个属性 -->
      <p style="color: green;">Hello php.cn</p>
      <p id="hello">Hello php.cn</p>
      <p class="hello">Hello php.cn</p>
      <p style="color: green;" id="hello">我有多个属性</p>
      <!-- 不同的元素有自己的属性 -->
      <a href="URL地址">我有专有的属性href</a> <br />
      <img src="timg.jpg" alt="当图像不存在的时候就会显示这段文字"  width="100"/>

        运行结果图：

1595854918(1).jpg

语义化的结构元素

        结构元素可以分为两种，一种是传统元素的结构，一种是语义化的结构元素，传统元素的结构很简单，就是我们使用<div>标签 给每个div标签独特的ID或class属性划分定义出不同的区块结构。

        传统元素结构代码展示：

    <!-- 页眉 -->
    <div id="header">
      <!-- 导航 -->
      <ul>
        <li><a href="">index</a></li>
        <li><a href="">news</a></li>
        <li><a href="">concant</a></li>
      </ul>
    </div>
    <!-- 主体 -->
    <div id="main">
      <div class="left">广告</div>
      <div class="content">内容区</div>
      <div class="right">推荐</div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
      <!-- 导航 -->
      <ul>
        <li><a href="">baidu.com</a></li>
        <li><a href="">taobao.com</a></li>
      </ul>
    </div>

        HTML5的语义化元素清楚地向浏览器和开发者描述其意义，元素名就能看出这个元素内的内容是什么作用，例如：页面头部<header>，页面主题<main>，页面底部<footer>，导航<nav>。

        下面展示HTML5语义化结构元素代码：

    <!-- header 元素表示页面中的一个内容区块或者整个页面的标题，通常放在页面的头部
        通常用来显示页面中的logo图片、搜索文本框或者导航 -->
    <header>
      <!-- 导航标签 -->
      <nav></nav>
    </header>
    <!--  主体 main 元素包含当前页面的主体内容，网站各个页面可以共享header和footer这些通用元素，
        但main元素应该是彼此不同的   -->
    <main>
      <!-- <aside>用来表示当前页面或者文章的附属信息部分，与内容无关的引用、侧边栏、广告、导航元素组等 -->
      <aside>广告或侧边栏</aside>
      <!-- section 元素用于将页面上的内容划分为独立的区域，如果想将一块内容划分为几段，就使用section -->
      <section>内容区</section>
      <!-- article  元素中的内容独立于文档的其余部分，如果一块内容相对来说比较独立，完整时，使用article； -->
      <article>用户评论区</article>
    </main>
    <!--  页脚 footer元素用来定义底部信息，友情链接以及版权信息。 -->
    <footer></footer>

语义化的文本元素

        语义化的文本元素，都有自身的意义，从元素的字面上就可以得知元素里面放的是什么内容。如<address>元素用了输出地址信息，<code>元素用来输出计算机代码等

        代码展示：

    <!-- time 时间标签 -->
    <time>2020 / 07 / 25</time> <br />
    <!-- sup:上标 -->
    2<sup>4</sup> = 16
    <!-- address 地址信息标签 -->
    <address>php中文网: 中国合肥政务新区</address>
    <!-- del 表示删除相关文字，意图更加明确些 -->
    西瓜: 原价 <del>5.98</del>,
    <!-- strong 强调一段文本中的重要性 -->
    现价: <strong>1.98</strong> <br />
    <!-- code 表示计算机代码片段 -->
    <code> const username = 'tlilam';</code> <br />
    <!-- mark 突出显示文本，自动将文本设置成为黄底黑字，用于标记  -->
    <mark> //突出显示文本，自动将文本设置成为黄底黑字，用于标记。</mark> <br />
    <!-- progress 进度条显示 -->
    <progress value="80" max="100"></progress>

        运行效果：

1595858274(1).jpg

链接元素

        链接元素可以通过使用 href 属性 - 创建指向另一个文档的链接,还可以实现打电话，下载文件，发送邮件，和站内外跳转等功能，使用 Target 属性，可以定义被链接的文档在何处显示

    <!-- 经典用法: 在不同的页面中跳转，跨域 -->
    <a href="https://www.php.cn" target="_blank">php中文网</a>
    <!-- 下载文件 -->
    <a href="0725.md" download="html.md">教学大纲</a>
    <!-- 打电话 -->
    <a href="tel:13894****90">服务热线</a>
    <!-- 发邮件 -->
    <a href="mailto:498668472@qq.com">发电邮</a>
    <!-- 锚点: 在当前页面中跳转-->
    <a href="#author">找到作者</a>
    <h2 id="author">作者：tlilam</h2>
    <a href="#">回到顶部</a>

列表元素

        列表分为三种：无序列表（写导航）、有序列表、自定义列表（通常用来写页脚）。

   <!-- 1.无序列表 -->
    <ul>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    <!-- 2.有序列表 -->
    <ol start="4">
      <li>起床</li>
      <li>刷牙</li>
      <li>上班
        <ul>
          <li>吃早餐</li>
          <li>坐公交</li>
          <li>打卡</li>
        </ul>
      </li>
      <li>工作</li>
    </ol>
    <!-- 3.自定义列表 -->
    <dl>
      <dt>网站前端</dt>
      <dd>HTML</dd>
      <dd>CSS</dd>
      <dd>JavaScript</dd>
      <dt>网站后端</dt>
      <dd>PHP</dd>
    </dl>


Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：我们只是一个学习不台, 万岁,真不敢当,放在古代,是要杀头,诛九族的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！