educoder—web：页面元素和属性

最新推荐文章于 2022-11-27 18:06:31 发布
最新推荐文章于 2022-11-27 18:06:31 发布
阅读量1k 收藏 2
点赞数
分类专栏： educoder-web 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51461030/article/details/121616981
版权
本文详细介绍了HTML5中的结构元素，包括header、article、section、nav、footer、figure、figcaption等，强调了它们在文档结构中的应用和语义。此外，还讨论了交互元素如progress、meter、details/summary，以及文本层次语义元素如em、strong、mark、time、dfn等，帮助开发者更好地理解和使用这些语义化标签。
摘要由CSDN通过智能技术生成

文章目录

  1. html5目标：通过一些新标签、新功能为开发更加简单、独立、标准的通用web应用提供了标准

  2. 新的标准解决了三大问题：

  • 浏览器兼容
  • 文档结构不明确
  • web应用程序功能受限

1.结构元素

在Html5之前，我们只能通过div标签+不同的id名区分文档内容

在HTML5之后，增加了新的结构性的标签，让HTML文档更加清晰

1.1文档结构元素相关概念

在以下结构标签里，我们都可以以标题+内容的方式布局

  1. header元素——头部

  2. 放置：

    • 整个网页或页面内一个内容区块的标题
    • 标题（<h1>~<h6>）
    • 导航部分（<nav>）
    • 普通内容（<p>和<span>）等部分。

  3. article元素——大段内容

    • 在网页中定义独立的、完整的内容
    • 例如：文章、博客、帖子、评论等

  4. aside元素

    • 定义当前页面或当前文章的附属信息
    • 包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分

  5. footer元素——脚注

    • 在父级内容块中添加注释
    • 在文章区中添加作者信息
    • 在网页底部添加版权信息等

  6. figure/ figcaption 元素

    1. figure元素用于表示独立的流内容
      • 例如图像
      • 图表
      • 照片
      • 代码等
    2. figcaption元素用于定义figure元素的标题
      • 要嵌套在<figure>中
      • 通常被置于 <figure> 中的第一个或最后一个子元素的位置。

答案：

image-20211129171743044

1.2 header元素和article元素的应用

  1. 文章区由文章标题和文章内容组成。

  2. HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。

<article?
  <header>文章标题</header>
  <p>文章的段落内容</p>
