微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > HTML文档结构
博主信息
博文 2
粉丝 0
评论 0
访问量 2368
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML文档结构
潘海龙
原创
1445人浏览过

HTML 文档结构

1.网页的基本组成

C/S 架构：client 客户端，Server 服务器端
client:用户电脑上的 app，

B/S 架构：用户这时没有 app，只需要一个入口/代理：浏览器
B/S 架构在服务器端更换了服务器配置或者更新了版本，可以让所有访问者立刻享受到了最新的版本和服务。

现在讲的是 B/S 架构

序号 内容 描述
1 文本内容 用户看到的网页文本，例如新闻，电话等
2 其它文件的引用 如图片，视频，音频，CSS 样式表，JS 脚本等
3 标记 对文本以及引用文件的正确描述

1、网页有三部分组成，1、文本；2、文件引用；3、标记
2、用户通过文本获取信息/内容，搜索引擎通过文本搜索到信息。
3、标记，让你不会找错地方。就如：门牌号

代码样式与注释

  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.     <!-- <p>与</p>之间的内容，“1、文本；2、文件引用；3、标记。”即网页的组成之一：【文本】 -->
  10.     <p>1、文本；2、文件引用；3、标记。</p>
  11.     <!-- src="timg.jpg" 即网页的组成之二：【文件引用】 -->
  12.     <img src="timg.jpg" alt="" />
  13.     <!-- 代码中的<p></p>和<img/>即网页的组成之三：【标记】 -->
  14.     <!-- <p></p> :表示段落-->
  15.     <!-- <img/>:表示图片 -->
  16.   </body>
  17. </html>

运行图 1

" class="reference-link">demo1_运行图

2、HTML 文档结构

根标签/根元素；属性；子标签（头元素/主体元素）；字符编码集；

  1.   <!-- 注释： <!doctype html> 告诉浏览器这是一个html的文档 -->
  2.   <!-- <html>.....</html>  这一对叫根标签（根元素），代表整个html文档，整个html文档要写在这对标签之内 -->
  3.   <!-- lang="en"  这个叫属性，表示当前页面编写所用语言，en代表英语 -->
  4.   <!DOCTYPE html>
  5.   <html lang="en">
  6.     <!-- head和body：这两对叫子标签。head叫头元素，不会在当前页面中显示，这是给浏览器和搜索引擎使用的 -->
  7.     <head>
  8.       <!-- UTF-8即当前文档字符编码集，表示浏览器使用UTF-8编码渲染页面，如果编码不对页面显示会出现乱码。 -->
  9.       <meta charset="UTF-8" />
  10.       <!-- viewport：视口，可视的端口，当前浏览器的可视区域。即当前文档在浏览器中可以被用户看到的部分。 -->
  11.       <!-- 视口可以设定宽100%，高100%，在移动端开发会常常用到，移动端不同设备的的视口大小是不一样的 -->
  12.       <!-- width=device-width：显示的宽度；initial-scale=1.0显示的比例，1.0表示正常大小，没有缩放。 -->
  13.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  14.       <!-- title：当前页面的标题 -->
  15.       <title>我的PHP第一课</title>
  16.    </head>
  17.   <!-- body叫主体元素，这是我想给用户通过浏览器看到的内容 -->
  18.    <body>
  19.       <h2>第一课的内容对小白的我来讲，还需要一点点时间理解和消化</h2>
  20.    </body>
  21.   </html>
  22.   <!-- 编写html文档的规范：所有标签全部用小写，显示统一规范。 -->

运行图 2

" class="reference-link">demo2_运行图

3、元素与属性的关系

