【前端】HTML5+CSS3 HTML基本特性（一）

HTML基本特性

1.字符实体

有些时候我们不能直接书写一些特殊符号，比如：

• 多个连续的空格

• 字母两侧的大于号或小于号

如果我们需要在网页中书写这些特殊的符号，需要使用html中的实体（转义字符）。实体的用法：&实体的名字;

更多实体参考：HTML 字符实体(https://www.w3school.com.cn/html/html_entities.asp)

2.meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看（写在head里）

• charset 指定网页的字符集

• name 指定数据的名称

  • keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开
  • description用于指定网站的描述，网站的描述会显示在搜索引擎的搜索结果中

• content 指定数据的内容

• title标签的内容会作为搜索结果的超链接上的文字显示

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">

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

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>

以京东为例：

---

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

将页面重新定向到另一个网站

3.语义化标签

在使用html标签时，应该关注的是标签的语义，而不是他的样式。

3.1基本元素：

标题标签：

• h1~ h6一共有6级标题，从h1 ~ h6重要性递减
• h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个
• 一般情况下标题标签只会使用到h1 ~ h3 ，h4 ~ h6很少使用

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

hgroup标签：

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

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

p标签：

p标签表示页面中的一个段落

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

em标签：

em标签用于表示语音语调的一个加重（加粗倾斜）

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

strong标签：

strong表示强调，重要内容（加粗）

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

blockquote标签：

表示一个长引用

毛主席说：
      <blockquote>
          好记性不如烂笔头！
      </blockquote>

q标签：

q标签表示短引用

 毛主席说：<q>好好学习，天天向上！</q>

br标签：

表示页面中的换行

<br>

3.2块元素与行内元素

块元素（block element）：

• 在网页中一般通过块元素来对页面进行布局
• 块元素中基本上什么都能放
• p元素中不能放任何块元素

行内元素（inline element）：

• 行内元素主要用来包裹文字
• 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

块元素：	< h1 > ~ < h6 >	< hgroup>	< p >	< blockquote >
行内元素：	< strong >	< em >	< q >	< br >

---

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

• 标签写在了根元素的外部
• p元素中嵌套了块元素
• 根元素（html 元素）中出现了除了head和body以外的子元素
• …

3.3布局标签

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

4.列表

4.1有序列表

使用ol标签表示有序列表，使用li表示列表项

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

4.2无序列表

使用ul标签表示无序列表，使用li表示列表项

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

4.3定义列表

• 使用dl标签创建定义列表
• dt表示定义的内容
• dd表示对内容进行解释说明

---

列表之间可以相互嵌套

  <ul>
        <li>
            我是老大
            <ul>
                <li>我是老二</li>
                <li>我也是老二
                    <ul>
                        <li>我是老三</li>
                        <li>我也是老三</li>
                    </ul>
                </li>
            </ul>
        </li>
 </ul>

5.超链接

• 超链接可以让我们从一个页面跳转到其他页面或当前页面的其他位置
• 使用a标签定义超链接：
  • herf指定跳转的目标路径：可以是外部网站地址或者内部页面地址
• 超链接也是一个行内元素，在a标签中可以嵌套除了他自身以外的任何元素

5.1在不同页面间跳转

     <a href="https://www.baidu.com">跳转到外部网站</a>
     <br><br>
     <a href="07.列表.html">跳转到内部页面</a>

通过上面的动图可以发现，上述超链接均是在当前页面中打开的，若想在一个新的页面中打开，便要使用到target属性了。

• target属性：用来指定超链接的打开位置
  • _self：默认值，在当前页面中打开超链接
  • _blank：在一个新的页面中打开超链接

<a href="07.列表.html" target="_blank">打开新窗口！</a>

---

5.2同一页面中跳转

• id属性：
  1. 每个标签可以添加一个id属性
  2. id属性是元素的唯一标识，同一页面中不能出现重复的id属性
• 实现页面内跳转：
  • 在href路径中填入想要跳转的id属性即可
• 将href属性设置为#：
  • 这样点击超链接后，页面直接跳转到页面的顶部
  • 在开发中还可以使用#作为超链接路径的占位符使用
• 将href属性设置为javascript：
  • 此时点击这个超链接不会发生任何跳转

<p>春江潮水连海平，海上明月共潮生。</p>
    <p>滟滟随波千万里，何处春江无月明！</p>
    <p id="p3"><strong>江流宛转绕芳甸，月照花林皆似霰；</strong></p>
    <p>空里流霜不觉飞，汀上白沙看不见。</p>
   
    <a href="#">这是一个新的超链接</a>

    <br><br>

    <a href="javascript:;">点我无效哦</a>
    <br><br>

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

6.图片标签

• 图片标签相当于向当前页面引入了一个外部图片

• 使用img标签来引入外部图片，img是一个自结束标签

• img这种元素属于替换元素（块元素和行内元素之间）

---

属性：

• src 属性指定的是外部图片的路径（路径规则和超链接一致）
• alt 图片的描述，这个描述在默认情况下不会显示，当有些浏览器出现图片无法加载时，搜索引擎才会根据alt中的内容识别图片，如果不写alt属性，图片不会被搜索引擎所收录
• width与height 图片的宽度和图片的高度（单位是像素）宽度和高度中如果只修改了一个，另一个也会等比例缩放

注意：

• 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁切多大
• 在移动端，经常需要对图片进行缩放

图片的格式：（效果一样，用小的；效果不一样，用效果好的）

1. jpg（jepg）：
   • 支持的颜色比较丰富
   • 不支持透明效果
   • 不支持动图
   • 一般用来显示图片
2. gif：
   • 支持的颜色比较少
   • 支持简单透明
   • 支持动图
   • 可以显示颜色单一的图片、动图
3. png：
   • 支持的颜色丰富
   • 支持复杂透明
   • 不支持动图
   • 颜色丰富
   • 可以显示复杂透明的图片，专为网页而生
4. webp：
   • 是谷歌新推出的专门表示网页中的图片的一种格式
   • 文件小
   • 具备其他图片格式的所有优点
   • 缺点：兼容性差
5. base64：
   • 图片使用64编码，可以将图片转化为字符，通过字符的形式引入图片
   • 一般都是一些需要和网页一起加载的图片才会使用base64

<img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

7.内联框架

用于向当前页面中引入一个其他页面

• src 指定要引入的网页路径
• frameborder 指定内联框架的边框 （0无边框，1有边框）

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

8.音视频

8.1插入音频

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

属性：

• controls 允许用户控制播放
• autoplay 音频文件自动播放（目前来讲大部分浏览器都不会对音乐自动播放）
• loop 音频文件循环播放

<audio src="./source/audio.mp3" controls autoplay loop></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>

在IE11上可以正常使用，但如果在IE8版本上，音频无法正常播放

可以使用embed标签在老版本上引入一些音视频文件

  <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

其中type属性表示文件类型

---

8.2插入视频

使用video 标签向网页中引入视频，使用方式基本上和audio一致

 <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>

8.3插入外部视频

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" allowFullScreen="true"></iframe>