web前端之HTML全部笔记（包含html5)

最新推荐文章于 2024-06-25 14:27:38 发布

Komorebi_9999

最新推荐文章于 2024-06-25 14:27:38 发布

阅读量1.5k

点赞数 39

文章标签： html5

本文链接：https://blog.csdn.net/JLY19970726/article/details/135073739

版权

内存是一个暂时性的存储（但是内存的读写速度快），一旦断电，保存在内存里的东西会瞬间消失。

计算机能安装多少东西，取决于硬盘有多大。

计算机分为硬件(中央处理器、存储器（内存、硬盘）输入设备、输出设备）和软件（系统软件、应用软件）

计算机的两位先驱：图灵（人工智能之父）让二战提前几年结束

冯诺伊曼：现代计算机之父

C：Client客户端需要下载安装的软件

B:Brower 浏览器（可以在网页上打开）

S:server 服务器

应用软件分为C/S架构和B/S架构

前端工程师主要开发B/S架构的应用——写网页

C/S架构需要安装偶尔更新（很多CS架构的安装的时候不能使用得安装完才用）不跨平台（不同的平台需要安装不同的软件包，对于用户和开发工程师来讲都很麻烦）

B/S架构无需安装无需更新可跨平台（因为是只需要写一个网页）

AE是专门做影视特效的

大型的（英雄联盟）专业应用（After Effects)，对安全性要求比较高（航天性，军事性的，细化到只有某些人的某些电脑才可以安装）的的还需要用C/S架构开发。因为浏览器无法支持它们巨大的运算量。

chrome的渲染性和稳定性是做的最好的。(2008年问世）

IE浏览器（1995年问世）

内核是浏览器的核心，用于处理浏览器所得到的各种资源。

Chrome 早期使用 webkit 内核，现在使用 Blink 内核

Safari 使用 webkit 内核

IE浏览器使用 Trident 内核

Firefox 使用Gecko 内核

Opera 早期使用 Presto 内核 (已放弃维护)，现在使用 Blink 内核

一个或多个网页就构成了一个网站

网页的组成：结构（HTML）行为（javaScript) 表现（CSS）

HTML是超文本标记语言，超就是超链接的超。

将Chrome浏览器设置为默认浏览器的方式。

开始菜单-设置-默认应用/选择默认Web浏览器。

将网页用记事本打开

方式一：右键选择打开方式（用记事本打开）

方式二：打开记事本，鼠标左键点住文件不要松手，将它拖动到记事本里面

HTML文档声明 <!DOCTYPE html>声明是按照HTML5的标准写的

W3C的出现为了制定网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。

所以，我们需要制定我们编写的网页都需要遵循w3c的规范

HTML为超文本标记语言，它负责网页的三个要素之中的结构

HTML使用标签的形式来标识网页中的不同组成部分

所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

纯文本只能存储文本数据，记事本是文本，word是富文本

文件的扩展名决定了文件是什么格式可以由哪个程序打开。网页文件的扩展名为.html.

标签有另外一个名字叫做元素。

标签不区分大小写，但一般都是小写（因为小写更规范）

（1）有的标签是成对出现的，有开始有结束，有的标签是自结束标签。

自结束标签的数量很少。

自结束标签<input/> 自结束标签的/可以省略
标签也可以嵌套，如果发生嵌套，一般不会写在一行，要写成多行，还要缩进。

<标签名>标签体</标签名>标签都是成对出现的，只有标签名里面的标签体会被对应标签渲染。

标签的作用就是标出网页中不同的内容

网页中所有的内容都要写到根标签里面

<标签名>标签体</标签名>

<!DOCTYPE html>

<html>

<title>网页的标题<title>

</head>

<h1>网页的大标题</h1>

</body>

</html>

想呈现在页面上的东西就写在body里面。

<head>标签里面写的内容不会呈现在网页中