元素、属性，属性值
1、元素用来描述页面中具体的实体，页面中所有东西都是元素。在 html 中元素是用标签来描述的,而标签是属性来描述，属性值是属性的具体参数值。
2、元素分为默认样式：在所有 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.     <!-- 元素是用来描述页面中具体的实体的，元素是用标签来描述的，而标签是用属性来描述的。-->
  10.     <!-- 段落元素：用'<p></p>' -->
  11.     <p>我的元素练习</p>
  12.     <!-- 元素分为，默认样式：在所有html文档中的样式；内部样式：在当前html文档中的样式；内联样式：在当前标签中文档的样式 -->
  13.     <!-- 内部样式，用style标签创建内部样式 -->
  14.     <style>
  15.       ol {
  16.         color: red;
  17.       }
  18.     </style>
  19.     <!-- 内联样式；在标签内定义属性和值 -->
  20.     <ol style="color: rgb(0, 255, 85);">
  21.       <li>我的'ol'定义列表元素练习</li>
  22.     </ol>
  23.     <ol>
  24.       <li>我的'ol'定义列表元素练习</li>
  25.     </ol>
  26.   </body>
  27. </html>

" class="reference-link">demo3_运行图

4. 语义化的结构元素

元素的层级关系

  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>元素的层级关系</title>
  7.   </head>
  8.   <body>
  9.     <!--html：结构化使用标签描述的文档。“树状结构” -->
  10.     <div>
  11.       <p>
  12.         <span>
  13.           <bb>树状结构即【结构化，使用标签描述的文档。】</bb>
  14.         </span>
  15.       </p>
  16.     </div>
  17.   </body>
  18. </html>

demo4_运行图

html5 常用语义化结构布局元素

语义化结构元素；header;main,footer.
页眉：用直观的’<header></header>‘标签表达；主体：用直观的’<main></main>‘标签表达；页脚：用直观的’<footer></footer>‘标签表达。
【html5 常用布局元素 3 个，header,main,footer。页面以块来显示。块元素的特征，垂直排列，两端不充许有内容，哪怕为空或只有一个空字符，也要占一行显示。块元素里面是内联元素也叫行内元素，内联元素在块内水平显示，依次排列，当一行显示不下就换行显示。】

  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>html5语义化布局结构元素</title>
  7.   </head>
  8.   <body>
  9.     <!-- 页眉 -->
  10.     <header>
  11.       <nav>
  12.         <a href="">index</a>
  13.         <a href="">about</a>
  14.         <a href="">news</a>
  15.         <a href="">concant</a>
  16.       </nav>
  17.     </header>
  18.     <!-- 主体 -->
  19.     <main>
  20.       <section class="guanggao">广告</section>
  21.       <article class="content">内容区</article>
  22.       <section class="recommend">推荐</section>
  23.     </main>
  24.     <!-- 页脚 -->
  25.     <footer>
  26.       <nav>
  27.         <a href="">baidu.com</a>
  28.         <a href="">taobo.com</a>
  29.       </nav>
  30.     </footer>
  31.   </body>
  32. </html>

demo5_运行图

块元素和行内元素

  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>块元素和行内元素</title>
  7.   </head>
  8.   <body>
  9.     <!-- div通用块元素：容器 -->
  10.     <div>
  11.       <!-- <div>建议:里面不直接放文本，通常情况下里面放个<p>段落标签，<img>图片标签，<span>文本标签…… -->
  12.       <!-- 同样的内容用不同的标签处理，显示的结果是不一样的，每个标签的默认样式不一样，还有不同的标签的语义是不一样的，P标签代表一个段落，h标签代表一个大标题 -->
  13.       <!--  -->
  14.       <p>安睡宝宝</p>
  15.       <h3>安睡宝宝</h3>
  16.       <!--  -->
  17.       <img src="timg.jpg" alt="" width="200" />
  18.       <!-- span通用行内元素，不确定内容是什么的时候，就用span标签 -->
  19.       <!-- 通用行内元素，通常不会直接暴露出来，应该放在一个块元素中使用，不要在body下直接使用span标签，a标签也是不对的，a标签也是行内元素 -->
  20.       <span>我的安睡宝宝</span>
  21.     </div>
  22.   </body>
  23. </html>

demo6_运行图

5. 语义化的文本元素

time,sup,address,del,strong,code

  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>语义化的文本元素</title>
  7.   </head>
  8.   <body>
  9.     <time>20200730</time>
  10.     <p>2<sup>4</sup>=16</p>
  11.     <p>苹果：原价<del>12.9</del>现价：<strong>9.9</strong></p>
  12.     <address>桂林市智能大厦写字楼29号</address>
  13.     <code>这是一段代码：const urername='LongLong'</code>
  14.   </body>
  15. </html>

