语义化标签与伪类选择器

最新推荐文章于 2024-09-10 17:45:18 发布

evenzx

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量212

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/evenzx/article/details/107727466

版权

一、常用的语义化标签：

1、header:标记定义一个页面或者一个区域的头部。
2、nav:用于定义导航链接。
3、aside:标记定义页面内容侧边栏(用于周围主体相关的附加信息)。
4、article:标记定义一篇文章或其它可以独立页面存在内容。
5、section:用于表示一个整体的一部分主体。
6、footer:用于表示页面或某个区域脚注。
7、hgroup:标记定义文件中的一个区域块的相关信息、组合和标题。
8、figure:标记定义一组媒体内容以及他们的标题。
9、figcaption:标签定义figure元素的标题。
10、dialog：标记定义一个对话框类似微信。
在这里插入图片描述
这是一张原图：

在HTML里编写代码，以及划分区域，并没有添加css样式，就使用了语义化标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化</title>
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <!-- 导航 -->
        <nav>
            <a href="#1">首页</a>
            <a href="#2">易牛课堂</a>
            <a href="#3">易牛班级</a>
            <a href="#4">易牛资讯</a>
            <a href="#5">话题小组</a>
        </nav>
    </header>
    <!-- 页面主体 -->
    <div>
        <!-- 左侧部分 -->
        <article>
            <!-- Web前端--HTML5基础知识 主体头部-->
            <header>
                <h1>Web前端--HTML5基础知识</h1>
                <span>浏览：316</span>
                <span>评论：10 </span>
                <span>赞：101</span>
            </header>
            <!--HTML5发展简述  -->
            <section>
                <h2>HTML5发展简述</h2>
                <p>HTML发展已久，而HTML5则是在这期间通过人们不断改进HTML而来的。在1991年世界上第一个
                网页诞生以来，HTML就是网站开发中最主要的语言之一，并且一直在不断发展与进化。而现在，美
                观、高速、多平台，这些词已经密切地和HTML5联系起来。在HTML5的帮助下，传统的网页，已经
                带给人们堪比桌面程序的用户体验。2012年12月 17日，W3C 发布了HTML5以及 Canvas 2D 两个
                标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定 。随着移动互联网的高速发展，
                HTML5也将迎来前所未有的发展机会。越来越多的人涌入HTML5学习浪潮中</p>
            </section>

            <!--HTML5新性能  -->
            <section>
                <h2>HTML5新性能</h2>
           
                <p>
                    HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏
                    览器应用程序的开发。HTML5是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活
                    性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控
                    件、API、多媒体、数据库支持，并极大地加快了处理速度。</p>
                 <p>
                     Html5的优点即是“一次性开发，多次分发”，使得一次设计适应不同终端成为可能。信息流架构应
                     用化都是直接在WEB(或wap)端抓取数据，html5可以直接使用跨平台数据面不使用后台API，大大降
                     低研发维护成本而且呈现的效果几乎没有什么区别。Html5最大的意义在于改变WEB文档的结构方
                     式，借助于header,foot,section,article，这些标配、标签我们可以实现更具结构化语义化的WEB文
                     档，这样，搜索引擎更容易索引到WEB站点，我们可以搜索到更快更准备的信息。
                 </p>
                <p>
                    HTML5不仅仅局限于HTML语言本身，还包括了CSS3以及JavaScript语言里新增的函数和功能。
                    HTML5能始终坚持不断发展，并很快得到广泛认可，与其在制定之初就确立的核心理念有很大的关
                    系。这些核心理念就是我们今天在W3C站点上所看到的HTML5设计原理这份文档，概括起来就是
                    ——兼容性、实用性、互操作性以及普遍可访问性。
                </p>
          
            </section>

          <!-- HTML5两大特点 -->
          <section>
             <h2>HTML5两大特点</h2>
             <p>HTML5有两大特点：</p>
             <p>首先，<strong>它强化了Web网页的表现性能。</strong></p>
             <p>其次，<strong>追加了本地数据库等 Web 应用的功能。</strong></p>
             <p>
            在语义上，HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式
            等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。而本地存储特性使基于HTML5
            开发的网页APP拥有更短的启动时间，更快的联网速度。这些全得益于HTML5 APP Cache，以及本
            地存储功能。
             </p>
            <p>
            总的来说HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。虽然HTML5有
            CSS、JavaScript技术，但还是要单独提出CSS3和JS来进行学习更好。如今HTML5是IT行业网站开
            发不可或缺的技术，也是web前端开发必备技能之一，是很值得大家学习的。
             </p>
          </section>

    
          <footer>
              <p>文章来源：<stong>易牛云课堂</stong></p>
              <p>原文链接：<a href="#">http://www.16ketang.com/article/12</a></p>
          </footer>
        </article>
        <!-- 右侧部分 -->
        <div>
            <!-- 相关资讯 -->
            <aside>
                <h2>相关资讯</h2>
                <h3><a href="#"> Lorem ipsum dolor sit.</a></h3>
                <h3><a href="#">Lorem ipsum dolor sit.</a></h3>
                <h3><a href="#">Fugiat sunt eius animi.</a></h3>
                <h3><a href="#">Doloribus quasi labore nobis?</a></h3>
                <h3><a href="#">Nesciunt nihil eligendi quasi!</a></h3>
              
            </aside>>
            <!-- 热门资讯 -->
   <aside>
          <h2>热门资讯</h2>
           <h3><a href="#"> Lorem ipsum dolor sit.</a></h3>
          <h3><a href="#">Lorem ipsum dolor sit.</a></h3>
          <h3><a href="#">Fugiat sunt eius animi.</a></h3>
          <h3><a href="#">Doloribus quasi labore nobis?</a></h3>
          <h3><a href="#">Nesciunt nihil eligendi quasi!</a></h3>
   </aside>>

        </div>>

    </div>
    <!-- 页面底部 -->
    <footer>
        <p>Powered by EduSoho v8.0.23 ?2014-2017 好知网 课程存档</p>
        <p>课程内容版权均归 易牛云课堂 所有 蜀ICP备16007351号</p>
    </footer>
