HTML基础

HTML基础
HTML5基础

html5结构

网页分成三个部分：
1. 结构(HTML) --- H5
2. 表现(CSS) --- CSS3
3. 行为(JavaScript)
```

<!doctype html>


<html>
    
    <head>
        
        <meta charset="utf-8">

        
        <title>我时标题</title>
    </head>

    
    <body>
        <h1>我是一级标题</h1>

    </body>
</html>
```
工具
1. VSCode
2. Notepad++、sublime
3. Zeal
4. W3school
实体

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

```
元素
1. 行内元素（inline element）：在页面中不会独占一行的元素被称为行内元素（inline element）
  - 在网页中一般通过元素块来对页面进行布局
2. 块元素（block element）：在页面中独占一行的元素称为块元素
  - 主要用来包裹文字
- 一般情况下会在块元素中放行内元素，二不会在行内元素中放块元素
  - 块元素中基本上什么都能放
  - p元素中不能放任何块元素
- 浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
  - 标签写在了根元素的外部
  - p元素中嵌套了块元素
  - 根元素中出现了除head 和 body以外的子元素
标签

meta标签
- 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">
标题标签
1. h1 ~ h6 一共有六级标题
2. 从那个h1~h6重要性递减，h1最重要
3. h1在网页中的重要性仅次于title标签，一般一个页面中只有一个h1
4. 标题标签都是块元素
```
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
p标签
1. p标签表示页面中的一个段落
2. p也是一个块元素
hgroup标签
1. hgroup标签用来为标题分组
2. 可以将一组相关的标题同时放入到hgroup里面
em标签
1. 用于表示语音语调的一个标签
2. 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中可以创建列表，一共有三种（列表之间可以互相嵌套）
1. 有序列表
  - 使用ol标签创建无序列表
  - 使用li表示列表项
2. 无序列表
  - 使用ul标签创建无序列表
  - 使用li表示列表项
3. 定义列表
  - 使用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标签
1. 超链接可以让我们从一个页面跳转到其他页面
2. 超链接a标签是个行内标签
3. 在a标签里面可以签到任何元素（除了自身a标签）
4. 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标签
1. img标签是图片标签
2. 图片标签用于向当前页面中引入一个外部图片
3. 使用img标签来引入外部图片
4. img标签是一个自结束标签
5. img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
  - src属性是来指定外部图片的路径
  - alt属性表示图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
    
    搜索引擎会根据alt中的内容来识别图片，如果不屑alt属性则图片不会被搜索引擎识别
  - width属性表示图片的宽度(单位是像素)
  - height属性表示图片的高度
    
    宽度和高度中如果只修改了其中一个，则另一个会等比例缩放
  Note:
  - 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
  - 但是在移动端，经常需要对图片进行缩放（主要是大图缩小）
图片格式：
1. jpeg(jpg)
  - 支持的颜色比较丰富，不支持透明效果，不支持动图
  - 一般用来显示照片
  - 支持压缩
1. gif
  - 支持的颜色比较少，支持简单透明，支持动图
  - 适合颜色单一的图片，动图
1. png
  - 支持的颜色丰富，支持复杂透明，不支持动图
  - 颜色丰富，复杂透明图(专为网页而生)
1. webp
  - 这种格式是谷歌新推出专门用来表示网页中的图片的一种格式
  - 他具备其他图片格式的所有有点，而且文件还特别小
  - 缺点：兼容性不好
Base64编码
1. 将图片使用base64进行编码，这样可以直接将图片转换为base64字符，通过字符的形式来引入图片
2. 一般都是一些需要和网页一起加载的图片才会使用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标签
1. 内联框架是iframe标签来表示
2. 用于向当前页面内中引入一个其他页面
3. 属性
  - src属性，指定要引入的网页的路径
  - frameborder属性，表示内联框架的边框，0表示没有，1表示有
- iframe可以在用于将腾讯或者其他视频网站上的资源，直接引过来，不会占用自己网站出口带宽
- 一般情况下使用场景不多，因为seo搜索引擎不会去收录iframe的内容
```
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
```
audio标签
1. audio标签是用来向页面中引入一个外部的音频文件
  - 音频文件引入时，默认情况下不允许用户自己控制播放停止
  - 属性
    
    controls属性表示是否允许用户控制播放，这个属性没有值
    
    autoplay属性表示音频文件是否自动播放
    
    如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动播放了
    
    loop属性表示循环播放
  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>   <audio controls>  对不起，您的浏览器不支持播放此音频！请升级浏览器！ <source src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4">   <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标签
1. 使用video标签来向网页中引入一个视频
1. 使用方式和audio基本一致
```
<video src="https://video.pearvideo.com/mp4/adshort/20200601/cont-1677761-15176719_adpkg-ad_hd.mp4" controls></video>
```
相关阅读:
#考研碎碎念#
#考研笔记#计算机之病毒
 #考研笔记#计算机之多媒体应用
 #考研笔记#计算机之PPT问题
 第六章深入理解类
 第五章方法
 类的基本教程
 类型存储变量
 C#和.net框架
 C#编程概述
原文地址：https://www.cnblogs.com/lich1x/p/13043349.html

HTML5基础

html5结构

工具

实体

背景

实体语法

元素

标签

meta标签

标题标签

p标签

hgroup标签

em标签

strong标签

blockquote标签

q标签

br标签

header标签

main标签

footer标签

nav标签

aside标签

article标签

section标签

div标签

span标签

li标签

a标签

img标签

iframe标签

audio标签

vedio标签