demo7_.png

6. 链接元素

<a></a>标签的，经典用法，下载文件用法，打电话用法，发邮件用法，锚点用法

  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>链接元素</title>
  7.   </head>
  8.   <body>
  9.     <p>
  10.       <!-- href 属性定义的是打开那个链接，target 属性定义打开的方式,_self当前页面打开，_blank新页面打开 -->
  11.       <!-- 经典用法，在不同页面中跳转，跨域 -->
  12.       <a href="http://www.topshowpaper.com/" target="_self">独秀纸品</a>
  13.       <a href="http://www.topshowpaper.com/" target="_blank">独秀纸品</a>
  14.       <!-- 以上是<a>标签的经典用法 -->
  15.     </p>
  16.     <p>
  17.       <a href="0725.md" download="biji">学习笔记</a>
  18.       <!-- 以上是下载文件用法 -->
  19.       <a href="tel:13907730102">个人热线</a>
  20.       <!-- 以上打电话的应用，移动端会经常用到 -->
  21.       <a href="mailto:29663783@qq.com">个人邮件</a>
  22.       <!-- 以上是发邮件的应用 -->
  23.     </p>
  24.     <p>
  25.       <a href="#1">跳转到1号</a>
  26.       <a href="#2">跳转到1号</a>
  27.       <h2 style="margin-top: 1000px;" id="1">1号</h2>
  28.       <h2 style="margin-top: 1300px;" id="2">2号</h2>
  29.       <!--  以上是锚点的应用，锚点：在当前页面跳转  -->
  30.     </p>
  31.   </body>
  32. </html>

demo8_运行图

【id:以后大家用到 id 的场景会非常少，id 的准确性由程序员来保证。浏览器不检查 id 的唯一性，而 js 又依赖 id 的唯一性来获取元素。在实际应用中能不用 id 就不要用 id，尽可能只用 class。id 在二种场景中非常有用，也只能用 id。第 1 种，锚点；第 2 种，表单元素中的控件，如：密码框，邮箱，用户名……，这些用 id 可以准确的定位。】

7. 列表元素

无序列表<ul>,项目符号样式有：disc（实心圆点），circle(空心圆点)，square(实心方块)，none(无项目符号)。ul 需要与 li 一起使用。

有序列表<ol>,项目符号样式，默认是数字序号；通过 type 性属自定义，按英文字母排序，按罗马数字排序。通过 start 属性自定义排序起始位置。

自定义列表<dl>,<dl></dl>标签内首先要有’列表项标题’用<dt>来表示；’列表项内容’用<dd>来表示。通常用它来写页脚。

  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>列表元素</title>
  7.   </head>
  8.   <body>
  9.     <!-- 1.无序列表 -->
  10.     <ul>
  11.       <li>安睡宝宝</li>
  12.       <li>郝博士</li>
  13.       <li>兜兜爱</li>
  14.     </ul>
  15.     <!-- 2.有序列表 -->
  16.     <ol type="1" start="3">
  17.       <li>恬睡系列</li>
  18.       <li>安睡系列</li>
  19.       <li>环腰系列</li>
  20.     </ol>
  21.     <ol type="a">
  22.       <li>恬睡系列</li>
  23.       <li>安睡系列</li>
  24.       <li>环腰系列</li>
  25.     </ol>
  26.     <ol type="I">
  27.       <li>恬睡系列</li>
  28.       <li>安睡系列</li>
  29.       <li>环腰系列</li>
  30.     </ol>
  31.     <!-- 3.自定义列表 define list 简称<dl>,<dl></dl>标签内首先要有‘列表项标题’，用<dt>来表示；‘列表项内容’用<dd>来表示-->
  32.     <dl>
  33.       <dt>安睡宝宝</dt>
  34.       <dd>一款宝宝用的纸尿裤</dd>
  35.       <dd>一款适合晚上使用的纸尿裤</dd>
  36.     </dl>
  37.   </body>
  38. </html>

demo9_运行图

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：不论再难的知识 , 联系到人性和生活常识, 就好理解了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录