</article>

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结构</title>
       <style type="text/css">
          header{
    border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
    <!-- ********* Begin ******* -->
       <article>
         <header><h3>茗茶推荐——祁门红茶</h3></header>
         <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
       </article>
      <!-- ********* End ********* -->
</body>
</html>

1.3 figure元素和 figcaption 元素的应用

文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置。在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。

<figure>
  <img src=图的路径>
  <figcaption>图的名称</figcaption>
</figure>

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结构2</title>
       <style type="text/css">
          header{
    border-bottom:4px double #eee;
                       text-align:center;
                      font-size:20px
                      }
       </style>
   </head>
   <body>
       <article>
           <header>
               <h3>茗茶推荐——祁门红茶</h3>
           </header>
           <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
      <!-- ********* Begin ******* -->
         <figure>
             <img src="https://www.educoder.net/api/attachments/1223388">
             <figcaption>茶道欣赏</figcaption>
         </figure>
      <!-- ********* End ********* -->
      </article>
</body>
</html>

2.页面节点元素

2.1页面节点元素相关概念

  1. section元素——定义文章的节**（区段）**
  • 章节、页眉、页脚或文档中的其他部分
  • 通常由内容及其标题组成

  1. nav元素——作为页面导航的链接组

    • 导航菜单
    • 侧边栏导航
    • 内页导航
    • 翻页操作等区域

  2. address元素

address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。

  • address元素位于article元素内部——它表示article元素所包含文章内容的作者的联系信息
  • 直接位于body元素内——表示该网页的作者的联系信息

答案：

image-20211129173539664

2.2 section元素的使用——文章节

HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。

<section>
  <header>文章的节标题</header>
  <p>文章的段落内容</p>
</section>

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{
    border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
      <article>
        <header id=Head>
          <h3>茗茶推荐——祁门红茶</h3>
           </header>
      <!-- ********* Begin ******* -->
      <section>
        <header><h3>什么是红茶</h3></header>
        <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
      </section>
      <!-- ********* End ********* -->
      </article>
  </body>
</html>

2.3 nav元素的使用

文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区，嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。

<nav>
  <a href="链宿的路径" title="显示文本">链源</a>
   ......
</nav>

答案

<!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{
    border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
       <article>
           <
最低0.47元/天 解锁文章
小小话编程
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习（六）—— HTML中元素的id属性、div和span布局
m0_55637498的博客
12-11 2626
一、id属性 1、在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档中id值不能重复 2、注意：表单提交数据的时候，只和name有关系，和id无关 3、id有什么用？ javascript语言可以对HTML文档中的任意节点进行增删改，那么在增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象 id的存在让我们获取元素（节点）更方便 4、HTML文档是一颗树，树上有很多节点，每一个节点都有唯一的id ja...
web前端：标签和属性的含义
qq_49389758的博客
01-12 1384
1.标题：通过 <h1> - <h6> 等标签进行定义的（例如：<h1>这是标题 1</h1>） 2. 段落：是通过 <p> 标签进行定义的（例如：<p>这是段落</p>） 3. 链接：是通过 <a> 标签进行定义的（例如：<a href="https://www.baidu.com">这是链接</a>） 4. 图像：是通过 <img> 标签进行定义的（例如：<im
web开发之 标签元素属性
weixin_30716141的博客
01-06 98
编辑器加载中... http://www.w3school.com.cn/tags/html_ref_standardattributes.asp webkit <meta name = "viewport" content = "width =device-width"/>让页面自适应移动设备的屏幕宽度。 转载于:https://www.cnblogs.com/vincent...
Selenium3 Python WebDriver API源码探析（4）：Web元素的属性和方法
热门推荐
mighty13的专栏
03-12 3万+
Selenium中网页中DOM元素的实现为selenium\webdriver\remote\webelement.py中的WebElement类。 WebDriver API中定位元素的方法在《Selenium3 Python WebDriver API源码探析（3）：定位元素》已经简单介绍。本文主要介绍网页元素的属性和方法。 属性或特性 元素的标签名称 作用：获得当前元素的标签名称 签名：el.tag_name 返回值：字符串，例如'input' 元素的文本 作用：获得当前元素的文本内容 签名：el.t
Web前端-29-JavaScript-操作元素属性
karry_孙二的博客
11-21 238
操作元素属性 1.操作属性的方法 （1）“ . ” 操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 操作元素属性</title> <script type="text/javascri...
educoder——web：构建web表单
m0_51461030的博客
12-05 1864
构建web表单
Educoder：CSS从入门到精通——文本与字体样式
QingNiaoJun的博客
04-06 3000
目录：第1关：字体颜色、类型与大小第2关：字体粗细与风格第3关：文本装饰与文本布局 第1关：字体颜色、类型与大小 本关任务 本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下： 参考答案 body { /*背景渐变*/ background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right
Educoder Web练习题---交互元素
一只小鹿的博客
12-07 316
交互元素 文章目录交互元素第1关：交互元素相关概念相关知识progress元素meter元素details/summary元素menu元素command元素通关知识第2关：progress元素相关知识进度条的设置编程要求通关代码第3关：meter元素相关知识meter元素及属性编程要求通关代码第4关：details/summary元素相关知识details/summary元素的设置编程要求通关代码 第1关：交互元素相关概念 相关知识 progress元素 progress元素属于状态交互元素。用来表示页面中
Educoder Web练习题 1 Web前端开发概述
一只小鹿的博客
11-30 555
Educoder Web练习题 1 Web前端开发概述 文章目录Educoder Web练习题 1 Web前端开发概述第1关：Web前端开发相关的概念相关知识Web系统的组成Web开发浏览器URLWWWhttp网站Web标准自主实训第2关：Web前端开发相关的技术相关知识基本应用技术HTMLCSSJavaScriptWeb前端开发工具NotePadTextPadDreamweaverHTML文档结构自主实训编程要求 第1关：Web前端开发相关的概念 相关知识 Web系统的组成 Web是Internet上最受
Web自动化 - 元素、标签、属性。清晰解释
欢迎来到秦朝
03-04 329
附上百度首页的一段前端代码 标签：倒数第三行中<span class="voice-hover" style="display: none;">按语音搜索</span> 标签名也是标签：input 开始标签：<span class="voice-hover" style="display: none;"> 元素内容：按语音搜索 结束标签：</span> 元素：<span class="voice-hover" style="displa.
javawed笔记
qq_61620143的博客
03-27 180
一、jsp内置对象之域对象： -- pageContext:属性的作用范围仅限当前的jsp页面（范围最小） -- request:属性的作用范围仅限同一个请求(转发有效) -- session:属性的作用范围仅限于一次会话，浏览器打开直到关闭称为一次会话（在此期间会话不失效） -- application:属性的作用范围仅限于当前web应用(范围最大) =============================================================...
Web笔记
冰冰凉的博客
01-21 790
第一部分 HTML5 HTML：超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版 1.1 HTML5常见元素与属性 1.1.1 基本元素 html：HTML文档的根标签 head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里 body：页面的主体，正文，其内容都会呈现在网页中 title：网页的标题 meta：主要用于设置网页内容 style：用于使用CSS样式表 h1-h6：标题1-标题6，块级元素 p：段落，块级元素，段前段后间距 span：一段文字，内联元
Web前端开发 -- HTML基础（2）
qq_45709187的博客
04-11 647
接上 六、javascipt 脚本语言 1 定义文档内嵌脚本 内嵌脚本：在html文件里直接写script脚本 语句： <script type="text/javascript"> document.write(" "); </script> 例1.文档内嵌脚本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...
关于HTML的标签
weixin_44645525的博客
03-05 160
· 行级和块级标签有什么区别？用途？ Html中常见行级标签：span、a、em、strong、u … 特点：在一行内显示（在一行中可以并列多个行级标签），不能设置宽高属性 Html中常见块级标签：div、p、ul、li、dl、dt、dd、h1~h6 … 特点：独占一行，能设置width，height属性 Html中常见行内块标签：img、input、textarea … 特点：能和其它标签 同占...
页面元素和属性汇总
weixin_63056061的博客
11-27 1329
用来定义计算机代码文本。包含在该元素内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。em和strong都是HTML5中定义的带有加强语义的元素，页面呈现加粗显示效果。包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分。如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。可以在网页中定义独立的、完整的内容，例如：文章、博客、帖子、评论等。用来定义术语，可以通过可选的 title属性来提供对术语的准确定义。中的第一个或最后一个子元素的位置。
html之time元素和pubdate属性
lostcontrol_的博客
01-20 5124
time元素(可以定义很多格式的时间) datetime属性中日期与时间需要用T来分隔，T表示时间； 时间后面加上Z表示给机器编码时使用UTC时间标准； +号后面表示时差，如果是本地时间，则不需要加上时差。 2015-10-10 2015-10-10 2015-10-10 2015-10-10 pubdate属性，是一个Boolean值属性，目前所有主流浏览器都不
第五篇 HTML页面基本组成之 标签元素大杂烩
m0_66451927的博客
01-28 1120
这篇文章将根据页面的基本组成，补充一些标签元素，由于这些标签元素都比较容易理解，有些地方就不多做解释。提前说明：下面给出的代码都是放在<body></body>标签里的。 二、<header> 标签 概念：<header>标签定义文档或者文档的一部分区域的页眉。<header> 元素作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。 注意：<header> 标签不能被...
educoder题目：初识redis
最新发布
03-16
初识Redis是一门介绍Redis的课程，Redis是一...在这门课程中，我们可以学习到Redis的基本概念、数据类型、命令等知识，以及如何使用Redis进行数据存储和读取。通过学习初识Redis，可以帮助我们更好地理解和应用Redis。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值