02.字符实体和语义标签

字符实体和语义标签

文章目录

字符实体

    <!-- 
        在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候，我们不能直接书写一些特殊符号
            比如：多个连续的空格，比如字母两侧的大于和小于号

        如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
        实体的语法：
            &实体的名字;
                &nbsp; 空格
                &gt; 大于号
                &lt; 小于号
                &copy; 版权符号
实体名称显示效果描述结果
&nbsp空格
&gt>大于号
&lt<小于号
&amp&与
&copy©版权
&reg®注册商标
&trade™商标
&times×乘号
&divide÷除号
&iquest¿倒问号

meta和语义标签

1.meta标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示    
     -->
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
<!--
	<meta http-			equiv="refresh"content="3;url=https://www.mozilla.or g"> 将页面重定向到另一个网站
    -->
<!-- <meta http-equiv="refresh"
content="3;url=https://www.baidu.com"> -->
    <title>Document</title>
</head>
<body>
   
</body>
</html>

如果设置了http-equip属性,元素就是一个pragma指令，提供的信息相当于一个类似名称的HTTP头所能提供的信息

  • content-security-policy`：允许页面作者为当前页面定义一个内容策略。内容策略主要指定允许的服务器来源和脚本端点，这有助于防范跨站脚本攻击。

  • content-type：声明文档的MIME类型和字符编码。如果指定，content属性必须有 "text/html; charset=utf-8"的值。这相当于一个指定了charset属性的元素，并对文档中的位置有同样的限制。注意：只能在使用 text/html的文档中使用，不能在使用XML MIME类型的文档中使用。

  • default-style`：设置默认的CSS样式表集的名称。

  • x-ua-compatible:如果指定,内容属性必须有 "IE=edge`"的值。用户代理被要求忽略这个pragma。

  • refresh`：该指令指定页面重新加载及重定向的方式
    • 直到页面应该被重新加载的秒数–只有当content属性包含一个正整数时。
    • 直到页面重定向到另一个页面的秒数–只有当内容属性包含一个正整数，后面跟着字符串;url=""，以及一个有效的URL。

2.布局语义标签

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

2.1 标题标签：

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1h3，h4h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素（block element）

such as

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 标题分组标签

hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup

such as

 <hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
</hgroup>

2.3 p标签（段落标签）

p标签表示页面中的一个段落，p也是一个块元素

such as

<p>在p标签中的内容就表示一个段落</p>

2.4 em标签

em标签用于表示语音语调的一个加重在页面中不会独占一行的元素称为行内元素（inline element），可嵌套

such as

<p>今天天气<em>真</em>不错！</p>

内的内容表现为斜体

2.5 strong标签

strong表示强调，重要内容！

such as

  <p>你今天必须要<strong>完成作业</strong>！</p>

2.6 blockquote标签

blockquote表示一个长引用，缩进表示首行文本

such as

鲁迅说：      
	  <blockquote>
          这句话我是从来没有说过的！
      </blockquote>

表现内容为引用

2.7 q标签

短引用

子曰<q>学而时习之，乐呵乐呵！</q>

2.8 换行标签br

	  <!-- 
          br标签表示页面中的换行
       -->

2.9 HTML5提供的新语义元素

点击此超链接可跳转详情页面

以下为网课提及

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

3.其它语义标签

3.1 列表

列表（list）

​ 1、铅笔

​ 2、尺子

​ 3、橡皮

在html中也可以创建列表，html列表一共有三种：

​ 1、有序列表

​ 2、无序列表

​ 3、定义列表

有序列表，使用ol标签来创建有序列表

​ 使用li表示列表项

无序列表，使用ul标签来创建无序列表

​ 使用li表示列表项

定义列表，使用dl标签来创建一个定义列表

​ 使用dt来表示定义的内容

​ 使用dd来对内容进行解释说明

列表之间可以互相嵌套

such as

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

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


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

    <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-1</li>
                        <li>aa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

表现如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIGRxC6K-1631331832041)(D:\桌面\乱七八糟\QQ图片20210911104218.png)]

3.2 超链接

超链接可以让我们从一个页面跳转到其他页面，

​ 或者是当前页面的其他的位置

​ 使用 a 标签来定义超链接

​ 属性：

​ href 指定跳转的目标路径

​ - 值可以是一个外部网站的地址

​ - 也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

such as

     <a href="https://www.baidu.com">超链接</a>
     <br><br>
     <!-- <a href="https://www.baidu123.com">超链接</a> -->
     <a href="07.列表.html">超链接2</a>
3.2.1 超链接中的属性

1.target属性，用来指定超链接打开的位置

​ 可选值：

​ _self 默认值 在当前页面中打开超链接

​ _blank 在一个新的要么中打开超链接

such as

<a href="07.列表.html" target="_blank">超链接</a>

2.href属性

    <!-- 在开发中可以将#作为超链接的路径的展位符使用 -->
    <a href="#">这是一个新的超链接</a>

    <!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
    <a href="javascript:;">这是一个新的超链接</a>

    <!-- 
        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而是转到当前页面的顶部的位置

        可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

        id属性（唯一不重复的）
            - 每一个标签都可以添加一个id属性
            - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性    
     -->

    <a id="bottom" href="#">回到顶部</a>

3.3 图片

​ 图片的格式：

​ jpeg(jpg)

​ - 支持的颜色比较丰富，不支持透明效果，不支持动图

​ - 一般用来显示照片

​ gif

​ - 支持的颜色比较少，支持简单透明，支持动图

​ - 颜色单一的图片，动图

​ png

​ - 支持的颜色丰富，支持复杂透明，不支持动图

​ - 颜色丰富，复杂透明图片（专为网页而生）

​ webp

​ - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式

​ - 它具备其他图片格式的所有优点，而且文件还特别的小

​ - 缺点：兼容性不好

​ base64

​ - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片

​ - 一般都是一些需要和网页一起加载的图片才会使用base64

​ 效果一样，用小的

​ 效果不一样，用效果好的

<!-- 
        图片标签用于向当前页面中引入一个外部图片
         使用img标签来引入外部图片，img标签是一个自结束标签
         img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
         属性：
            src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

            alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
                搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

            width 图片的宽度 (单位是像素)
            height 图片的高度    
                - 宽度和高度中如果只修改了一个，则另一个会等比例缩放

            注意：
                一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
                但是在移动端，经常需要对图片进行缩放（大图缩小）-->
<img src="xxxx">

3.4 网页内联

<body>

    <!-- 

        内联框架，用于向当前页面中引入一个其他页面
            src 指定要引入的网页的路径
            frameborder 指定内联框架的边框

     -->
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
    <h1>Hello</h1>

    
</body>

3.5 音频和视频

<body>

    <!-- 
        audio 标签用来向页面中引入一个外部的音频文件的
            音视频文件引入时，默认情况下不允许用户自己控制播放停止

        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                - 如果设置了autoplay 则音乐在打开页面时会自动播放
                    但是目前来讲大部分浏览器都不会自动对音乐进行播放 
            loop 音乐是否循环播放  
     -->
    <!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> -->
    
    <!-- <audio src="./source/audio.mp3" controls></audio> -->


    <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

    <!-- 
        使用video标签来向网页中引入一个视频
            - 使用方式和audio基本上是一样的
     -->
    <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>
    
通过iframe和embed的方式引入视频。以某艺为例，提供了视频链接的HTML代码和通用代码，不过，embed需要flash的支持
    
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>


</body>

其它

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或…/开头

./ 表示当前文件所在目录，可以省略不写

…/表示当前文件所在目录的上一级目录

注

以上内容参考来自：

  1. B站视频
  2. csdn平台
  3. w3school手册
版权声明：本文为Edshine原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。