关于标签

最新推荐文章于 2024-09-06 09:38:49 发布

小脑袋要爆炸啦

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量175

点赞数 1

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46444261/article/details/111790243

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、mate标签
二、语义化标签
三、结构化语义元素
四、列表

提示：以下是本篇文章正文内容，下面案例可供参考

一、mate标签

**
meta主要用于设置网页中的一些元数据，元数据不是给用户看**

charset指定网页的字符集
name指定的数据的名称
cantent指定的数据的内容
keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开
title标签的内容会作为搜索结果的超链接上的文字显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="keywords"content="HTMLS,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
     <!-- 
         <meta http-equiv="refresh"content="3,url=https://www.mozilla.0rg">
         将页面重定向到另一个网站
      -->
    <title>Document</title>
</head>
<body></body>
</html>

二、语义化标签

**在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是他的样式

在页面中独占一行的元素称为块元素（block element）
在页面中不会独占一行的元素称为行内元素（inline element）

块元素(block element)
在网页中一般通过块元素对页面进行布局*
*行内元素(inline element)
- -行内元素主要用来包裹文字*
-一般情况下在块元素中放行内元素,而不会在行内元素中放块元素*
块元素中基本什么都能放
- -p元素中不能放任何的元素
- 浏览器在解析网页时,会自动对页面中不符合规矩的内容进行修正*

比如:

标签写在了根元素的外部

p元素中嵌套了块元素

根元素中出现了除head和body以外的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>Document</title>
</head>
<body>
    <!--
            标题标签：
            h1~h6一共有六个标题
            从h1~h6重要性递减，h1最重要，h6最不重要
            h1在网页中的重要性仅次于title标签，一般情况下页面只会有一个h1
            一般使用h1~h3  
     -->
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>
     <!-- 
         hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
      -->
      <hgroup>
          <h1>回乡偶书二首</h1>
          <h2>其一</h2>
      </hgroup>
     <!-- 
         p标签表示页面中的一个段落
         p也是一个块元素
      -->
      <p>在p标签的内容就表示一个段落</p>
      <p>在p标签的内容就表示一个段落</p>
      <!-- 
          em标签用于语音语调的一个加重
       -->
       <p>今天天气<em>真</em>不错！</p>
       <!-- 
           strong表示强调，重要内容
        -->
        <p>你今天必须要<strong>完成作业</strong>！</p>
        张爱玲说：
        <!-- blockquote表示一个长引用 -->
        <blockquote>
            女人要放开眼光
        </blockquote>
        <!-- q表示一个短引用 -->
        子曰<q>学而时习之,不亦乐乎!</q>
        <!-- br标签表示页面中的换行 -->
        <br>
        今天天气真不错!
</body>
</html>

三、结构化语义元素

**布局标签(结构化语义标签) **

header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> 
      <header></header>
      <main></main>
      <footer></footer>

      <nav></nav>
      <aside></aside>
      <article></article>

      <section></section>

      <div></div>

      <span></span>
      
</body>
</html>

四、列表

列表(list)
1.铅笔
2.尺子
3.橡皮

在html中也可以创建列表,html列表一共有三种
1.有序列表
2.无序列表
3.定义列表

有序列表,使用ol标签来创建有序列表
使用li表示列表项
无序列表,使用ul标签来创建无序列表
使用li表示列表项
定义列表,使用d1标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

     <ul>
         <li>结构</li>
         <li>表现</li>
         <li>行为</li>
     </ul>
    
     <ol>
         <li>结构</li>
         <li>表现</li>
         <li>行为</li>
     </ol>

     <dl>
         <dt>结构</dt>
         <dd>结构表示网页的结构,结构是用来规定中哪里是标题,哪里是段落</dd>
     </dl>
    
</body>
</html>

小脑袋要爆炸啦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
关于标签

文章目录一、mate标签二、语义化标签三、结构化语义元素四、列表提示：以下是本篇文章正文内容，下面案例可供参考一、mate标签**meta主要用于设置网页中的一些元数据，元数据不是给用户看**charset指定网页的字符集name指定的数据的名称cantent指定的数据的内容keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开title标签的内容会作为搜索结果的超链接上的文字显示<!DOCTYPE html><html lang=.
复制链接

扫一扫