1、HTML概述
HyperText Markup Language ，超文本标记语言，描述网页的一种语言，不是编程语言，而是一种标记语言， 狭义上 H5 是它最新版本，广义上 H5 是一个技术集合 包含 html5，css3，js
HTML类似房子的水泥墙
CSS类似房子的白粉墙壁与瓷地砖
JS类似房子的门，提供功能
2、HTML语法
2.1、基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
在
vscode中输入!回车会自动生成html基本结构
2.2、语法规范
-
html中不区分大小写，推荐使用小写 -
html标签可嵌套，但不能交叉嵌套，需要闭合的标签要闭合
推荐规范
1、推荐class命名放前面，id、name放后面
2、尽可能少的使用无语义的标签div和span
3、在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利
4、不要用纯样式标签，如：b、font、u等，改用css设置
5、需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用css指定就不用他们）
6、使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td7、表单需要
fieldset包起来，并用legend说明表单用途8、每个
input都需要使用label对应说明
3、基本标签
3.1、标题标签 h
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
3.2、段落标签 p
<p>这是一个段落</p>
3.3、链接标签 a
用于打开链接网页，href = #id 可以跳转该 id 元素的锚点位置
<a href="https://www.baidu.com">打开百度，你就知道！</a>
属性 download，告诉浏览器下载的 URL，而不是导航到它，提示用户将其下载到本地，并且可以命名文件
<a href="index.html" download="fileName">Download me :)</a>
a标签的target属性可以规定如何打开这个链接，仅在href属性存在时使用
_blank内容在新页面显示_parent在父窗体中打开链接，在窗口与顶级框架中，等同于_self_self内容在当前页面显示_top在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架framename填入的是一个frame的名字，内容在对应窗口显示
3.4、图像标签 img
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
alt给浏览器看的，当图片失效alt里的文字会展示
tittle给人看的，鼠标移到图片上tittle里的文字会展示
3.5、矢量图标签 svg
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
抱歉，您的浏览器不支持嵌入式 SVG。
</svg>
3.6、列表标签 ul ol dl
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
type属性有3个值：disc实心小圆点circle心小圆点square实心小方块
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
type属性值：type=“1”(默认)数字排序type=“A”字母排序type="|"罗马字符排序
start表示从几开始
描述列表
<dl>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
</dl>
3.7、分组标签 div span
<div>具体内容</div>
<span>具体内容</span>
3.8、框架标签 iframe
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>
原先的
frame与frameset已经遗弃，这是H5新标签
3.9、头部标签 head
head 标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
| 内部标签 | 说明 |
|---|---|
| title | 网页的标题，它显示在浏览器窗口的标题栏或状态栏上 |
| meta | 定义网页的基本信息（供搜索引擎） |
| style | 定义CSS样式 |
| link | 链接外部CSS文件或脚本文件 |
| script | 脚本语言 |
| base | 定义页面所有链接的基础定位（用得很少） |
4、语义化标签
HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
4.1、语义化的优点
-
在没
CSS样式的情况下，页面整体也会呈现很好的结构效果 -
提升用户体验 例如
title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。 -
有利于搜索引擎优化（
SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 -
便于团队开发和维护，语义化使得代码更具有可读性，让其他开发人员更加理解你的
html结构，减少差异化。
4.2、常见语义化标签
| 标签 | 描述 |
|---|---|
| < header> | 包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 |
| < footer> | 定义文档或节的页脚。 |
| < main> | 规定文档的主内容。 |
| < section> | 定义文档的节，一个区块，一般是一组相似内容的排列组合。 |
| < article> | 定义文档的文章。 |
| < aside> | 定义页面内容以外的内容。 |
| < nav> | 定义导航链接。 |
| < figure> | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| < figcaption> | 定义 <figure> 元素的标题。 |
| < details> | 定义用户能够查看或隐藏的额外细节。 |
| < summary> | 定义 <details> 元素的可见标题。 |
| < time> | 定义日期/时间。 |
基本形式
而下图这种图片加图注的形式，最好使用 figure 和 figcaption
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
5、表单标签
常见标签
| 标签 | 描述 |
|---|---|
| < form> | 定义供用户输入的表单。 |
| < input> | 定义输入域。 |
| < label> | 定义了 <input> 元素的标签，一般为输入标题。 |
| < textarea> | 定义文本域 (一个多行的输入控件)。 |
| < fieldset> | 定义了一组相关的表单元素，并使用外框包含起来。 |
| < legend> | 定义了 <fieldset> 元素的标题。 |
| < select> | 定义了下拉选项列表。 |
| < optgroup> | 定义选项组。 |
| < option> | 定义下拉列表中的选项。 |
| < button> | 定义一个点击按钮。 |
| < datalist> | 指定一个预先定义的输入控件选项列表。 |
| < output> | 定义一个计算结果。 |
5.1、基本表单 form input label
<form action="" method="get">
<p>
<label for="username">账户：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
autocomplete 浏览器基于之前键入过的值，应该显示出在字段中填写的选项
<input type="search" autocomplete="on" name="content" />
表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库如 validator.js
<input type="text" name="username" pattern="[A-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
需要注意的是
form里的button不给type也会默认是submit，点击会提交表单刷新页面
点击label会自动聚焦for的值，也就是该name命名的的input
禁用表单加上readonly或disabled
5.2、文本域 textarea
<form action="" method="post">
<textarea name="mycontext" cols="20" rows="5"></textarea>
<input type="submit">
</form>
5.3、下拉框 select fieldset legend
<form action="" method="post">
<fieldset>
<legend>请选择你的爱好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="音乐">
<option value="唱">唱</option>
<option value="跳">跳</option>
</optgroup>
<optgroup label="运动">
<option value="篮球">篮球</option>
<option value="rap">rap</option>
</optgroup>
</select>
</fieldset>
</form>
添加 multiple 属性后的 select，实现类似效果
<select name="car" id="car" multiple>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</select>
5.4、选择输入框 datalist
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5.5、单选框 radio
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
5.6、复选框 checkbox
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
5.7、日期选择 date
日期 date ，周 week ，月 month，时间 time ，datetime-local，step 是间隔，max 最大值，min 最小值
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
5.8、文件上传 file
| 属性 | 描述 |
|---|---|
| accept | 允许上传类型.png,.psd 或 image/png,image/gif |
| multiple | 支持多选 |
<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
5.9、 其他
input的type的其他属性
| input的type属性值 | 描述 | 效果 |
|---|---|---|
| emal | 限制输入必须为email，可以添加 multiple 输入多个用（,）隔开 |  |
| password | 限制为密文 |  |
| url | 限制必须输入地址 |  |
| number | 限制必须输入数字 |  |
| tel | 限制必须输入电话 | 这种写法在电脑版网页中不会使用，因为这个type是为触屏网页开发服务的。在触屏端点击type为tel的输入框时，跳出的虚拟键盘为电话键盘（1-9、*、#） |
| search | 搜索框 |  |
| color | 颜色选择器 |  |
| range | 滑块选择器 |  |
input的属性
| 属性 | 描述 |
|---|---|
| autofocus | 页面打开自动聚焦 |
| disabled | 规定输入字段应该被禁用 |
| max | 规定输入字段的最大值 |
| maxlength | 规定输入字段的最大字符数 |
| min | 规定输入字段的最小值 |
| pattern | 规定通过其检查输入值的正则表达式 |
| readonly | 规定输入字段为只读（无法修改） |
| required | 规定输入字段是必需的（必需填写） |
| placaholder | 输入提示 |
| size | 规定输入字段的宽度（以字符计） |
| step | 规定输入字段的合法数字间隔 |
| value | 规定输入字段的默认值 |
form的属性
| 属性 | 描述 |
|---|---|
| action | 提交地址 |
| target | 提交表单后，服务器相应数据在何处显示，默认值是_self，当前窗口，值_blank新窗口 |
| method | 提交表单时使用的HTTP，有get和post两种，默认值是get。 |
| autocomplete | 开启表单自动补全，浏览器根据之前用户输入的值自动补全。默认是开启的，可选值值有on(开)、off(关) |
| novalidate | 默认是进行表单验证的，如果设置，则表示不进行表单验证 |
get与post的区别：
get表单数据以键值对的方式追加到URL中，URL的长度受到限制（2048个字符） ，用于提交非敏感数据
post表单数据不会追加到URL，回附加到HTTP请求的正文中，没有限制，可提交敏感数据（如密码）
6、表格与多媒体
6.1、表格 table
简单表格
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
完整表格
<table border="1">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
| 标签 | 解释 | 标签 | 解释 |
|---|---|---|---|
| table | 表格 | thead | 表头 |
| tr | 行 | tbody | 表身 |
| td | 单元格 | tfoot | 表尾 |
| caption | 标题 |
不要认为
th与td一样就舍弃，当ctrl+p打印页面时，长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上，一般表头是数据名，表尾是总计之类的
6.3、合并表格行与列 colspan rowspan
行合并
<table border="1">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">卷心菜yst</td>
</tr>
</tbody>
</table>
列合并
<table border="1">
<thead>
<tr>
<th >th1</th>
<th >th2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">卷心菜yst</td>
<td>单元格1</td>
</tr>
<tr>
<td>单元格2</td>
</tr>
</tbody>
</table>
6.3、视频 video
<video poster="https://vcp.baidu.com/f02e77cb8b65c75de53c16b7f77a0ead.png" src="https://fc-transvideo.baidu.com/f02e77cb8b65c75de53c16b7f77a0ead_1280_720.mp4" width="200px" controls loop muted>
//video没有src时使用，如果不能播放，换下一个，提高兼容性
<source src="xxx.mp4" type="audio/mp4">
<source src="xx.ogg" type="audio/ogg">
</video>
| 属性 | 解释 |
|---|---|
| autoplay | 就绪后自动播放 |
| preload | 页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性，视频观看度低可以设置为 preload=“none” 不加载视频数据减少带宽。如果设置为 preload="metadata"值将加载视频尺寸或关键针数据，目的也是减少带宽占用 |
| controls | 显示控件 |
| loop | 循环播放 |
| muted | 规定视频的音频输出应该被静音 |
| src | 播放的视频的 URL |
| poster | 视频下载时显示的图像，或者在用户点击播放按钮前显示封面图像 |
6.4、音频 audio
<audio controls autoplay loop preload="auto">
<source src="xxx.ogg" type="audio/ogg">
<source src="xxx.mp3" type="audio/mp3">
</audio>
音频基本属性比视频少了 poster ， width ， height
6.5、画布 canvas
这两篇文章配合着看 强烈推荐canvas看这一篇就够了 和 另一篇canvas
一些常用的 canvas库
其中的 fabric.js很重要
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//绘制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html>
WebGL
用于3d，其中最广泛的是 three.js
WebGL学习
webgl可以看成opengl的javaScript 的适应版本。opengl则是可以直接调用计算机GPU算力的一个3d api。canvas是在浏览器上的2d画布，只是通过webgl转译光栅后再canvas上显示出来
7、其他标签
7.1、水平线 hr
<hr/>
7.2、换行 软换行 br wbr
wbr br标签的区别：br 标签表示此处必须换行；wbr表示浏览器窗口或父级标签足弓宽时（没必要换行时），不换行，而宽度不够时主动在此处换行
<br/>
7.3、缩写 abbr
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
7.4、预文本 pre
原样显示文本内容包括空白、换行等。
<pre> 卷心菜-------
--------yst
</pre>
7.5、斜体 粗体 i b
斜体文本
粗体文本
<i>斜体文本</i>
<b>粗体文本</b>
7.6、强调与更强调 em strong
强调与更强调
<em>强调</em>和<strong>更强调</strong>
但是事实上
i与em效果都是斜体，strong与b都是加粗，区别是i与b是物理上的变化，没有强调语义，二em与strong是有语义的
7.7、标记 mark
用于突出显示文本内容，类似我们生活中使用的马克笔
我会的语言是 JAVA`、 JavaScript 、 C
我会的语言是 <mark>JAVA</mark>、<mark>JavaScript</mark>、<mark>C</mark>
7.8、下标 sub
用于数字的下标内容
二氧化碳的化学式为 CO 2
二氧化碳的化学式为 CO<sub> 2 </sub>
7.9、上标 sup
用于数字的上标内容
3 2 =9
请计算3<sup>2</sup>平方
7.10、删除与插入 del ins
del 标签表示删除的内容， ins 一般与 del 标签配合使用描述更新与修正。
原价 99 现价 9.9
<p>原价 <del>99</del> 现价<ins>9.9</ins> </p>
7.11、代码 code
用于显示代码块内容，一般需要代码格式化插件完成，例如 CSDN 的代码块。
<code>
var a = 1;
</code>
7.12、长引用与短引用 blockquote q
Here comes a long quotation:<q>short quotation</q>
<blockquote>
This is a long quotation.
</blockquote>
请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
7.13、进度条 progress
用于表示完成任务的进度，当游览器不支持时显示内容。
<progress value="60" max="100">完成60%</progress>
7.14、度量衡 meter
定义度量衡，仅用于已知最大和最小值的度量，比如：磁盘使用情况，查询结果的相关性等
必读 optimum 与 low high的关系
<h1>学生成绩列表</h1>
<p>
小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/>
小明：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/>
小李：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/>
</p>
注意：
<meter>不能作为一个进度条来使用， 进度条<progress>标签
7.15、时间 time
需要给一个机器可识别的时间 ， time 标签的属性有两个， pubdate 和 datetime
pubdate
pubdate 属性指示 time 标签中的日期 / 时间是文档的发布日期，或是最近的父辈 article 标签的发布日期。其属性值为 pubdate
datetime
datetime 属性是规定日期 / 时间的。或者由 time 的内容给定日期 / 时间。属性值可以表示成 2019/10/8 这种形式（或者是 2019-10-8 ），若在这里面书写日期在页面上是看不见的！
<time> 2022-08-12 </time>
目前暂时没发现它特别的用处
表示HTML网页中出现的日期和时间，但是并不是给用户看的，而是给搜索引擎等机器看的。这样搜索引擎等其它程序会更容易更智能的提取这些信息，相比较普通日期表示，用time标签会更快速被搜索引擎抓取。
7.16、地址 address
用于设置联系地址等信息，一般将 address 放在 footer 标签中。
<address>
感谢您提交建议到 2300071698@qq.com
</address>
7.17、注释 ruby
注释（中文注音或字符），在东亚使用，显示的是东亚字符的发音
<rp> 防备那些不支持 <ruby> 的浏览器，主要用来放置括弧。对于支持的浏览器，它的 CSS 样式是 {display:none;}
<rt> 定义字符的解释或发音，对于横向显示的文章，显示在上方，竖向显示则显示到右边
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
8、细节补充知识
8.1、contenteditable
全局属性（对于所有的 HTML 元素都适用），它可以使得 html 的可被用户编辑
当然，如果你想使得整个文档的内容都可以编辑，你可以直接使用
document.designMode = "on"，关闭编辑则使用document.designMode = "off"。如果你想保存整个文档或者某个编辑内容，可以直接通过DOM操作完成。
8.2、translate
全局属性告诉浏览器指定的内容是否应该被翻译
比如：你想阻止谷歌自动翻译你公司名称或者品牌名称
<footer><p translate="no">LearnPine</p></footer>
8.3、details
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
目前，只有
Chrome和Safari 6支持details标签
8.4、spellcheck
全局属性主要针对于 input 和 textarea 或可编辑元素，对用户输入的文本内容进行拼写和语法检查。spellcheck 属性有两个值：true（默认值）和 false
<h3>输入框语法检测</h3>
<p>spellcheck属性值为true<br/>
<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck属性值为false<br/>
<textarea spellcheck="false">html5</textarea>
</p>
检查效果是像
word文档一样出现红色波浪下划线，但我没有试出效果
8.5、output
<output> 标签作为计算结果输出显示(比如执行脚本的输出)。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
8.5、cite
作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
注释：人名不属于作品的标题。
<p>也许愈是美丽就愈是脆弱，就像盛夏的泡沫</p>
——明晓溪<cite>《泡沫之夏》</cite>
8.6、动态修改元素的样式 classList
- 增
添加新的类名，如已经存在，取消添加
classList.add( newClassName )；
- 删
移除已经存在的类名;
classList.remove( oldClassName )；
- 改
类名替换
classList.replace( oldClassName，newClassName )；
- 查
确定元素中是否包含指定的类名，返回值为true、false
classList.contains( oldClassName );
- 切换
如果classList中存在给定的值，删除它，否则，添加它；
classList.toggle( className )；
9、全局属性
全局属性是可与所有 html 元素一起使用的属性，黑色加粗重点关注
| 属性 | 描述 |
|---|---|
| accesskey | 元素获取焦点的快捷键 |
| class | 规定元素的一个或多个类名（引用样式表中的类） |
| contenteditable | 规定元素内容是否可编辑 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。注意：目前的主流浏览器都不支持 contextmenu 属性 |
| data-* | 用于存储页面或应用程序的私有定制数据 |
| dir | 规定元素中内容的文本方向 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。注意：没有主流浏览器支持 dropzone 属性 |
| hidden | 隐藏 |
| id | 规定元素的唯一 id |
| lang | 规定元素内容的语言 |
| spellcheck | 规定是否对元素进行拼写和语法检查 |
| style | 规定元素的行内 CSS 样式 |
| tabindex | 规定元素的 tab 键次序 |
| title | 规定有关元素的额外信息。 |
| translate | 规定是否应该翻译元素内容 |
10、事件
请至少阅读 1 次该所有的事件 api ，有个印象，需要使用时可以及时想起
W3C事件大全
学习网站
后期可能需要深入学习
svg canvas，目前处于知识盲区，无法独立绘制
8905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
