html理论基础

最新推荐文章于 2022-08-06 20:34:18 发布

求offer看看我吧

最新推荐文章于 2022-08-06 20:34:18 发布

阅读量345

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43965942/article/details/104730738

版权

一、 HTML学习记录

0. 前言：

web标准的介绍

w3c: 万维网联盟组织，用来指定Web标准的组织
web标准：制作网页要遵循的规范
结构：html ; 表现：css ; 行为：JavaScript

1. HTML介绍：

1.1 什么是HTML?

全称是hypertext markup language, 超文本标记语言，不是一种编程语言，是一种标记语言。由一系列的元素组成。
作用：主要作用是负责描述文档语义的语言。
注意：HTML不是一个编程语言，是一个标记语言，是没有编译过程的，HTML页面直接由浏览器解析执行。

1.2 计算机编码介绍

1.2.1 基本知识

bit：计算机存储的最小单位。以 0 或 1 来表示比特位的值。网络信息传输的基本单位。
字节：8 个比特位表示一个字节。
字符：字符是可使用多种不同字符方案或代码页来表示的抽象实体。

1.2.2 字符编码

ASCII：用一个字节表示一个字符，只能表示英语字母，特殊符号，数字。
GB2312 : 对ASCII的中文拓展
GBK: 融合GB2312并新增 20000 个新的汉字（包括繁体字）和符号
unicode编码（统一编码）utf-32：四个字节表示一个字符，32个bit，效率太低
utf-16 : 两个字节/四个字节表示一个字符
utf-8 : 根据字符的不同选择编码的长度，ascII编码中的符号仍然采用一个字节来编码，格式0XXXXXXX。中文采用2个字节来表示，格式110XXXXX 10XXXXXX

1.3 颜色介绍 3个字节

纯单词表示：gray，green，red
10进制表示：rgb(255, 0, 0), rgb(0, 255, 0) 顺序是红、绿、蓝；如果有第四个值，代表透明度
16进制表示：#FF0000 , #00FF00

1.4 什么是元素？

元素的主要部分如下图所示： 元素 = 开头标签 + 内容 + 结束标签
在这里插入图片描述

1.5 什么是属性：包括布尔属性，可以没有属性值，比如checked等

在这里插入图片描述

2. HTML规范: （HTML不区分大小写）

2.1 XHTML：

什么是XHMTL：

指的是可扩展的超文本标记语言，是一个更严格/更纯净的HTML版本，以XML应用的方式定义的HTML

编写XHTML的语法：

序号	规则
1	必须正确嵌套，不能交叉嵌套
2	标签必须小写且必须关闭
3	所有的属性必须加引号
4	所有的属性必须加引号
5	必须要有DTD文档类型定义

2.2 HTML文档剖析

1. <!DCOTYPE html>：文档类型。是一个声明，在文档的最前面，主要作用是告诉浏览器按着哪种规范解析页面
2. <html></html>：html元素，该元素将所有内容包装在整个页面上，也称为根元素
3. <head></head>：是所有头部元素的容器
4. <body></body>：用户访问吧页面时要显示的所有内容

3. HTML结构详解

3.1 文档声明头：

doctype definition，简称DTD, 告诉在文档的最前面，主要作用是告诉浏览器按着哪种规范解析页面

具体的声明头：

版本	声明头	介绍
html1-html3	美国军方及高等研究所用	无
html4.01 strict	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	不允许使用框架样式相关标签属性不允许使用等
html4.01 Transitional	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`	不允许使用框架
html4.01 framset	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`	允许使用框架
xhtml4.10- strict	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`	必须以正确的xml格式标记
xhtml4.10 Transitional	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`	必须以正确的xml格式标记
xhtml4.10 framset	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">`	必须以正确的xml格式标记
html5	`<!DOCTYPE html>`

为什么5中只需要写!DOCTYPE html？
HTML4.01中基于SGML，所以需要引用DTD, DTD 规定了标记语言的规则
HTML5 不基于 SGML，所以不需要引用 DTD。

3.2 HTML head

meta标签

name	description
charset	允许该文档使用的字符集
name = author	content = 作者信息
name = description	content = 描述信息做到SEO(搜索引擎优化)
name=“Keywords”	content=网页关键字有助于SEO
name=“viewpoint”	content=width=device-width, initial-scale=1.0 表示视口宽度等于屏幕宽度
HTTP－EQUIV=refresh	content=3;url 指定时间后跳到指定页面

除了上面的refresh属性规定重定向外, 还可以设置location：

res.statusCode = 301/302;
res.setHeader("Location", "url")

title标签：设置网页题目, 也有助于SEO
link外部资源链接元素