浏览器在运行的时候会检查代码，把不对的地方进行纠正修改。

<title>里面写的是网页的名字。

[查看网页源代码] 看到的是: 程序员编写的源代码

[检查]看到的是: 经过浏览器“处理”后的源代码。

日常开发中，(检查]用的最多

注释可以隐藏一些不想显示的内容，和删除是不一样的

注释是不能嵌套的。

HTML中的语言不区分大小写。

在一开始就声明当前网页的版本是html<!doctype html>

计算机无法直接对bit进行操作，计算机的底层进制是二进制

所以的数据在计算机中的存储都是以二进制的形式存储的。

所以一段文字在存储到内存中时，都需要转换为二进制编码。

编码：将字符转为二进制的过程为编码

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

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

编码和解码所用的字符集需要一样。

GB2312 GBK是中国的，后者是对前者的扩展。

UTF-8是万国码，包含是世界上所有的编码。

在开发时，我们使用的字符集都是UTF-8.

常见的字符集编码:ASCII ISO88591 GB2312 GBK UTF-8

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

实体（专门用来表示一些特殊符号，用的不是很多。）

无论实体之间有多少个空格，浏览器都解析为一个空格。

空格

> 大于号

< 少于号

meta标签

用来设置网页的一个元数据。就是让搜索引擎对网页分类。

keywords不区分大小写，表示网页的关键字，可以写多个关键字，关键字之间使用,隔开。

用来设置网页的一个元数据。就是让搜索引擎对网页分类。

keywords不区分大小写，表示网页的关键字，可以写多个关键字，关键字之间使用,隔开。

<meta>

name 指定的数据的名（属性名）

属性值：keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开

description 用于指定网站的描述

charset 指定的网页的字符集

content 指定的数据的内容

将页面重定向到另一个网页，3表示三秒后跳转

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

列表（列表之间可以互相嵌套）

1.<ol> 有序列表

</ol>

2.<ul>无序列表（用的最多）

</ul>

3.定义列表

<dl>(用的比较少）

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

</dl>

1.可以从一个地方跳转到网页的其他地方或者其他网页。

2.是一个行内标签，可以嵌套除它自身以外的所有的标签。

<a href="https://www.baidu.com">超链接</a> （跳转到外部网站的地址）（绝对路径）

<a href="07.liebiao.html">超链接</a> (跳转到内部页面）需要这两个页面在同一个目录之下）（相对路径）

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

../表示当前文件所在的上一级目录

所有路径都是相对于当前目录。有再多的层级关系都用/隔开

语义化标签

<hgroup>用来为标题分组，将一组有关系的标题放在一起，都放在hgroup里面。

<em></em>表示语音语调的加重，需要重读。表现在网页上面就是字体会变斜体。在页面中不会独占一行，称为行内元素。

<strong></strong>表示语义的加重，表现在网页上就是字体的加粗。

<blockquote></blockquote>表示引用别人的话，是一个长引用，是块元素，独占一行。

<q></q>是一个短引用，表示引用名人名言，没有换行，是一个行内元素。

<br>表示换行

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

标题标签，

h1 ~ h6 一共有六级标题

从h1~h6重要性递减，h1最重要，h6最不重要

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

在页面中独占一行的元素称为块元素（block)

浏览器在解析网页的时候，会自动修正不正确的东西。块元素中基本什么都能放，p元素中不能放任何的块元素。

html5新增的内容

<header>网页的头部

<footer>网页的底部

<main>网页的中间

一个网页只能有一个<main>

<nav>导航

<aside>侧边栏

<section>分区，分块

<article>一个独立的文章

<marquee>这个标签已经被废除了。

行内元素不会独占一行

行内元素可以写行内元素，但是不能写块级元素

常用的文本标签

文本标签通常都是行内元素（em,strong,span)

em表示语气的加重，表现出现的效果是斜体。

strong表示意思的强调，表现出现的效果是字体的加粗。strong的语气要比em要强。

