前端修仙路之炼气期【HTML篇】-CSDN博客

本文链接：https://blog.csdn.net/m0_53497173/article/details/126283602

炼气期讲究的是稳、平、牢，不然会影响后面的筑基、结丹、元婴、化神，天灵根的除外；
下面就由我这个伪灵根的小菜鸡来讲一下炼气（HTML）吧。更多请访问: 老陈笔记

HTML简介

HTML，全称Hyper Text Markup Language（超文本标记语言）。HTML是一门描述性语言。

语法：

<标签符>内容</标签符>

标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加上了一个斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。

HTML 结构

HTML的基本结构，一般一个页面是由4个部分组成的。

（1）文档声明：<!DOCTYPE html>

（2）html标签对：<html></html>

（3）head标签对：<head></head>

（4）body标签对：<body></body>

基本标签

1、title标签；在HTML中，title标签唯一的作用就是定义网页的标题。

2、meta标签；meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。
meta标签有两个重要的属性：name和http-equiv。

name取值有keywords（网页关键字）、description（网页描述）、author和copyright（版权信息）。
http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>

3、style标签；用于定义元素的CSS样式

4、script标签；用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。

5、link标签用于引入外部样式文件（CSS文件）。

内容标签

1、标题标签：h1、h2、h3、h4、h5、h6。

2、段落标签<p></p>。

3、换行标签<br/>。

4、文本标签

粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：small

5、hr标签；来实现一条水平线，是horizon（水平线）的缩写。语法：<hr/>。

6、div标签；块级标签，通常用来划分HTML结构，从而配合CSS来整体控制某一块的样式。

7、常见自闭合标签：<meta/>|<link/>|<br/>|<hr/>|<img/>|<input/> 。

–tips:在HTML中，根据元素的表现形式，可以分为三类。

块元素（block）；通常也称块级标签，独占一行，可设宽高。
行内元素（inline）；可以与其他行内元素位于同一行，宽高由内容决定，不可设宽高。
行内块元素（inline-block）；可以与其他行内元素位于同一行，可设宽高。

元素之间可通过diplay:block来转换，详细请看css篇

列表

1、有序列表ol；语法：
<ol><li>列表项</li></ol>

ol可设type属性值有：

阿拉伯数字：1、2、3……
a 小写英文字母：a、b、c……
A 大写英文字母：A、B、C……
i 小写罗马数字：i、ii、iii……
I 大写罗马数字：I、II、III……

例子：

        <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
        </ol>

2、无序列表ul；无序列表的列表项符号是●，不过可以通过type属性来改变其样式，语法和有序的一样。

ul可设type属性值有：

disc 实心圆●（默认值）
circle 空心圆○
square 正方形■

例子：

    <ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ul>

3、定义列表dl；dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。
语法: <dl>标记</dl> 。

例子：

    <dl>
        <dt>HTML</dt>
        <dd>结构</dd>
        <dt>JavaScript</dt>
        <dd>行为</dd>
    </dl>

表格

表格一般会由以下3个部分组成。

语法：

<table>
<caption>表格标题</caption>
<tr><td>单元格1</td><td>单元格2</td></tr>
</table>

图片

图片img标签，只需要掌握它的3个属性：src、alt和title。

语法：

<img src="" alt="" title="" />

超链接

超链接a标签：

语法：

 <a href="链接地址" target="打开方式"></a>

target属性有：

_self 默认值，在原来窗口打开链接
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开超链接

–tips：超链接还可以做锚点内部链接

例子：

 <a href="#内容中的id">锚点链接</a><br />

HTML5全局属性

1、新属性

属性	描述
contenteditable	规定是否可编辑元素的内容
contextmenu	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data - *	用于存储页面的自定义数据
draggable	指定某个元素是否可以拖动
dropzone	指定是否将数据复制，移动，或链接，或删除
hidden	hidden 属性规定对元素进行隐藏
spellcheck	检测元素是否拼写错误
translate	指定是否一个元素的值在页面载入时是否需要翻译
例子：

  <img draggable="true">

2、新增的窗口事件属性

属性	说明
onafterprint	在打印文档之后运行脚本
onbeforeprint	在文档打印之前运行脚本
onbeforeonload	在文档加载之前运行
onblur (old)	当窗口失去焦点时运行脚本
onerror	当错误发生时运行脚本
onfocus(old)	当窗口获得焦点时运行脚本
onhashchange	当文档改变时运行脚本
onload (old)	当文档加载时运行脚本
onmessage	当触发消息时运行脚本
onoffline	当文档离线时运行脚本
ononline	当文档上线时运行脚本
onpagehide	当窗口隐藏时运行脚本
onpageshow	当窗口可见时运行脚本
onpopstate	当窗口历史记录改变时运行脚
onredo	当文档执行再执行操作（redo）时运行脚本
onresize	当调整窗口大小时运行脚本
onstorage	当 Web Storage 区域更新时（存数据发生变化时）运行脚本
onundo	当文档执行撤销时运行脚本
onunload	当用户离开文档时运行脚本

