HTML笔记

最新推荐文章于 2023-01-30 09:45:00 发布

三分落樱

最新推荐文章于 2023-01-30 09:45:00 发布

阅读量104

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45590098/article/details/121151619

版权

HTML：

超文本标记语言：负责网页三要素的结构

文件名.html就是网页的模式

<标签名> aaaa（标签体）</标签名>（结束标签）

…

> 一级标签

同理二级标签三级等。。

…

段落标签

//网页的标题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKhUWIZf-1636031455269)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210302120116468.png)]

是head中的子标签

是 HTML标签中的子标签

用户中可见的内容

是 HTML标签中的子标签根标签所有网页中的内容都应该在这个根标签中

除了以上成对的双标签还有没有结束标签的等单独自标签

// <!–

这是HTML中的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但可以在源码中查看注释，注释用来对代码进行解释说明。并且注释是不能嵌套的

-->

属性：在标签中还可以设置属性

属性是一个名值对（如x=y）

属性和标签名或者其他属性应该使用空格隔开如>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgqp2Owf-1636031455272)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210302152852220.png)]

有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

网页中还应该有文档声明（doctype）来告诉浏览器当前的网页版本

html5的文档声明 <!doctype html> 写在网页的最开头也就是之前

关于进制：

十进制(日常使用)

特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12…

单位数值： 0 1 2 3 4 5 6 7 8 9

二进制（计算机底层进制）

特点：满2进1 计数： 0 1 10 11 …

单位数字：0 1

八进制（很少用）…十六进制…

十六进制计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 13 14 15 16

字符编码：

所有数据在计算机中存储时候都是以二进制的形式存储的，文字也是。所以一段文字在存储到内存之中时候，都需要转化为二进制编码，当打开读取文字时候计算机会将编码转化为字符供我们阅读。

编码：将字符转化成二进制码的过程叫做编码

解码：将二进制码转化为字符的过程叫解码

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

乱码：编码和解码所采用字符集不同就会产生乱码

一般来说字符集有：ASCII. ISO88591. GB2312 .GBK .UTF-8.

UTF-8(万国网)基本包括了所有国家的码（现在的一般默认都是用的UTF-8）

可以通过meta标签来设置网页的字符集，避免出现乱码问题

// 这样

前端分工比较明确，HTML只负责定义结构，CSS只负责去装饰就行了。

在 VSCODE中！+ Tab 键可以一键生成基本框架

还有 lang ="…" (zh-cn 中文 en 英文) 是告诉浏览器该网易是由哪国语言写的方便网页提示用户是否启动翻译工具。

常用标签（1）p标签标示段落（2） h1 h2…几级标题（3）b标签是加粗

在网页中当多个空格的情况下都会被浏览器解析为一个空格

当HTML有些情况我们不能直接书写一些特殊符号比如多个连续的空格，比如字母两侧的< 和>号

如果我们在网页中需要书写这些特殊符号，我们就需要用HTML中的实体（转义字符）

实体语法：

&实体名字；

&nbsp；表示一个空格

&gt；表示一格大于号

&lt ; 表示一个小于号

&copy；表示版权符号

meta标签：

写在head标签里面另外meta标签用来设置网页的元数据。定义HTML文档中的元信息

常用元数据有： charset 指定网页的字符集 name 指定的数据的名称 content 指定数据的内容

< meta name=“keywords” content =“HTML5,前端。。。”>

keywords 是网页的关键字他的时值就是我在Content中所赋予的值。（这就是为什么搜索购物就能搜到淘宝京东这样的购物网站）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oV6e9pmk-1636031455273)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210304171532175.png)]

dscription描述网站的描述会显示在搜索引擎的搜索结果中

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

< meta http-equiv=“refresh” content=“3;url=https://www.baidu.com”> 表示将页面重定向到另外一个网页 content里面的内容可以更改

题外话（ctrl+空格）换行

语义化标签：

h1-h6重要性以此递减，h1在网页中的重要性仅仅次于title标签，因此，一般情况下一个页面中只有一个h1标签，一般情况只会用到h1-h3

在页面中独占一行的元素成为块元素（block element）

p标签只表示一个段落所以他一个块元素，标题标签也是

… 这个是标题组分组标签

em标签表示语音语调的一个加重（我感觉就是斜体）（不会独占一行，行内元素）

行内元素：在页面中不会独占一行的元素成为行内元素

strong标签表示强调，重要的内容

blockquote标签表示一个长引用（会独占一行，是块元素）

q 标签表示一个短引用（不会独占一行，是行内元素）

br标签表示页面中的换行

块元素与行内元素：block element & inline element

块元素：在网页中我们一般通过块元素对网页进行布局

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

块元素中基本什么都能放块元素

特殊：p元素（是块元素）中不能放任何块元素

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

比如：标签写在了根元素外面 p元素中嵌套了块元素根元素中出现了除head和body意外的子元素

行内元素：主要用来包裹文字

布局标签：

header 标签表示网页或某个部分内容的头部部分。。相对常用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hAWzC9Oy-1636031455274)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210305071715650.png)]

main标签网页的主体(header一个网页中可以有多个但main只能有一个)

footer标签表示网页或某个部分内容的底部（H5新增）

nav标签表示网页中的导航相对常用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrzx04xW-1636031455276)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210305072322386.png)]

aside标签和主体相关的其他内容

article标签表示一个独立的文章

section 表示一个独立的区块，上面的标签都不能表示时可以用section（相对常用）