em语气的加重表现出现的效果是斜体strong意思的强调字体的加粗

h1是网页中最重要的内容，只能写一个。

q为短引用，blockquote为长引用。

这些不常用的文本标签里面只有<blockquote>和<address>为块元素。

IE浏览器无法呈现webp格式的图片，一定要使用的话务必解决兼容性的问题。

京东网站的处理，存了两套图。图片后缀为.jpg.webp.

如果不支持的话，通过js把后面的.webp干掉，剩下的就是.jpg了.用这种方式解决兼容性问题。

base64还有一个特点，就是不挑文件的路径。

cite 作品标题 (书籍绘画、雕塑)电视节

dfn 特殊术语，或专属名词

del与ins 删除的文本[与] 插入的文本

sub与sup 下标文字[与] 上标文字

code 一段代码

Samp 从正常的上下文中，将某些内容提取出来，例如: 标识设备

Kbd 输出键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中

Abbr 缩写，最好配合上 title 属性

bdo 更改文本方向，要配合 dir 属性，可选值: tr (默认值) 、 rt1

var 标记变量，可以与 code 标签一起使用

small 附属细则，例如: 包括版权、法律文本。-- 很少使用

B 摘要中的关键字、评论中的产品名称。

用一行代码来告诉浏览器自己选择的编码方式

计算机可以识别的语言只有二进制

（就是一堆0和1）

对计算机来说字符集不止一种，编码和解码的方式也不止一种。

原则1: 存储时，务必采用合适的字符编码否则: 无法存储，数据会丢失!

原则2: 存储时采用哪种方式编码，读取时就采用哪种方式解码否则: 数据错乱 (乱码) !

存储时，要采用合适的字符编码。否则:无法存储，数据会丢失。因为UTF-8是万国码，所以我们使用UTF-8.

美国ASCI => 大写字母、小写字母、数字、一些符号，共计128个

欢洲ISO8859-1 =>在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。

中国GB国标GB2312 =>继续扩充，收录了 6763 个常用汉字、682个字符.

中国 k扩展GBK =>收录了的汉字和符号达到 20000+，支持繁体中文

万国码UTF-8=>万国码，包含世界上所有语言的: 所有文字与符号。很常用。

HTML设置语言<html lang="zh-CN">

<marquee></marquee>可以让里面的内容滚动播放不过现在已经禁用了

lang属性的编写规则

前面是语言，后面是国家地区

1.第一种写法 (语言-国家/地区 ) ，例如:

zh-CN : 中文-中国大陆 (简体中文)

zh-Tw : 中文-中国台湾 (繁体中文)

zh :中文

en-US : 英语-美国

en-GB : 英语-英国

2.第二种写法(语言一具体种类) 已不推荐使用，例如:

zh-Hans : 中文-简体

zh-Hant : 中文-繁体

W3School 上的说明:《语言代码参考手册》《国家/地区代码参考手册》4. W3C官网上的说明:《Language tags in HTML》

中国的是W3School是非盈利的组织。

html的标准结构

<!DOCTYPE htm1>

<head>

<!如果是为移动端写的页面，需要写下面的两行>

<title>Document</title>

</head>

<body>

</body>

在VScode里面输入!，随后回车即可快速生成标准结构

html的标准是W3C制定的。

W3school

MDN (reference html)推荐使用，很多开发者都在用。

HTML超文本标记语言

超文本 : 是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容

ol有序列表

ul无序列表