name	description
rel	规定当前文档与链接文档的关系常用icon/stylesheet
url	属性指定链接资源的url
type	定义链接到的内容的类型 mime类型
sizes	定义图标大小
media	指定适用的媒体

引用样式的三种方式

名字	方式	具体代码	位置
外部样式表	link引用	`<link rel="stylesheet" href="css/demo.css">`	外部
内部样式表	style标签内部写css	`<style type="text/css">p{color: blueviolet;}</style>`	head
内联样式表	直接在标签内部加style属性	`<div class="example-paragraphs" style="color: aqua;">`	body

引用js脚本的两种方式
1 、第一种方式：直接放在script标签中
javascript脚本的执行会阻塞它后面的html的解析
```
<script>
	var header = document.querySelector(".header");
	...
</script>
<div></div>
```
2、第二种方式：外链脚本
外链脚本的加载会阻塞它后面的html的解析
```
<script src="js/form.js"></script>
<input type="button" value="yz">
```
但是多个外链脚本他们之间是并行加载的
```
<script src="js/form.js"></script>
<script src="js/domo.js"></script>
<script src="js/snake.js"></script>
```
对于外链类型，如果在script后面加上async/defer，脚本的加载的过程都不会阻塞html的解析，async和defer不同的是：
- async。脚本加载后就会立刻开始脚本执行，并停止对html的解析，待脚本执行完再继续html的解析
- defer。脚本加载后，会等到全部的html的文档都解析完，脚本才开始执行

3.3 body中的标签属性

3.3.1 块级元素VS内联元素

 块级元素： 
 · 会在元素之前的内容上换行，在它之后的元素也会换行
 · 块级元素不会嵌套在一个内联元素中，内联元素可以嵌套在一个块级元素中
 · 常见的块级元素包括：段落、列表、导航菜单等
 
 内联元素：
 · 不会导致新行的出现
 · 常见的内联元素包括：超链接、强调元素、span等

3.3.2 字体标签

预留字符要替换到字符实体，具体参考链接, 其中需要牢记背诵的见下表

转义字符	字符	描述
` `		空格
`<`	<	小于号
`>`	>	大于号
`©`	©	商标

文字标签列表 big在html5中已经删除

3.3.3 body中非字体标签

1⃣️ . a标签
可以实现的功能包括：链接到绝对url ; 页面内的跳转（其中href = # -> 回到页面顶部) ; 文件的下载 等等

属性	含义
download	提示用户保存链接的url 。若没有值可能是从url路径截取/从请求头里的content-disposition等位置
href	超链接指向的url
type	提示链接的url的格式 mime类型
target	_self: 当前浏览上下文【默认】； _blank 新标签页； _parent 当前浏览器父浏览器上下文， _root在顶级窗口打开
name	锚的名称
title	悬停文本

2⃣️ . img标签
兼容性比较好的图片格式png、svg、gif、bmp、（.jpg, .jpeg, .jfif, .pjpeg, .pjp）、ico

属性	含义
src	图片路径
alt	替代文本描述，在图片加载失败时非常有必要
width	宽不带单位整数
height	高不带单位整数
loading	如何加载图像 lazy延迟加载/eager立即加载
decoding	解码提示同步/异步
title	提示性文本

3⃣️ . input标签

名称	类型	说明
button	按钮	按钮的值在value属性中填写
radio	单选框	一般和lable组合使用，name相同为一组，一组仅能有一个元素被选中
checkbox	复选框	一般和lable组合使用，name相同为一组，一组允许一个或多个元素被选中
text	文本类型	文本字段
password	密码类型	遮盖文本
submit	提交	用户代理尝试将表单提交给服务器；

补充内容：
submit类型下支持属性formenctype属性，表示编码类型。其中text/plain代表纯文本，multipart/form-data代表formdata处理数据，application/x-www-form-urlencoded使用encodeURI() 之类的算法对文本进行加密，默认使用最后一种方式

4⃣️ . form标签

属性	说明
action	定义提交表单时应将表单的收集数据发送到的位置
method	定义了使用哪种HTTP方法发送数据

5⃣️ . ifame标签

属性	说明
src	要潜入页面的url
sandbox	设置是否支持使用脚本，是否支持表单提交等

3.3.4 常见组合

1⃣️ . 有序/无序列表

标签名	含义
ol	有序列表项可以嵌套，支持用start属性改变第一个元素的序号
ul	无序列表项支持嵌套
li	列表条目有序列表中可以加入value属性改变当前序号（加value仅在有序列表中有效）type=“circle”/square变为空心圆/方形（仅在无序列表中有效）

2⃣️ . table表格
标签：

标签名	含义
table	表格
tr	表格行元素
th	表格的头部单元格
td	表格的单元格
caption	表格标题元素
thread	表头元素
tbody	表主体元素
tfoot	定义表格的页脚 ; tfoot、tbody、thread数据可以边获取边显示，不写的话要等表格全部内容都取完才显示出来