div 没有语义，就表示一个区块，目前来讲div还是我们主要的布局元素（其实上面所有都能用DIV表示，div是目前网页最常用的标签）

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

列表：LIST

HTML中也可以创建列表一共有三种：

用li标签表示列表项（list item 列表项）

1.有序表用ol标签来创建有序列表

2.无序表用ul标签来表示创建无序列表

3.定义列表用dl来创建定义列表（用的比较少）

dt表示定义的内容 dd标签是对内容进行解释

但不同浏览器前面的列表标志可能会不同所以一般会把其隐藏掉

且列表之间是可以相互随意嵌套的

HTML 超链接：

功能就是将一个页面跳转到另外一个界面，用a标签来实现超链接

a标签中有个属性href 是用来表示跳转到的其他页面地址的

a标签是一个行内元素但是却可以嵌套任意元素（除了他自身）

比如：//这是一个超链接

(当href值为外部地址时候一定要加上正确地址值，要加上协议)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TWlDkpL-1636031455276)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306110244560.png)]

当HERF中过的网页地址是同目录下的文档时可以直接写文档名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XHxgqPta-1636031455277)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306110541092.png)]

HTML相对路径：

当我们需要跳转到服务器内部的页面时候我们一般使用相对路径：

./ …/ 当都不写时候系统会默认你写了

./表示当前文件所在目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bCa895jv-1636031455278)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306110824123.png)]

超链接的一些其他用法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qk8G0cKH-1636031455278)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306111224544.png)]

现在这样的一个超链接是从当前网页转化为百度

当我们需要保留当前网页新建一个页面跳转到目的网页的时候我们就需要一个属性target

target属性，用来指定超链接的打开位置

可选值：

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

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

lorem

自动生成英文文本

可以直接将href属性设置为#，这样点击超链接之后页面不会跳转而是跳转到页面的顶部位置

加上id属性后可以指定任意网页位置

id属性：唯一不重复的

每一个标签都可以添加一个id属性

id属性就是一个元素的唯一标识，同一个页面中不嗯呢该出现重复的id属性（属性值是区分大小写的且字母开头）

跳转到页面的指定位置，只需要将href属性设置为 #元素的id属性值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MbXLnGy-1636031455279)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306113202662.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fdSTg5Pb-1636031455280)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306113613976.png)]

图片标签：

用于向当前页面中引入一个外部图片

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

src属性是指定外部图片的路径（规则和超链接是一样的）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ZD4cuG8-1636031455280)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306115332487.png)]

也可以引入外部图片地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGJEbulo-1636031455282)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306115359301.png)]

img是一个替换元素：块元素和行内元素的特点都具有

2 alt 属性图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时现实

搜索引擎会主要根据alt中的内容来识别图片

3 width属性：图片宽度（单位是像素） height属性：图片高度

修改了一个属性一般另一个属性会等比例缩放

在PC端一般不建议修改图片大小需要多大就裁多大的图

但是在移动端经常需要对图片进行缩放

图片格式：

常见的有jpg、gif、png、webp

jpg：支持颜色丰富不支持透明效果不支持动图

-一般用来显示照片

gif：支持颜色比较少支持简单透明支持动图

-颜色单一的图片，动图

png：支持颜色丰富支持复杂透明不支持动图

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

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

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

-缺点：兼容性不好，所以一般用于移动端或者新版的浏览器

效果一样用小的，效果不一样用效果好的。（效果和大小之间要有个合适的衡量）

base64:可以将图片使用base64进行编码这样可以将图片转化为字符，然后通过字符的形式来引入图片

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

内联框架：

iframe标签和图片标签很像内联框架用于当前页面中引入一个其他页面

其中的src属性指定要引入网页的路径

width、height属性：引入页面的大小和宽度

frameborder边框框架取值：0 和1 0表示没有边框 1表示有

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZkAPc9d-1636031455282)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306150705970.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UznBf8d4-1636031455283)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306150713435.png)]

音视频播放：（替换元素）

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

音视频文件引入时，默认情况下是不允许用户自己控制播放停止的

当加入controls属性的时候就允许用户自己控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-01BdtcrL-1636031455284)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306151406890.png)]

还有autoplay属性是音频自动播放

-如果设置了autoplay则音乐在打开页面时候会自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放。（大部分浏览器为了提高用户体验）

loop属性：每当音频结束时候重新开始播放

除此之前还可以通过source标签来通过src来指定外部文件路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5P6yIWI-1636031455284)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306153514361.png)]

对于版本够的浏览器audio标签直接去找source去了就不显示文字内容，而对于低版本不能识别audio和source标签就会显示文字内容

且audio中可以调用多个source标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9a4AQZqW-1636031455285)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306153742169.png)]

会自动搜索显示第一个source中的内容

embed标签可以让基本所有浏览器都播放音频，且自动播放且需要指定播放器的width和height

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MDlgggzv-1636031455286)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306154249658.png)]

这样就可以提高播放的兼容性

video标签用来引入一个视频

使用方式和audio基本是一样的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eko0sOOI-1636031455286)(C:\Users\11791\AppData\Roaming\Typora\typora-user-images\image-20210306154518664.png)]

最好也这样写来提高兼容性

同样也可以在video中加入embed子标签

以上的都是引入的本地文件了（由于音频文件对于自身运营成本过大）

所以一般音频文件都不会往本地放音频文件

所以可以购买云服务地方来放音频来减少成本

也可以直接通过YOUTUBE B站等视频网站的页面来白嫖资源（LOW）

索显示第一个source中的内容