本文详细介绍了HTML的基础知识，包括HTML标签的语法、元素类型、属性以及HTML5的新特性。HTML5引入了语义化标签如<header>、<footer>，增强了表单输入类型，提供了<audio>、<video>多媒体支持，以及WebStorage、WebWorkers等新功能。此外，还讲解了字符集、DOCTYPE声明和命名空间等概念。
HTML超文本标记语言。用于定义一个网页结构的基本技术。
1、基本语法
HTML标签
说明：写给浏览器的语法格式
语法格式：
- 标签名必须书写在
<>里面 - 标签分为单标签和双标签
- 双标签必须包含开始标签和结束标签，结束标签内需要书写关闭符号
</标签名>。单标签也需要自关闭。
H5中单标签可以不写关闭符号，但是为了代码规范最好写上
HTML元素
说明：从开始标签到结束标签的所有内容
HTML元素内容：
- HTML元素包含开始标签，元素内容，结束标签。
- 元素内容可以是纯文本，也可以是其他元素。
- 元素内容包含其他元素的情况被称之为嵌套。嵌套关系可以有多层。
- 单标签不能添加元素内容，称为空元素。
- 双标签根据存放的内容不同，可划分为两个级别：
- 容器级：标签内部可以存放任意内容，包含容器级标签。例如div，h1等
- 文本级：标签内部只能存放文本或类似文本的内容。例如p,img，input等
- HTML元素特性：元素对空格，换行和缩进等形成空白的字符不敏感。浏览器识别的是元素的开始和结束以及嵌套关系，标签内外的空白字符对浏览器的加载没有任何影响。文字元素内容如果有连续的空白字符，会被压缩成一个空格显示，即空白折叠。
鉴于标签特点的建议：
- 代码书写过程中，同级标签之间换行对其书写，嵌套标签缩进书写，增强代码可读性。
- 上传代码需要减少代码体积，可以压缩不必要的空白，提升网页的加载速度
- 页面需要显示连续的空格可以用  实现。
- 页面需要换行可以用
</br>实现。 - 缩进效果可以用CSS语法实现。
HTML属性
说明：标签添加属性可以提供关于元素的更多信息
标签属性的语法规范
- 书写位置：写在开始标签或单标签内，和标签名之间用空格隔开，多个属性之间用空格隔开。
- 属性和属性值用键值对的方式写：
key="value"。 - 部分标签属性可以有多个属性值，值之间用空格隔开。
HTML基本结构
HTML中的四个标签组成了网页的基本骨架结构：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html>
- html标签：定义HTML文档的根元素，所有标签都要写在html标签内。
- head标签：存放内部用于对网页的设置标签，除了title标签内的元素内容，其他都不会显示在页面。title是head内必须设置的标签
- title标签：让网页拥有一个标题，title标签内的元素内容会显示在搜索结果的标题部分，会作为浏览器收藏夹默认的网页标题；title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
- body标签：定于网页主体部分，存放所有的HTML显示内容的标签，body内部元素会显示在浏览器窗口。
zauisJ
HTML网页的一些设置
- DTD：HTML文档的第一行叫做文档定义类型。英文Doc Type Definition。告知浏览器该网页使用哪种版本的HTML规范。
- H5版本的DTD声明为：
<!DOCTYPE html>
- 命名空间：属性
xmlns可以在文档中定义一个或多个可供选择的XML命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。- 如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的
<html>标签中至少使用一个 xmlns 属性，以指定整个文档所使用的主要命名空间。 - 在xhtml中允许使用不同的dtd文件，不同的dtd文件可能包含相同的标识，这样会出现标志冲突问题，使用xmlns的话就可以区分开在不同文件相同的标识。例如在a.dtd和b.dtd中都包含了table,但是如果一个xhtml中同时包含了这两个dtd文件，且使用了table标签，这样就会出现标志冲突问题，为了解决这个问题，就可以使用xmlns。
- XML可扩展标记语言，是一种简单的数据存储语言，使用在传输过程中的规范，被设计用来传输和存储数据，时HTML的补充。
- 如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的
- 字符集：
<head>标签内的<meta>标签的http-equiv属性定义了当前网页所使用的字符编码。<meta>标签声明的字库必须和编辑器软件默认字库相同，否则会出现字库不匹配，浏览器加载乱码的情况。
中文常用的字符集包括：- UTF-8：国际通用字库，涵盖所有人类的语言文字，1个汉字为3个字节。适用于制作外文网站或对网页加载速度没有要求的情况下。
- gb2312：国标字库，收录汉字6763个，还有包括拉丁字母、希腊字母、日本平假名以及片假名字母，俄语西里尔字母在内的682个。
- gbk：国标字库，gb2312的扩展字库，增加了繁体字。收录汉字21003个，图形符号883个，1个汉字为2个字节。适用于含有大量中文汉字或要求网页加载速度快的情况下。
2、HTML标签
HTML标签类型分为3类：块级标签，行级(内联)标签，内联块状标签
块级标签
块级标签标签独占一行，可指定宽高。
特性：
- 可识别宽高
- 可自动换行
- 多个块元素标签在一起默认从上至下排列
- margin和padding上下左右均有效
margin：0 auto可使其居中对齐
常用块元素：<div> <p> <h1~h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
行内标签
宽高由内容决定，内容超过HTML宽度时会换行。
特性：
- 宽高无法设置
- 不可自动换行
- margin仅左右有效果、padding上下左右均有效、
box-sizing: border-box对其无效
常用行级(内联)元素：<a> <span> <i> <em> <strong> <lable> <q> <var> <cite> <code>
内联块级标签
同时具备内联元素和块状元素的特点
特性：
- 可以宽高设置
- 不可自动换行
- 多个内联块状元素标签在一起默认从左至右排列、水平排列
- 内联块状元素之间默认会有一个空格的间隙因为元素之间在HTML中书写有回车，浏览器会解析成空格、
text-align: center相对父盒子居中有效，但margin：0 auto无效
常用内联块状元素：<img> <input>
HTML标签类型转换
- HTML标签类型可以转换：
display:inline;——转换为行级(内联)元素display:inline-block;——转换为内联块状元素display:block;——转换为块级元素
3、HTML属性
HTML属性是对标签的一种描述方式。标签属性分通用属性、自有属性和自定义属性。
-
通用属性：:所有标签都具有的属性（
<br />标签除外）
通用属性有：<id> <class> <style> <title> -
自有属性：某些标签才有的属性
-
自定义属性：:通常用于传值或者图片懒加载
4、HTML5特性
HTML5是为了适应移动互联网时代产生的。HTML5语法主要是DOCTYPE（DOCTYPE声明方法：）和指定字符编码(对mate元素追加charset属性指定编码：) 和 html4有所区别
语义化标签
通过语义化标签，让页面有更加完善的结构，让页面元素有含义；有利于被搜索引擎解析，有利于SEO(搜索引擎优化)。
- 主要语义化标签有：
| 标签 | 描述 |
|---|---|
header | 表示文档头部区域 |
footer | 表示文档尾部区域 |
nav | 表示文档导航栏区域 |
section | 表示文档的某一节/段落 |
article | 表示网页独立文章内容区域 |
aside | 表示文档的主要内容区域 |
detailes | 表示网页某部分细节区域 |
summary | 表示网页detailes内容区域的标题区域 |
dialog | 表示网页对话框、提示框区域 |
增强型表单输入类型
- 新增input表单的类型，通过typle属性可以指定表单类型，指定后输入格式会有对应的限制。
| 表单类型 | 描述 |
|---|---|
email | 表示输入类型必须为邮箱类型 |
url | 表示输入类型必须为网址类型 |
date | 表示输入类型必须为日期类型 |
time | 表示输入类型必须为时间类型 |
number | 表示输入类型必须为数值类型 |
tel | 表示输入类型必须为数值类型 |
color | 表示输入类型必须数值类型 |
week | 表示输入类型必须为数值类型 |
month | 表示输入类型必须为数值类型 |
range | 表示输入类型必须为数值类型 |
- 新增input表单的属性
| 属性 | 描述 |
|---|---|
required: ture | 必填属性 |
placeholder:'提示文本' | 显示提示文本 |
autofocus | 自动聚焦 |
pattern | 正则验证内容 |
multiple | 可选多个值（）上传文件 |
image标签的width，height | img元素宽高可调节 |
autocomplete on/off | 是否展示历史输入 |
min/max | 设置元素最大值最小值 |
多媒体标签
HTML5 提供了播放音频、视频文件的标准，使用 <audio>、<video> 元素，元素内允许使用多个 <source> 元素。<source> 元素可以链接不同类型的文件，浏览器将使用第一个支持的文件。
- 相关属性
| 属性 | 描述 |
|---|---|
autoplay | 自动播放，该属性默认值为true |
controls | 播放控件 |
mute | 静音播放 |
loop | 循环播放 |
poster | 预加载图片 |
Canvas画布
通过 <canvas> 元素来绘制画布， width 和 height 属性定义的画布的大小，需要指定一个id属性 (脚本中经常引用)，默认情况下<canvas>元素没有边框和内容。
<canvas> 元素本身没有绘图能力，绘制工作必须在 JavaScript 内部完成。
-
通过
<canvas>元素来绘制宽200高100的画布：
<canvas id="myCanvas" width="200" height="100"></canvas> -
JS拿到
<canvas>元素：
var c=document.getElementById("myCanvas"); -
创建 context 对象，
2d是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法：
var ctx=c.getContext("2d"); -
fillStyle属性可以填充画布，属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillStyle="#FF0000"; -
illRect(x,y,width,height) 方法定义了矩形当前的填充方式。
ctx.fillRect(0,0,150,75);
以上步骤可以得到一个红色的矩形
Canvas 元素属性：
- Canvas 坐标：canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)
- Canvas 路径：在Canvas上画线，我们将使用moveTo(x,y) 定义线条开始坐标，lineTo(x,y) 定义线条结束坐标。
- Canvas 文本：使用 canvas 绘制文本，font - 定义字体大小和字体，使用fillText(text,x,y) 在 canvas 上绘制实心的文本，使用strokeText(text,x,y) 在 canvas 上绘制空心的文本。
- Canvas 渐变：渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法 - 指定颜色停止 ，参数使用坐标来描述，可以是0至1.
设置fillStyle或strokeStyle的值为 渐变，
使用 createLinearGradient()绘制形状，如矩形，文本，或一条线。
SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像可通过文本编辑器来创建和修改
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 图像可在任何的分辨率下被高质量地打印
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 是万维网联盟的标准
Web Storage
早些时候本地存储使用的是cookies。cookie只有4kb大小，它是一种纯文本文件每次发起http请求都会携带cookie，而且cookies有安全问题，如果cookie被拦截了，那就可获得session的所有信息，只要转发cookie就能达到目的。
使用HTML5可以在本地存储用户的浏览数据。LocalStorage和SessionStorage都是HTML5提出的存储方案。大小一般为5MB，可以存储更多信息。均受到同源策略的限制。
- SessionStorage 主要用于临时保存同一窗口的数据，刷新不会删除，，但是页面关闭或者窗口关闭，SessionStorage就会被清除。
- LocalStorage 主要用于长期保存数据，可以在同一浏览器不同窗口使用，永久存储，除非手动删除，不然不会清除。
- HTML5还提供了相应的操作webStorage 的 API：
| API | 描述 |
|---|---|
setItem(key,value) | 保存数据 |
getItem(key) | 读取数据 |
removeItem(key) | 删除单个数据 |
clear() | 清除所有数据 |
key(index) | 获取某个索引的key |
Web Workers
Web Worker通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行，worker线程运行结束之后会把结果返回给主线程，worker线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说JS具备了多线程的能力，而是浏览器作为宿主环境提供了一个JS多线程运行的环境。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
- 在创建 web worker 之前，请检测用户的浏览器是否支持它：
if(typeof(Worker) !== "undefined") {
//执行代码
}
else {
console.log("抱歉，你的浏览器不支持 Web Workers...");
}
- 在一个外部 JavaScript 中创建我们的 web worker。我们创建了计数脚本，存储于 “demo_workers.js” 文件中：下面的代码检测是否存在 worker，如果不存在，它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
- 然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器：
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
- 当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：
w.terminate();
Web Socket
关于websocket协议，主要需要记住的就是websocket和HTTP的区别。
- 相同点：HTTP和Websocket都是基于TCP的应用层协议。
- 不同点：websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。
- 联系：websocket建立握手时需要基于HTTP进行传输，建立连接之后呢便不再需要HTTP协议了。
地理定位
使用getCurrentPosition()方法来获取用户的位置，从而实现队地理位置的定位。
拖放API
通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。
扫一扫
1656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
