HTML基础

HTML5基础

html5结构

网页分成三个部分：

结构(HTML) --- H5
表现(CSS) --- CSS3
行为(JavaScript)

<!-- 文档声明，声明当前网页的html版本 -->
<!doctype html>

<!-- html根标签(=元素)，网页中的所有内容都要写在根元素的里面 -->
<html>
    <!-- 网页头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页 -->
    <head>
        <!-- meta标签用来设置网页的元数据 , 设置网页的字符集，避免乱码-->
        <meta charset="utf-8">

        <!-- 网页标题，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>我时标题</title>
    </head>

    <!-- 网页主题，网页中所有可见内容都应该写在body中 -->
    <body>
        <h1>我是一级标题</h1>

    </body>
</html>

工具

VSCode
Notepad++、sublime
Zeal
W3school

实体

背景

在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格
在html中有些时候，不能直接书写一些特殊符号
- 多个连续空格
- 字母两侧<>
- 如果需要在网页中写这些特殊符号，则需要使用html中的实体(转义字符)

实体语法

<!--
&nbsp;  空格
&gt;    大于号
&lt;    小于号
&copy;  版权符号
-->

元素

行内元素（inline element）：在页面中不会独占一行的元素被称为行内元素（inline element）
- 在网页中一般通过元素块来对页面进行布局
块元素（block element）：在页面中独占一行的元素称为块元素
- 主要用来包裹文字

一般情况下会在块元素中放行内元素，二不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- 根元素中出现了除head 和 body以外的子元素

meta标签主要用于设置网页中的一些元数据元数据不是给用户看的
meta位于子标签<head>内部
meta属性
1. charset 指定网页的字符集
2. name 指定的数据的名称
  - name="keywords" 表示网站的关键字,可以同时指定多个关键字，关键字之间用逗号隔开 (用于给搜索引擎搜索使用)
  - name="description" 用于指定网站的描述 (如百度京东，京东的标题下方有一串用于描述网站的用途)
  - name="title" 显示在浏览器的标签上 (如百度京东，title的内容会呈现在搜索结果标题处)
3. content 指定数据的内容
  - 例如下
  - <meta name="keywords" content="欧冶,欧冶云商,ouye,欧冶子,钢铁交易中心,钢铁电商,钢材交易,钢材现货,钢材期货,宝钢,武钢,马钢,宝武集团,钢价,钢材资讯,钢材市场,融资,找钢,钢银,五阿哥" charset="UTF-8">
1. http-equiv 表示将页面重定向到另一个网站
  - 例如：页面打开3秒后跳转到百度
  - <meta http-equiv="refresh" content="3;url=https://www.baidu.com">

标题标签

h1 ~ h6 一共有六级标题
从那个h1~h6重要性递减，h1最重要
h1在网页中的重要性仅次于title标签，一般一个页面中只有一个h1
标题标签都是块元素

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

p标签

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

hgroup标签

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

em标签

用于表示语音语调的一个标签
em标签是行内元素

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

strong标签

strong表示强调，重要内容

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

blockquote标签

blockquote表示一个长引用

鲁迅说：

<blockquote>
    这句话我是从来没有说过的！
    呵呵哒
</blockquote>

q标签

q表示一个短引用，没有换行

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

br标签

br标签表示页面中的换行

header标签

header表示网页的头部
目前header、main、footer用的比较少

main标签

main表示网页的主题部分,一个页面中只有一个main
目前header、main、footer用的比较少

footer标签

footer表示网页的底部
目前header、main、footer用的比较少

nav标签

nav表示网页中的导航

aside标签

aside 和主体相关的其他内容（一般用来表示侧边栏）

article标签

article表示文章

section标签

section表示一个独立的区块，上边的标签都不能表示时可以使用section来表示

div标签

div没有语义，就是用来表示一个区块
目前来讲div还是我们主要的布局元素
div可以代替所有上面的标签

span标签

span行内元素，没有任何语义，一般用于在网页中选中文字

li标签

html中可以创建列表，一共有三种（列表之间可以互相嵌套）

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

<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>
    <dd>结构表示网页的结果，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

a标签