</body>
</html>

对话框dialog标签：标准用法：

   <dialog open>
            <h1>你好</h1>
            </dialog>

figure元素定义独立内容（图像、图表、照片、代码等），一般是一个独立的单元(相当于一个小区域)。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。
figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或最后一个子元素的位置。figure里应该包含figcaption。

<p>第四代体育馆</p>
<figure>
    <figcaption>北京体育馆</figcaption>
    <p>拍摄者：李四，拍摄时间：2019年9月15日 17:42:12</p>
    <img src="xxxxx" alt="">
</figure>

二、伪类选择器

伪类选择器分为：动态伪类、UI元素状态类、CSS3结构类、否定选择器、伪元素、属性选择器。
1、动态伪类
最主要是用于a标签：

伪类	说明
a:link	定义a元素未访问的样式
a:hover	鼠标悬停
a:active	鼠标点击时
a:visited	鼠标访问后

:focus获取焦点当a标签激活时，获取到焦点框(键盘TAB键可用、类似于鼠标移入)。一般是鼠标、触摸屏坏掉才使用，
注意：用于a标签时书写顺序：:link 、:hover、:active、:visited (:link和:visited这2个伪类位置可以交换)。

<a href="#1">Lorem, </a>
<a href="#2">Deserunt, </a>
<a href="#3">Harum,</a>
<a href="#4">Molestiae,</a>

a:link{
    color:red;
}
a:hover{
    color:green;
}
a:active{
    color:yellow;
}
a:visited{
    color:gray;
}

当我们点击时一定要给href添加属性值(就是跳转到哪里去)，当我们在页面点击了后即使刷新页面也不能再点击了(无效元素内容依然时灰色)，解决办法：在当前浏览器中清楚历史记录后在刷新页面元素内容属性就有效果了。
动态伪类除了用于a链接也可以用于其他元素，但是：link和visited只能a标签使用。

2、UI状态伪类

状态伪类	说明
:enabled	可编辑
:disabled	不可编辑
:checked	单选框按钮、复选框

给input设置宽高可以

<input type="text" disabled="disabled"> 
<input type="text" >