属性：

属性名	含义
table:border-collapse	是否合并边框
tr:colspan	水平方向上合并单元格
tr:rowspan	垂直方向上合并单元格

3⃣️ . 下拉框/自动完成框

标签名	含义
option	可选项
select	下拉框
datalist	自动完成框将input绑定到这个list来实现

3.3.5 多媒体相关标签

标签名	具体用法	解释
bgsound	<bgsound src=“xxx.mp3”></bgsound^>	可以加入loop=-1来循环播放
marquee	behavior=slide只移动一次；scrollamount移动速度；direction:right 移动的方向； loop：循环多少圈 ; scrolldelay移动一次休息多长时间	滚动字幕标签

4 HTML5的介绍

4.1 什么是HTML5?

HTML5制定了Web应用开发的一系列标准，是第一个将web作为应用开发平台的HTML语言；它定义了新语义标签，新的多媒体标签，新的javascipt api比如地理定位，重力感应。

4.2 新增语义和结构元素

4.2.1 新增标签：

section: 表示文档或应用程序的通用部分
aritcle: 表示文档，页面，应用程序或站点中的完整或独立的组成
header: 页眉，展示介绍性内容/辅助导航的实用元素
footer: 页脚
nav: 提供导航链接
aside: 定义了一个部分，与main元素相关，但不属于主流，比如广告
time: 该元素用于以机器可读格式显示日期和时间

4.2.2 解决ie9下的不兼容的问题

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

4.3 新表单元素

新增表单类型：包括time/date/time日期时间组件, color拾色器, range滑动条, url只能输入url格式, email校验是否是邮箱， tel手机号码， number只能输入数字
新增表单元素：datalist自动补充下拉框，keygen自动生成密钥公钥，meter度量器
新增属性：placeholder提示文字，autofocus自动获得焦点，form指定表单项属于哪个表单，pattern自定义正则，required必填等

4.4 图像

4.4.1 canvas

canvas是什么？
canvas定义位图画布，可以用于动态绘制图形
脚本绘画

var canvas = document.getElementById("canvas"); //获取元素
var cxt = canvas.getContext("2d");//创建context对象
/*画矩形*/
cxt.fillStyle="#FF0000";  //设置填充颜色
cxt.strokeStyle="#00FF00";//设置边框颜色
cxt.fillRect(0,0,10,10);//fillRect(x,y,width,height) 填充 设置的是起点x,y以及矩形的长、宽
cxt.strokeRect(0,0,10,10);//画出边框
cxt.clearRect(x,y,width,height)//清除指定区域(包括填充+边框)
/*画直线、n边形等等*/
cxt.beginPath();  //开始路径
cxt.moveTo(100, 100);//移动到某点
cxt.lineTo(200,200);//移动笔触
cxt.closePath();//关闭路径
cxt.stroke();//描边
cxt.fill();//填充
/*画圆*/
cxt.beginPath();
cxt.arc(20,20,5,10,30,true);//（圆心x,圆心y，半径，起始角度，结束角度，是否顺时针画圆）
cxt.closePath();
cxt.fill();
/*写字*/
cxt.font="30px Arial";
cxt.fillText("加油",100,100);
cxt.strokeText("加油",90,90);
/*线性渐变*/
var grd=cxt.createLinearGradient(0,0,200,0);// 创建渐变 (渐变开始节点x,渐变开始节点y,渐变结束节点x, 渐变结束节点y)
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
cxt.fillStyle=grd;// 填充渐变
cxt.fillRect(10,10,150,80);

画图的角度参考下图：比如画整个圆就是起始角0，结束角2*Math.PI
在这里插入图片描述

4.4.1 svg

svg是什么？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，图像在放大或改变尺寸的情况下其图形质量不会有损失，SVG 是万维网联盟的标准
代码（仅介绍如何画圆，其余参考链接）

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
      <circle cx="50" cy="50" r="49" stroke="black" stroke-width="2" fill="red" />
    </svg>

4.4.3 canvas VS svg
两个元素都允许在浏览器中创建图形，但是有很大的不同：

canvas	svg
依赖于分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
适合图像密集的游戏	不适合游戏
弱的文本渲染能力	适合大型渲染区域

4.5 多媒体

4.5.1 视频格式

类型	介绍
AVI	由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式
WMV	indows Media 由微软开发，但是如果未安装额外组件，就无法播放 Windows Media 电影
MPEG	因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持
Mpeg-4 .mp4	是一种针对因特网的新格式
QuickTime .mov	苹果公司开发的,不能在没有安装额外的组件的 Windows 计算机上播放
RealVideo .rm/.ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低