超链接可以让我们从一个页面跳转到其他页面
超链接a标签是个行内标签
在a标签里面可以签到任何元素（除了自身a标签）
a标签属性
- href属性指定跳转的目标路径
  - 值可以是一个外部网站的地址
  - 也可以写一个内部页面的地址
  - 值为"#bottom"表示去到页面底部
  - 值为"#p3"表示去id=“p3”的段落
- target属性用来指定超链接打开的位置
  - _self 默认值在当前页面中打开超链接
  - _blank 在一个新的页面中打开超链接

note：

在实际开发中可以将 # 作为超链接的路径占位符使用，待业务提供跳转路径后
在实际开发中也可以使用 "javascript:;" 来作为href的属性，此时点击这个超链接不会发生任何动作

<a href="https://www.baidu.com">超链接1</a>
<br>
<a href="./07列表.html">超链接2</a>
<br>
<a href="https://www.baidu.com">超链接3</a>

<a href="./07列表.html" target="_blank">超链接</a>
<a href="#bottom">去到底部</a>
<a href="#p3">去第三段</a>
<p id="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor et ut quidem doloribus quisquam porro itaque impedit, laudantium quia, aliquam consectetur tempora ullam aspernatur nostrum sed. Molestiae quasi ab itaque?</p>

<a href="#">占位符1</a>
<a href="javascript:;">占位符2</a>

img标签

img标签是图片标签
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片
img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
- src属性是来指定外部图片的路径
- alt属性表示图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
  - 搜索引擎会根据alt中的内容来识别图片，如果不屑alt属性则图片不会被搜索引擎识别
- width属性表示图片的宽度(单位是像素)
- height属性表示图片的高度
  - 宽度和高度中如果只修改了其中一个，则另一个会等比例缩放
Note:
- 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
- 但是在移动端，经常需要对图片进行缩放（主要是大图缩小）

图片格式：

jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
- 支持压缩

gif
- 支持的颜色比较少，支持简单透明，支持动图
- 适合颜色单一的图片，动图

png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图(专为网页而生)

webp
- 这种格式是谷歌新推出专门用来表示网页中的图片的一种格式
- 他具备其他图片格式的所有有点，而且文件还特别小
- 缺点：兼容性不好

Base64编码

将图片使用base64进行编码，这样可以直接将图片转换为base64字符，通过字符的形式来引入图片
一般都是一些需要和网页一起加载的图片才会使用base64

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

<img src="./img/1.jpeg" alt="身份证"><img width="800" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591025325414&di=610e4be9939483071af34dbeabb2d89b&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb13615d6d7cbe123a9514ac0fef583dd59f3248683ea-cbgAgs_fw658" alt="钢铁侠">

iframe标签

内联框架是iframe标签来表示
用于向当前页面内中引入一个其他页面
属性
- src属性，指定要引入的网页的路径
- frameborder属性，表示内联框架的边框，0表示没有，1表示有

iframe可以在用于将腾讯或者其他视频网站上的资源，直接引过来，不会占用自己网站出口带宽
一般情况下使用场景不多，因为seo搜索引擎不会去收录iframe的内容

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

audio标签

audio标签是用来向页面中引入一个外部的音频文件

音频文件引入时，默认情况下不允许用户自己控制播放停止
属性
- controls属性表示是否允许用户控制播放，这个属性没有值
- autoplay属性表示音频文件是否自动播放
  - 如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动播放了
- loop属性表示循环播放

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

    <body>
        <!-- <audio src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4" controls></audio> -->

        <!-- 除了通过src来指定文件的路径以外，还可以通过source来指定文件的路径 -->
        <audio controls>
            <!-- 如果浏览器支持的话则正常显示音频文件，如果浏览器不支持播放文件则显示下列的文字 -->
            对不起，您的浏览器不支持播放此音频！请升级浏览器！
            <source src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4">
            <!-- <source src=""> -->

            <!-- embed为了兼容IE8，因为上面的IE8不支持播放 -->
            <embed src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4" type="audio/mp4" width="300" height="100">
        </audio>
    </body>
</html>

vedio标签

使用video标签来向网页中引入一个视频

使用方式和audio基本一致

<video src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4" controls></video>