1.html5+css3基础学习笔记(上)

1 HTML简介

1.1 W3C标准

1. 伯纳斯李1994年建立万维网联盟( W3C )，W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果。所以,我们需要制订我们编写的网页都需要遵循W3C的规范!
2. 根据W3C标准, 一个网页主要由三部分组成:结构、表现还有行为

1.2文档声明((doctype)

简介：文档声明用来告诉浏览器当前网页的版本

1.3 进制

1.3.1 十进制

十进制(日常使用)

特点:满10进1

计数:0 1 2 3 4 5 6 7 8 9 10 11 12 13 … 19 20

单位数字: 10个(0-9)

1.3.2 二进制

特点:满2进1 计数:0 1 10 11 100 101 110 111

单位数字: 2个(0-1)

扩展:

1. 所有数据在计算机底层都会以二进制的形式保存，可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0，这一个小格子在内存中被称为1位(bit)

8bit = 1byte(字节)

1024byte = 1kb(千字节)

1024kb = 1mb(兆字节)

1024mb = 1gb(吉 字节)

1024gb = 1tb(特字节)

1024tp = 1pb

1.3.3 八进制

特点:满8进1

计数: 0 1 2 3 4 5 6 7 10 11 12 … 17 20

单位数字: 8个(0-7)

1.3.4 十六进制

特点:满16进1

计数:0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 … 1a 1b 1c 1d le 1f 20 …

单位数字: 16个(0-f)

1.4 字符编码

简介：所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存中时，都需要转换为二进制编码。当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。

编码

解析： 将字符转换为二进制码的过程称为编码

解码

解析：将二进制码转换为字符的过程称为解码

字符集(charset)

解析：编码和解码所采用的规则称为字符集

乱码问题:

解析：如果编码和解码所采用的字符集不同就会出现乱码问题

常见的字符集:

ASCII

IS088591

GB2312

GBK

UTF-8

1.5 网页基本标签解析

< !doctype html >

<meta charset="utf-8">

< title > 网页的标题

2 实体

解析：帮助我们在网页中书写一些特殊字符

语法： &实体的名字;

例如:

& nbsp; 空格

& gt; 大于号

& lt; 小于号

& copy; 版权符号

3 标签

3.1 font

1. 字体

3.2 meta

解析：meta主要用于设置网页中的一些元数据，元数据不是给用户看

1. charset 指定网页的字符集
2. name 指定的数据的名称
3. content 指定的数据的内容

例如：

1. keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

2 .description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中 3. 将页面重定向到另一个网站

3.3 语义化标签

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

3.3.1 标题标签

解析：

1. h1 ~ h6 一共有六级标题，从h1~h6重要性递减，h1最重要，h6最不重要

2. h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1

3. 一般情况下标题标签只会使用到h1_h3，h4h6很少用

4. 标题标签都是块元素， 在页面中独占一行的元素称为块元素（block element）

3.3.2 hgroup（分组标签）

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

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

3.3.3 p（段落标签）

解析：

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

3.3.4 em(语气加重标签)

解析：

1. em标签用于表示语音语调的一个加重
2. 是行内元素
3. 在页面中不会独占一行的元素称为行内元素（inline element）

3.3.5 strong(强调标签)

解析： strong表示强调，重要内容！ 行内元素

3.3.6 blockquote（长引用标签）

解析：blockquote 表示一个长引用 块元素

例如:

鲁迅说：

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

3.3.7 q(短引用标签）

解析：q表示一个短引用,行内元素

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

3.3.8 br (换行标签)

3.3.9 i (斜体标签)

3.4 布局标签

3.4.1 header

解析：表示网页的头部

3.4.2 main

解析：表示网页的主体部分(一个页面中只会有一个main)

3.4.3 footer

解析： 表示网页的底部

3.4.4 nav

解析： 表示网页中的导航

3.4.5 aside

解析： 和主体相关的其他内容（侧边栏）

3.4.6 article

解析： 表示一个独立的文章

3.4.7 section

解析: 表示一个独立的区块，上边的标签都不能表示时使用section

3.5 列表

分类：

1. 有序列表

2. 无序列表

3. 定义列表

3.5.1 有序列表

解析：使用ul标签来创建无序列表， 使用li表示列表项

3.5.2 无序列表

解析： 使用ol标签来创建无序列表， 使用li表示列表项

3.5.3 定义列表

解析： 使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

例如：

< dl>

​ < dt>结构< /dt>

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

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

< /dl>

3.6 超链接

解析：

1. a超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
2. 超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

属性：href 指定跳转的目标路径

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

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

例如：< a href=“https://www.baidu.com”>超链接< /a>

3.6.1 target属性

解析：用来指定超链接打开的位置

可选值：

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

​ _blank 在一个新的页面中打开超链接

例如： < a href=“07.列表.html” target="_blank">超链接< /a>

3.6.2 小技巧

1. 书写lorem可以自动生成一段英文文本 -

例如： < p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.< /p>

2. 在开发中可以将#作为超链接的路径的展位符使用

例如：

< a href="#" style=“color: burlywood;”>这是一个新的超链接< /a>

3. 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生

例如：

< a href=“javascript:;” style=“color: burlywood;”>这是一个新的超链接< /a>

3.7 img (图片标签)

解析：

1. img标签用来向当前页面中来引入外部图片，img标签是一个自结束标签
2. img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

例如：< img src="./img/1.gif" alt=“松鼠”>

属性：

1. src 属性

   –指定的是外部图片的路径

2. alt

–图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

–搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

3. width

   –图片的宽度 (单位是像素)

   –height 图片的高度

   –宽度和高度中如果只修改了一个，则另一个会等比例缩放

   注意：

   ​ 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大

   ​ 但是在移动端，经常需要对图片进行缩放（大图缩小）

3.7.1 图片格式

jpeg(jpg)

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

​ - 一般用来显示照片

gif

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

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

png

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

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

webp

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

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

​ - 缺点：兼容性不好

base64

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

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

图片使用规则

1. 效果一样，用小的

2. 效果不一样，用效果好的

3.8 内联框架

解析： 内联框架，用于向当前页面中引入一个其他页面

属性： 1. src 指定要引入的网页的路径

​ 2.frameborder 指定内联框架的边框

例如：< iframe src=“https://www.qq.com” width=“800” height=“600” frameborder=“0” style=“color: burlywood;”>< /iframe>

3.9 音视频

3.9.1音频

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

属性：

1. controls 是否允许用户控制播放

2. autoplay 音频文件是否自动播放

​ - 如果设置了autoplay 则音乐在打开页面时会自动播放，大多浏览器都不会自动对音乐进行播放

3. loop 音乐是否循环播放

例如:

方式一：< audio src="./source/audio.mp3" controls autoplay loop>< /audio>

方式二：
< 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>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 ,方式二可以做到浏览器兼容

3.9.2 视频

解析：视频跟音频功能属性相似

区别：标签是< video>< /video>

例如:
< video controls>

​ < source src="./source/flower.webm">

​ < source src="./source/flower.mp4">

//兼容< embed src="./source/flower.mp4" type=“video/mp4”>

< /video>

4 HTML中的 行内元素和块元素

1. 在网页中一般通过块元素来对页面进行布局

解析: 在网页中一般通过块元素来对页面进行布局

2. 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

3. 块元素中基本上什么都能放

4. p元素中不能放任何的块元素