4.5.3 audio音频标签

属性	介绍
autoplay	自动播放
controls	控制条
loop	循环播放
preload	预加载
src	资源url 建议写多个类型的src，来解决兼容性问题 mp3/ogg/wav

4.5.4 video视频标签

属性	介绍
autoplay	自动播放
controls	控制条
loop	循环播放
preload	预加载
src	资源url 建议写多个类型的src，来解决兼容性问题 mp4/ogg/webm

4.5 HTML5 api

4.5.1 可拖拽属性

属性：draggable：true （a超链接和图片的可拖拽是默认开启的）
拖拽元素的监听事件：

事件	介绍
ondragstart	当拖拽开始的时候
ondragend	当拖拽结束的时候
ondreagleave	被拖拽元素完全离开本来的元素的时候
ondrag	整个拖拽的过程中

目标元素的监听事件：

事件	介绍
ondragenter	当有元素进入到目标元素时
ondragleave	当元素离开目标元素时
ondragover
ondrop	在目标元素上松开鼠标时调用

4.5.2 地理位置
geolocation规范提供了一套保护用户隐私的机制，必须得到用户的明确许可才能获得用户的位置信息。

 navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

如果成功会调用successCallback方法，并返回一个包含位置信息的对象position coords坐标

position.coords.latitude纬度
position.coords.longitude经度

如果失败会调用errorCallback方法，并返回一个error对象， error对象里包括message错误信息，code错误码等

4.5.3 全屏

方法：
requestFullscreen() 元素开启全屏显示
document.fullscreen 判断是否全屏
document.webkitCancelFullScreen() 退出全屏
伪类：
.content-left:fullscreen
.content-left:-webkit-full-screen
.content-left:-moz-full-screen
代码：

// 兼容性，兼容webkit，moz内核的浏览器
nav.onclick = function(){
  if(nav.requestFullscreen){
  	nav.requestFullscreen();
  }else if(nav.webkitRequestFullscreen){
  	nav.webkitRequestFullscreen();
  }else if(nav.mozkitRequestFullscreen){
  	nav.mozRequestFullscreen();
  }
}

4.5.4 存储
传统存在cookie，存储在用户本地，存在磁盘里，可以持久化存储一段时间（可以自己设置），但是其存储大小只有4k，解析也相对复杂。HTML5提出了解决的办法：

window.sessionStorage会话存储
1.保存在内存中
2.生命周期在浏览器关闭时数据销毁
3.在同一个窗口下数据可以共享
4.可以存储约5M
5.只能存储字符串
6.api：
window.sessionStorage.setItem(key, value) 插入或更新一个item
window.sessionStorage.getItem(key) 获取存储的内容
window.sessionStorage.removeItem(key) 删除指定内容
window.sessionStorage.clear() 清空所有存储内容
7.代码：

	buttonList[0].onclick = function(){//插入按钮
	  window.sessionStorage.setItem("userName", userName.value);
	  window.sessionStorage.setItem("password", password.value);
	  window.sessionStorage.setItem("age", 18);
	}
	buttonList[1].onclick = function(){//更新按钮
	  window.sessionStorage.setItem("userName", userName.value);//更新
	  window.sessionStorage.setItem("password", password.value);
	}
	buttonList[2].onclick = function(){//获取按钮
	  userName.value = window.sessionStorage.getItem("userName");
	  password.value = window.sessionStorage.getItem("password");
	}
	buttonList[3].onclick = function(){//删除按钮
	  window.sessionStorage.removeItem("age");
	}
	buttonList[4].onclick = function(){//清空按钮
	  window.sessionStorage.clear();
	}

windows.localStorage本地存储
1.有可能在内存，有可能硬盘里
2.永久生效，除非手动删除
3.可以多个窗口共享
4.可以存储约20M
5.只能存储字符串
6.api:
window.localStorage.setItem(key, value) 插入或更新一个item
window.localStorage.getItem(key) 获取存储的内容
window.localStorage.removeItem(key) 删除指定内容
window.localStorage.clear() 清空所有存储内容
7.代码：

	buttonList[0].onclick = function(){
	  window.localStorage.setItem("userName", userName.value);
	  window.localStorage.setItem("password", password.value);
	  window.localStorage.setItem("age", 18);
	}
	buttonList[1].onclick = function(){
	  window.localStorage.setItem("userName", userName.value);
	  window.localStorage.setItem("password", password.value);
	}
	buttonList[2].onclick = function(){
	  userName.value = window.localStorage.getItem("userName");
	  password.value = window.localStorage.getItem("password");
	}
	buttonList[3].onclick = function(){
	  window.localStorage.removeItem("age");
	}
	buttonList[4].onclick = function(){
	  window.localStorage.clear();
	}