3、表单事件(适用于所有 HTML 元素, 但该HTML元素需在form表单内):

属性	说明
onblur	当元素失去焦点时运行脚本
onchange	当元素改变时运行脚本
oncontextmenu(New)	当触发上下文菜单时运行脚本
onfocus	当元素获得焦点时运行脚本
onformchange(New)	当表单改变时运行脚本
onforminput(New)	当表单获得用户输入时运行脚本
oninput(New)	当元素获得用户输入时运行脚本
oninvalid(New)	当元素无效时运行脚本
onreset	当表单重置时运行脚本
onselect	当选取元素时运行脚本
onsubmit	当提交表单时运行脚本

4、键盘事件

属性	说明
onkeydown	当按下按键时运行脚本
onkeypress	当按下并松开按键时运行脚本
onkeyup	当松开按键时运行脚本

5、鼠标事件

属性	说明
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
ondrag(New)	当拖动元素时运行脚本
ondragend(New)	当拖动操作结束时运行脚本
ondragenter(New)	当元素被拖动至有效的拖放目标时运行脚本
ondragleave(New)	当元素离开有效拖放目标时运行脚本
ondragover(New)	当元素被拖动至有效拖放目标上方时运行脚本
ondragstart(New)	当拖动操作开始时运行脚本
ondrop(New)	当被拖动元素正在被拖放时运行脚本
onmousedown	当按下鼠标按钮时运行脚本
onmousemove	当鼠标指针移动时运行脚本
onmouseout	当鼠标指针移出元素时运行脚本
onmouseover	当鼠标指针移至元素之上时运行脚本
onmouseup	当松开鼠标按钮时运行脚本
onmousewheel(New)	当转动鼠标滚轮时运行脚本
onscroll(New)	当滚动元素的滚动条时运行脚本

6、新增多媒体事件

通过视频（videos），图像（images）或者音频（audio）触发该事件，多应用于 HTML 媒体元素

比如: <audio>, <embed>, <img>, <object>和<video> 。

属性	说明
onabort(old)	当发生中止事件时运行脚本
oncanplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange	当媒介长度改变时运行脚本
onemptied	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended	当媒介已抵达结尾时运行脚本
onerror	当在元素加载期间发生错误时运行脚本
onloadeddata	当加载媒介数据时运行脚本
onloadedmetadata	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart	当浏览器开始加载媒介数据时运行脚本
onpause	当媒介数据暂停时运行脚本
onplay	当媒介数据将要开始播放时运行脚本
onplaying	当媒介数据已开始播放时运行脚本
onprogress	当浏览器正在取媒介数据时运行脚本
onratechange	当媒介数据的播放速率改变时运行脚本
onreadystatechange	当就绪状态（ready-state）改变时运行脚本
onseeked	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate	当媒介改变其播放位置时运行脚本
onvolumechange	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting	当媒介已停止播放但打算继续播放时运行脚本

canvas标签

用于绘制图像。canvas元素本身并没有绘制能力（它仅仅是图形的容器）您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

1、颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影与形状的水平距离
shadowOffsetY	设置或返回阴影与形状的垂直距离
2、方法

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置
3、线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度
4、矩形

方法	描述
rect()	创建矩形
fillRect()	绘制"被填充"的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素
5、路径

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

6、转换

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

7、文本

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线
fillText()	在画布上绘制"被填充的"文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

8、其他

方法	描述
drawImage()	向画布上绘制图像、画布或视频
save()	保存当前环境的状态
restore()	返回之前保存过的路径状态和属

例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

新多媒体元素

标签	描述
audio	定义音频内容
video	定义视频（video 或者 movie）
source	定义多媒体资源 video 和 audio
embed	定义嵌入的内容，比如插件
track	为诸如 video 和 audio 元素之类的媒介规定外部文本轨道

新的语义和结构元素

标签	说明
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
bdi	允许您设置一段文本，使其脱离其父元素的文本方向设置
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）
figcaption	定义 figure 元素的标题
footer	定义 section 或 document 的页脚
header	定义了文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡。仅用于已知最大和最小值的度量
nav	定义导航链接的部分
progress	定义任何类型的任务的进度
ruby	定义 ruby 注释（中文注音或字符）
rt	定义字符（中文注音或字符）的解释或发音
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符