dl定义列表(dt为标题，dd为描述）

<dl>

</dl>

列表注意事项

1.列表是可以嵌套的<ol><ul><dl>这些可以互相嵌套。

2.写了ol或者ul，最好让它的子元素是li,如果写了别的，最好用li来包裹一下。

li不能单独写，显示出来的效果是无序列表的效果，但是它是一个孤零零的li

自定义列表里面一个术语名称可以有多个术语描述。
4.有序列表是侧重于顺序的。<ol>
无序列表用的更多，不侧重于顺序。
shift+tab一起按就是往左动。

超链接<a> 可以跳转到内部页面，也可以跳转到外部页面

<a target=”_blank” href=” ”> 在新的空白页面打开

<a target=”_self” href=” ”> 在原来的页面打开

<a>标签是行内元素，但是可以包裹任何东西，除了它自身以外。<a>标签不可以嵌套。

跳转文件

zip浏览器不可以直接打开，需要解压。

下面这些格式的文件浏览器可以直接打开(mp4,pdf,jpg,gif)

浏览器不可以打开的文件，会触发一个下载框，在<a>标签里面写download属性可以触发下载。

如果download不写属性值，下载的文件名字就是文件本身的名字。

如果downlaod写属性值，比如download="好看",效果如下。

超链接-跳转锚点

<a href="#htl"> 如果不写#的话会当成普通路径，执行跳转页面的操作。

<a name="htl">一起搭配使用

" "里面的东西区分大小写，并且是唯一的，不能有重复的锚点，否则会发生混乱。

name属性写在a标签上才算锚点。

跳转到任意位置需要用id.id是唯一不重复的，不能以数字开头

也可以用id写锚点，任何标签都可以写id属性。id是唯一的，区分大小写的，最好不要以数字开头。

推荐用id写锚点。

回到顶部<a href="#">回到顶部</a> #只能去顶部，不会发生任何跳转

刷新页面<a href="">刷新页面</a>

超链接也可以链接到其他页面

可以在：；之间写任意的js代码

<a href="javascript:;"></a>没有任何跳转功能

想往哪里跳都可以，前提就是制定好id属性，id属性不能重复

在开发中可以将#作为超链接的就的占位符使用。在还没有确定要跳转到哪里的时候。

<a href="#">超链接的占位符的用法</a>

超链接-唤起指定应用

音视频播放

使用<audio>标签来向网页引入音频。

controls出现播放控制器 loop循环播放 autoplay 自动播放

(1)<audio src=" " controls loop autoplay></audio>

(2)<audio controls>

这里可以引入多个音频文件，来解决浏览器的兼容问题。

</audio>

这里有两个兼容问题和它们的解决方法：

（1）浏览器对<audio>标签的兼容问题

(2）浏览器对音频格式的兼容问题

在网页中引入音频和视频，

现在mp3的兼容性比较好

在网页中引入Mp3音频。

<audio>标签就是向页面中引入一：个音频文件的，它和<img>标签一样也是一个替换标签，会被替换掉。

1.src用来指定音频的路径，可以是外部链接，也可以是本地文件的相对路径。

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

属性:

这几个属性没有值，需要就写，不需要就不写。

(1）controls 没有属性值。不加controls的时候，音视频的图标不会显示出来，加了之后才会在页面中看到。

(2) autoplay 设置音频自动播放

如果设置了autoplay，音频咋打开页面的时候会自动播放，但是目前来讲大部分浏览器不会对音频自动播放。IE浏览器会自动播放

(3) loop 让音频循环播放

播放器的外观设置需要使用java script.

2.除了可以使用src来指定外部音频的路径以外，还可以通过source来指定文件的路径。

这两种写法的效果一样。

对不起，您的浏览器不支持播放音频，请升级浏览器。

</audio>

引入多个音频链接可以解决浏览器对音频的兼容问题。

这两个格式的文件不会同时使用，如果第一个能用就用第一个，第一个不能用就用第二个。

原理：在支持<audio>标签的浏览器中，也会支持<source>标签，就会自动去找音乐播放。在不支持<audio>的标签的时候，也不会支持<source>,只会显示那一行文字。

对于支持<audio>的浏览器会播放音频，对于不支持的浏览器会显示文字。

解决IE8对音频文件的兼容问题。<embed>会自动播放，必须指定width和height，才能正常显示。这个标签非常的不好用。type用来指定播放的格式。

/前面的audio用来指定文件的大的类型，比如音频<audio>还是视频<vedio>，/后面用来指定具体的细分的类型mp3音频或者MP4视频。

如果想在正常的浏览器里面使用<source>在IE8浏览器里面使用<embed>有下面的写法。

原理一样，如果前面的支持了，就不会继续运行后面的代码了，后面的就不会执行了。

</audio>

<audio>没有兼容问题，基本所有浏览器都支持。

二、使用<video>标签来向网页引入视频。

controls autoplay loop的用法都是一样的。

（1）写法一：

(2)写法二：

</vedio>

使用方式和audio基本是一样的，MP4的兼容性比较好，一般使用mp4.

IE8不支持，解决办法和<audio>的解决方法一样。

正常的浏览器就用<vedio>+<source> ，不正常的浏览器就用<embed>

像音频视频这些东西，我们不会直接放到服务器里面，会购买一些第三方的托管服务。本地服务器就没有什么压力了，成本也小了很多。使用的时候就引入一些外部链接。

标签属性：

属性名和属性值写在标签里面

loop="1"叫做属性，loop叫做属性名，1叫做属性值

属性名和属性值必须按照W3C的规则写，要是写的不符合要求，比如写错单词，是不会起作用的。

标签里面可以写很多个属性，中间用空格隔开。但是不能写的重复，如果发生冲突，就以前面写的为主，后面写的会失效。属性名和属性值不区分大小写，以小写为主。属性值不用双引号，写单引号，或者不写也可以，但是要以W3C的要求来。

不同的标签能写的属性也不同

有的属性是一些标签独有的，有的属性是所有标签都可以用的，被称为全局标签，比如id(标签又被叫做元素）

有几个属性，只有属性名，没有属性值。

比如<input disabled>

<h1>-<h6>的一些排版标签

标题标签质检不能互相嵌套

标题标签<h1>-<h6>，<h1>-<h6>之间不能互相嵌套。默认效果字体会加粗，和其他的之间会有一些间距。

段落标签<p></p>,文字没有加粗效果。独占一行<p>标签里面不能再有标题标签<h1>-<h6>，也不能有<p>,<div>.

<p>里面不能嵌套任何块元素

<a>里面可以放除了它以外的任何元素。

<div>没有任何含义，相当于我们去超市购物使用的塑料袋。起一个封装的效果。可以对一些元素便于管理。

<div>相当于大塑料袋。<span>相当于小塑料袋

基本结构

<caption></caption>表格标题

<thead><tr><th></th></tr></thead>表格头部 <th></th>会加粗 h:heads

<tbody><tr><td></td></tr></tbody>表格主体 <td></td> d:data

<tfoot></tfoot>表格脚注

默认样式就是头部整体加粗

caption只能通过CSS设置.table的height是最少为那个值，只能大于等于它，

<tbody>表格主题，属性和<thead>相同

1. rowspan:指定跨的行数。

2. colspan : 指定要跨的列数。

图片标签

图片的引用有两种格式，一种是外部引用（超链接），一种是内部引用，可以引入外部图片也可以引入内部图片

<img>自结束标签，用于向当前页面中引入一个外部图片

img这种元素属于替换元素（位于块元素和行内元素之间），具有两种元素的特点。

alt对图片的描述，默认情况下不会显示出来，当图片无法显示的时候会显示出来。

搜索引擎会根据alt中的内容来识别图片，主要是给浏览器使用的。

如果不写alt属性就不会被搜索引擎搜到。

width:图片的宽度

height:图片的高度

如果只修改了一个，则另一个会等比例缩放，为了保持比例的不变（一般这么使用），会把另一等比例缩放。

一般情况在PC端，都不建议修改图片的大小。把大图缩小会浪费内存，把小图放大会导致失真。建议需要多大裁多大。

图片的格式

图片的格式（jpeg(jpg）、gif、png、webp)和它们各自的图片。

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

gif(支持的颜色较少，支持简单透明，支持动图，颜色单一的图片）

png 支持的颜色丰富，支持发复杂透明，不支持动图，颜色丰富，复杂透明图片（专为网页而生）

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

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

设置base64的图片会和网页一起加载出来，不会有延迟。

没有设置base64的图片会在网页加载出来之后，再加载图片，会有时间上的延迟。

网上有很多图片在线转换的。

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

内联框架<iframe src=”” width=”” height=””>向当前网页中引入一个其他页面

frameborder指定内联框架的边框宽度，一般设置为0.

表单基本结构

<input type="text" name=”wd”> 百度是wd,京东是keyword是固定的

</form>

<form action="https://www.baidu.com/s>会直接返回搜索结果

<form action="https://www.baidu.com/>会打开搜索主页，让你自己搜索

method有post和get，默认为get

<a>的方法写死了要查找的东西

什么是HTML5?

。HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟( W3C)完成标准制定

。官网地址:

W3C 提供: https://www.w3.org/TR/html/index.html

WHATW提供: https://whatwg-cn.github.io/html/multipage

HTML5在狭义上是指新一代的 HTML 标准，在广义上是指: 整个前端

2.HTML5 优势

1针对 JavaScript，新增了很多可操作的接口。

2.新增了一些语义化标签、全局属性

3.新增了多媒体标签，可以很好的替代 flash。

4.更加侧重语义化，对于 SEO 更友好

5、可移植性好，可以大量应用在移动设备上

3.HTML5兼容性

支持: Chrome 、 Safari、 Opera 、 Firefox 等主流浏览器。

html5新增的内容

<header>网页的头部

<footer>网页的底部

<main>网页的中间

一个网页只能有一个<main>

<nav>导航

<aside>侧边栏（和主体相关的其他内容）

<section>分区，分块其他的标签都不能使用的使用使用section

<article>一个独立的文章

关于article和section :

l. artical 里面可以包含多个 section 。

2 section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。3.article比 sect1on 更强调独立性，一块内容如果比较独立、比较完整，应该使用article 元素

新增状态标签<meter><progress>

<meter>

属性	值	描述
high	数值	规定高值
low	数值	规定低值
max	数值	规定最大值
min	数值	规定最小值
optimum	数值	规定最优值
value	数值	规定当前值

属性	值	描述
max	数值	规定目标值
value	数值	规定当前值

<body>

</body>

新增列表标签

标签名	语义	单/双标签
datalist	用于搜索框的关键字提示	双
details	用于展示问题和答案，或对专用名词进行解释	双
summary	写在details的里面，用于指定问题或专有名词	双

</datalist>

<summary>如何走上人生巅峰? </summary>

<p>一步一步走呗</p>

</details>

新增文本标签

文本注音

标签名	语义	单/双标签
ruby	包含需要注音的文字	双
rt	写注音,rt标签写在ruby的里面	双

<ruby>

</ruby>

文本标记

标签名	语义	单/双标签
mark	标记（建议用mark用于标记搜索结果中的关键字	双

W3C建议mark用于标记搜索结果中的关键词

新增表单控件

<body>

</div>

function go (){

music.play()

mask.style.display = 'none}

</script>

</body>

<draggable>需要和JS配合使用

<spellcheck>需打开浏览器的拼写检查

Komorebi_9999

关注

39
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端之HTML全部笔记（包含html5)

-meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，用来避免乱码--> <meta charset="utf-8"> --body是html的子元素，表示网页的主体，网页中所有可见的内容都应该写在body里--> <!/前面的audio用来指定文件的大的类型，比如音频<audio>还是视频<vedio>，/后面用来指定具体的细分的类型mp3音频或者MP4视频。
复制链接

扫一扫