HTML笔记——03-字符实体与语义标签

1.字符实体

字符实体用于编写一些特殊符号，如：

• 多个连续空格（在编写网页时，多个空格会被网页标识为一个空格）
• 大于、小于（会被当作是标签被解析掉）

因此，在编写网页中，使用字符实体（也叫转义字符）编写特殊符号，语法为：
  &实体名字;

常用的实体名字有：

实体	显示结果	实体描述
 		空格
&lt;	<	小于
&gt	>	大于
&amp;	&	和
&quot;	"	引号
&apos;	'	撇号(IE不支持)
&cent;	¢	分(cent)
&pound;	£	镑(pound)
&yen;	¥	元(yen)
&euro;	€	欧元(euro)
&sect;	§	小节
&copy;	©	版权(copytight)
&reg;	®	注册商标
&trade;	™	商标
&times;	×	乘号
&divide;	÷	除号

实体字符查询：实体字符参考手册

2.meta标签

<meta>标签：用于设置网页中的元数据，包括：

• charset：设置网页使用的字符集
• name：设置指定数据的名称
  • keywords：设置网站的关键字，方便用户搜索
  • description：设置网站描述，显示在搜索引擎的搜索结果里
• content：设置指定数据的内容

<meta charset="utf8" version="1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">

• http-equiv：定义pragma指令，所有允许的值都是特定http头的名称，关于其取值：
  • refresh：设置指定页面并定时刷新

<!--3秒后跳转到百度-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

3.语义标签

3.1 基本的语义标签

HTML负责网页的结构。使用html标签时，应该关注的是标签的语义。
基本的语义标签有：

类别	标签	作用	描述
块元素Block Element	<h1>~<h6>	标题	标题一共有六级，从<h1>到<h6>重要性递减
	<p>	段落	页面中的一个段落，一个段落中的内容也是一个块元素
	<hgroup>	标题组	它可以将相关的标题放在同一组中
	<blockquote>	长引用	独占一段，段前空两格
行内元素Inline Element	<q>	短引用	不独占一行
	<br>	换行
	<em>	加重	不换行，语气加重
	<strong>	强调	强调文章本身重要性

举例

• <hgroup>标签

 <hgroup>
    <h1>回乡偶书</h1>
    <h2>其一</h2> 
 	<p>少小离家老大回，乡音无改鬓毛衰</p>
 </hgroup>
 <hgroup>
 	<h1>回乡偶书</h1>
    <h2>其二</h2>
    <p>离别家乡岁月多，近来人事半消磨。</p>
 </hgroup>

   效果图：

• <blockquote>与<q>标签

<p>鲁迅说：
    <!--blockquote 表示一个长引用，独占一行，段前空两格
    q 表示一个短引用，不会独占一行-->
    <blockquote>
        自称盗贼的无须防，得其反倒是好人；自称正人君子的必须防，得其反则是盗贼。
    </blockquote></p>
   <p>子曰，<q>学而时习之，不亦说乎</q></p> 

效果：

• <em>与<strong>

    <p>今天天气<em>真</em>不错，em表现为斜体</p>
    <p>你今天必须<strong>完成作业</strong>，strong表现为加粗</p>

效果：

3.2 自结束标签和注释

自结束标签：只有开始，没有结束的标签
    如：<img>，<input>。如果非要写结束标签，<img />
注释：<!--注释内容-->

3.3 标签中的属性

设置属性只能在逼开始标签或自结束标签中设置
语法：<属性 名=值>
    如：<font color="red">
属性与标签和其他属性之间用空格隔开

3.4块元素和行内元素

• 块元素：布局页面
• 行内元素：包装文字
  注：一般在块元素中放行内元素，不在行内元素中放块元素
  
  

3.5 页面布局标签

• <header>：标识网页的头部（页眉）
• <main>：标识网页的主体
• <footer>：标识网页的底部
• <nav>：网页中的导航栏
• <aside>：和主体相关其他内容，边栏
• <article>：一个独立的文章
• <section>：一个独立的区块，其他标签不能使用时，用它
• <div>：块元素，无语义，表一个区块，常用
• <span>：行内元素，用于在网页中选中元素
  
  

3.6 列表

列表可以分为三种：有序、无序、定义列表。

• 有序列表，<ol>创建列表，<li>为列表项

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

效果：

• 无序列表，<ul>创建列表，<li>为列表项

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

效果：

• 定义列表，<dl>创建列表，<dt>为定义项，<dd>为解释项

 <dl>
        <dt>机器学习</dt>
        <dd>机器学习是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。</dd>
        <br>
        <dt>深度学习</dt>
        <dd>深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向，它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artificial Intelligence)。</dd>
    </dl>

效果：

3.7 超链接

超链接可以跳转至其他页面，或者当前页面的其他位置，用<a>定义，行内元素。
<a>中可以放除自身外的任何元素，包括块元素。

href属性

href属性用来制定跳转的目标路径，有两种路径：

• 外部地址

<a href="https://www.baidu.com">百度的超链接</a>

• 内部地址

  • ./：表示当前文件所在的文件目录
  • ../：表示当前文件所在目录的上一级目录

 <!-- 访问当前目录下文件./ -->
    <a href="./taarget.html">超链接</a>
    <!-- 访问上一级目录下其他文件../ -->
    <a href="../006_liebiao.html">超链接2</a>

• 跳转到页面的指定位置
• href=#id值，如：

 <a href="#p3">去第三个自然段</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. ?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <p id="p3">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>

target属性

target属性指定超链接打开的方式，值为：

• _self：在当前页面中打开超链接，不写的话默认是这个
• _blank：在一个新的空白页面中打开超链接
• #：不确定跳转位置的话，可以设置为#作占位符使用
• javascript:;：一个无效的超链接，点击了什么都不会发生
• #id值：跳转到页面的指定位置
    如：

 <a href="#p3">去第三个自然段</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. ?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <p id="p3">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>

3.8 内联框架iframe

内联框架iframe，向当前页面引入一个其他页面

属性：

• src：其他页面的路径
• frameborder：内联框架的边框，“=0”无边框，“=1”有边框
  

3.9 图片标签img

自结束标签，是一个替换元素，介于行内元素与块元素之间，具有两种元素的特点。

属性：

• src：指示外部图片的路径
• alt：图片描述，一般情况下不显示，当图片无法加载时就会显示出来；另外，搜索引擎会根据alt中文字进行搜索
• width：图片宽度（单位：像素）
• height:图片高度（单位：像素），与图片宽度等比例缩放。

 <img width="100" src="https://img1.baidu.com/it/u=3849093148,1772830957&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656435600&t=78c38f16abafd9070bd12816f66ab79e" alt="刘亦菲图片">

图片格式

类型	颜色丰富程度	透明效果	动图	用途
jpg(jpeg)	高	不支持	不支持	显示照片
gif	少	支持	支持	表示颜色单一的图，动图
png	高	支持	不支持	复杂透明的图
webp	高	支持	支持	Chrome开发的网页图片，文件小，但兼容性不高

3.10 音视频

音频标签<audio>

<audio>标签默认情况下，不允许用户自己操作

属性

• src：文件路径
• controls：是否允许用户自动播放，有就能控制，没有就不能控制；写了这个属性才能出现播放图标
• autoplay：是否允许用户自动播放
• loop：是否循环播放
  

视频标签<vidio>

使用方法与音频类似