html理论基础

最新推荐文章于 2022-05-05 11:03:04 发布

求offer看看我吧

最新推荐文章于 2022-05-05 11:03:04 发布

阅读量357

点赞数

文章标签： html5 html

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

版权

这篇博客详细介绍了HTML的基础知识，包括HTML的定义、元素、属性、颜色和编码。还深入讲解了HTML5的新特性，如新增语义标签、表单元素、图像处理、多媒体支持以及HTML5 API，如地理位置和存储功能。

摘要由CSDN通过智能技术生成

一、 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>
&
```