:checked我知道有这个、却没用过。

3、伪元素
伪元素是由::两个冒号开头后跟元素名称：

Selector	Meaning
::firsr-leeter	元素第一个首字
::first-line	元素第一行
::before	在指定元素内容前面插入内容
::after	在指定元素内容后面插入内容

在这里插入图片描述

      <p>好好学习</p>
      <p>加油</p>
      <p>好好学习，天天向上</p>
      <p>好好学习，天天向上</p>

下面是CSS样式：

p:nth-child(1)::before{
    content:"老师说:";
}
p:nth-child(2)::after{
    content:"老师说:";
}
p:nth-child(3)::first-letter{
   color:red;
}
p:nth-child(4)::first-line{
    color:red;
 }

大家可以自己试一试。看不懂没关系下面会给大家讲:nth-child 是什么知识。
4、属性选择器
属性选择器书写格式：元素名[name=“box”] 这里的name="box"可以是随便的命名和属性看自己需要，

 <div name="box">
        好好学习、天天向上
    </div>

CSS样式：

 div[name="box"]{
     color:red;
 }

元素名[name^=“b”]意思是部分属性值以b开头，举个栗子：

<div name="bo">
        好好学习、天天向上
    </div>
    <div name="b">
        好好学习、天天向上
    </div>

CSS样式：

 div[name^="b"]{
     color:green;
 }

元素名[name$=“b”]意思是部分属性值以b结束，举个栗子：

  <div name="bo">
        好好学习、天天向上
    </div>
    <div name="b">
        好好学习、天天向上
    </div>

CSS样式:

div[name$="b"]{
     color:yellow;
 }

元素名[name*=“b”]意思是所有选中。
5、CSS3结构类

1、选中第n个元素书写格式：元素名：nth-child(个数 )，适用场景：所有兄弟元素相同标签名。举个栗子：

 <p>HTML</p>
  <p>CSS</p>
  <p>JS</p>

CSS样式：选中第一个p改变颜色。

p:nth-child(1){
    color:purple;
}

2、元素名：nth-of-type(个数) 选中第n个元素，适用场景：兄弟标签可以不同名。举个栗子：

  <p>HTML</p>
  <span>123</span>
  <p>CSS</p>
  <p>JS</p>

如果我想要CSS改变颜色，CSS样式就该这样书写。

p:nth-of-type(2){
    color:purple;
}

3、选中最后一个元素(元素名:last-child)和选中第一个元素(:first-child)，举个例子：

 <p>HTML</p>
  <span>123</span>
  <p>CSS</p>
  <p>JS</p>

CSS样式：

p:first-child{
    color:red;
}
p:last-child{
    color:yellow;
}

4、选中偶元素(元素名:nth-child(2n) / 元素名:nth-child(even)) 、选中奇元素(元素名:nth-child(2n+1) / 元素名:nth-child(odd));

  <p>HTML</p>
  <p>CSS</p>
  <p>JS</p>
  <p>HTML</p>
  <p>CSS</p>
  <p>JS</p>

CSS样式:

p:nth-child(2n){
    color:skyblue;
}
p:nth-child(2n+1){
    color:pink;
}

5、选中前几个n个元素：nth-child(-n+个数)

 <p>HTML</p>
 <p>CSS</p>
 <p>JS</p>
 <p>HTML</p>
 <p>CSS</p>
 <p>JS</p>

CSS样式:

p:nth-child(-n+3){
    color:skyblue;
}

6、选中倒数第N个、倒数第一在前面已经讲个了，还有一种方法：元素名:nth-last-child(个数)。
HTML代码与5相同，下面是CSS样式。

p:nth-last-child(2){
    color:skyblue;
}

7、否定伪类选择器，书写格式，元素名：not(否定内容)，例如除了第3个p给其它添加样式,HTML代码与5相同，
css样式。

p:not(:nth-child(3)){
    color:red;
}

例如除了第3个和第4个p给其它添加样式

p:not(:nth-child(3)):not(:nth-child(4)){
    color:red;
}

总结：伪类选择器大概就是上面讲的这些，多理解，练习哈应该就没有什么大问题。

evenzx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