HTML学习笔记
1. 注释
- <!– 注释内容 –>
- 快捷键：
单行注释：ctr + /
多行注释：ctr + shift + /
2. 基本结构
<!DOCTYPE html> <!-- !DOCTYPE为文档类型声明标签，声明网页为 HTMl5 --> <html> <head> <!-- <head lang="en">中lang是语言的意思，en是英文，zh-CN为中文，fr为法文。但是页面显示是均为中文，可以在进行翻译时选择对应的语言 --> <meta charset="UTF-8" > <!-- charset为字符集，一般使用UTF-8,也被称为"万国码",用来防止网站乱码 --> <title></title> </head> <body>网页内容</body> </html>
ps：<meta>：只可放在<head>中，属性还有<meta name=”keywords”(告诉搜索引擎网页的关键字，一般与content联用)，content=”web前端” >
3. 字体样式
（1）<strong>加粗推荐使用</strong>
<b>加粗</b>
（2）<small>小号字</small>
（3）<em>斜体推荐使用</em>
<i>斜体</i>
（4）<u>下划线</u>
（5）<del>删除线推荐使用</del>：删除线推荐使用
<s>中划线，即下划线</s>
（6）a<sup>2</sup>：上标，结果为 a2
（7）a<sub>2</sub>：下标，结果为 a2
（8）<tt>等宽</tt>
（9）说明文字，下例中的”2020″会显示在”被说明”文字的上方：
<ruby>
被说明
<rt>2020</rt>
</ruby>
4. 图片标签
<img src="图片路径" />
属性：
（1）src：引入图片；
（2）width、height：设置宽、高。单位有 px、百分比等；
（3）alt：加载失败时的提示信息；
（4）title：鼠标经过时的提示信息；
（5）border：设置边框。
注意：图片标签为单标签，必须有src。支持jpg、gif、png、bmp四种格式
5. 超链接
<a href="链接路径">链接文字</a>
属性：
（1）herf（路径）：① ./ 为当前目录 ② ../ 为上级目录 ③ ../ 为上上级目录 // 依次类推
（2）target（新窗口位置）：① _black （在新的窗口打开链接） ② _self （在本窗口打开链接）
（3）title（鼠标经过时显示的内容）
（4）锚点（在同一页面跳转到不同位置）
① 方法1：使用 id 属性定位
<a href="#life">生活</a> <h5 id="life">生活</h5>
② 方法2：使用 a 标签的 name 属性
<a href="life">生活</a> <h5><a name="life">生活</a></h5>
注意：
（1）超链接标签必须有href，不跳转时跳转路径可写”javascript:;”
（2）本地链接必须加后缀（如 web.html）
（3）该标签虽为行内元素但是可嵌套
6. 常用标签
1）水平分割线：<hr />
属性：
（1）align（水平对齐方式）：center、left、right
（2）width（宽度）
（3）size（高度）
（4）color（颜色）
2）换行：<br />
3）标题：h1-h6
4）段落：p
5）无语义标签：span
6）代码块：div
7）预格式化（原样显示文字）：pre
8）段落缩进5个字符：blockquote
9）地址（斜体显示）：address
7. 块级元素和行内元素
块级元素：h1-h6、p、hr、div、ol、li、table 等
行内元素：a、em、span、img、input、button、select 等
区别：
（1）块级元素各站一行，行内元素会依次在一行内显示；
（2）块级元素可以嵌套块级元素和行内元素等，行内元素只能嵌套行内元素和文字内容；
（3）块级元素可以设置宽高、margin、padding，行内元素不可以设置宽高、margin的上下、padding的上下；
8. 列表
(1)无序列表 <ul type=" "> <li></li> <li></li> </ul> (2)有序列表 <ol type=" "> <li></li> <li></li> </ol> (3)自定义列表 <dl> <dt></dt> <dd></dd> </dl>
- 无序列表 type 值
- disc（小黑点，默认）
- circle（空心圆）
- square（实心正方形）
- none（无）
- 有序列表 type 值
- 1、a、A、i、I 等
- 自定义列表中主义 dd 不是嵌套在 dt 内的
9. 表格
<table> <caption>标题</caption> <tr> <th>表格页眉的单元格</th> </tr> <tr> <td></td> </tr> <tr></tr> </table>
- tr（行）
- td（列）：列必须写在行中
表格属性：
（1）width、height
（2）align（水平位置）
（3）backgroung（背景图片）、bgcolor（背景色）
（4）bordercolor（边框色）、border（边框样式）
（5）cellspacing（表格间的距离）、cellpadding（内容与边界距离）
行列属性：
height、align、valign（垂直对齐：top、middle、bottom）、bgcolor
合并单元格：colspan（跨列）、rowspan（跨行）
10. Iframe（Inner Frame）内联框架
- 创建包含另一个文档的内联框架。body的子集，作普通元素放在body中
- 可将提示文字放在其中，提示某些不支持 iframe 的浏览器
属性：
width、height、name、src、scrolling（滚动条：yes、no、auto）、frameborder（框架周围的边框：1有，0无）
缺点：
-
- 阻塞主页面的onload事件
- 搜索引擎无法解读页面，不利于SEO
- iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能
ps：SEO（搜索引擎优化），利用搜索引擎的规则提高网站在有关搜索引擎内部的自然排名
11. form表单
表单 form和表单元素
<form method="提交方式：get | post" action="跳转地址" enctype="表单内容编码方式" target="返回信息显示方式"> <input type="text" value=" " /> <!-- 文字域，文本框 --> <input type="password" value=" " /> <!-- 密码域 --> <input type="radio" value=" " name=" " checked /> <!-- 单选按钮，几个选项的name属性值要相同才能互相绑定 --> <input type="checkbox" value=" " name=" " checked/> <!-- 复选框 --> <input type="button" value=" " /> <!-- 普通按钮 --> <input type="submit" value=" " /> <!-- 提交按钮 --> <input type="reset" value=" " /> <!-- 重置按钮 --> <input type="image" value=" " /> <!-- 图像域 --> <input type="hidden" value=" " /> <!-- 隐藏域 --> <input type="file" value=" " method="POST" enctype="multipart/form-data"/> <!-- 文件域，enctype设置为二进制传值 --> <textarea rows=" " cols=" " >content</textarea> <!-- 文本域 -->
<select multiple> <!-- 选择框，multiple为多选，不写默认单选 --> <option>选项1</option> <option>选项2</option> </select> </form>
HTML5新增表单元素
<input type="email" value=" " /> <!-- 电子邮箱：必须有@ --> <input type="search" value=" " /> <!-- 搜索：末尾有个X符号清空 --> <input type="url" value=" " /> <!-- URL类型：必须有http --> <input type="color" value=" " /> <!-- 颜色--> <input type="number" max=" " min=" " value=" " /> <!-- 数字 --> <input type="range" max=" " min=" " value=" " /> <!-- 范围 --> <input type="date" value=" " /> <!-- 日期 --> <input type="week" value=" " /> <!-- 周 --> <input type="month" value=" " /> <!-- 月 --> <input type="tel" value=" " /> <!-- 手机号 -->
get和post区别：
（1）get 比 post 更加简单、快速、高效
（2）get 参数在 url 上显示，相对不安全，post不可见
（3）get 有缓存，post 没有
（4）get 有历史记录，post 没有
（5）get 体积小，post 可以无限大
（6）get 只接受ASCII字符的参数数据类型，post 没有限制
（7）get 产生一个数据包，post 产生两个
12. <label></label>标签
- 可以设置不用点击到按钮，点击文字即可选中。一般和 radio 和 checkbox 相互使用
- 只有 for 和 form 属性
<!-- 方法一：利用 id 属性和 fo r属性绑定 --> <label for="male">Male</label> <input type="radio" id="male" /> <!-- 方法二：直接包裹 --> <label> <input type="radio" /> </label>
13. <fieldset></fieldset>标签
通常和legend一起用
<fieldset style="width:300px">
<legend>健康信息</legend>
身高：<input type="text" /><br>
体重：<input type="text" />
</fieldset>
结果如下：
14. HTML5新增属性
- placeholder：默认提示，在框中显示灰色
- multiple：多个值输入，用逗号隔开，一般与邮箱和url使用
- autofocus：自动获取焦点，不用自己点击就会在指定框闪烁
- required：提交表单时防止域为空
- minlength / maxlength：最小/大字符数
- minlength / maxlength：最小/大数字
15. HTML新增元素
-
header：头部
-
nav：导航
-
aside：侧边栏
-
session：节。如章节、页眉、页脚
-
footer：页脚
-
article：内容块。如帖子、文章、评论
-
figure：对元素进行组合，多用于图片与图片的描述组合
<figure> <img src="" alt="未能成功加载" /> <figcaption>光头强</figcaption> </figure>
-
details：描述文档或文档的某个细节
<details> <summary>标题</summary> <p></p> </details>
-
mark：带有标记的文本，给突出的字加黄色背景色
<p>你是<mark>猪</mark>吗</p>
-
meter：定义度量衡
<meter min="" max="" value="" low="" high=""></meter>
值到达low和high两个值之后就会变黄色和绿色
-
progress：进度条
<progress max="" value="" ></progress>
max为完成值，value为当前值
16. <datalist></datalist>
-
与input配合，定义input可能的值，用input的list属性绑定
-
下例中输入”张”会弹出”张三”选项
<input id="myCar" list="cars"> <datalist id="cars"> <option value="张三"></option> <option value="李四"></option> </datalist>
17.video、audio、source、embed
1）video视频属性
-
-
autoplay：在就绪后马上播放
-
controls：向用户显示控件，如播放按钮
-
height、width：播放器的宽高
-
loop：完成播放后再次播放。循环，默认一次
-
muted：静音
-
poster=“url”：视频下载时显示的图像，或点击播放前显示的图像
-
preload：加载，预备播放。autoplay下忽略
-
src=“url”：播放视频的路径
-
视频的格式：MP4，ogg（移动端），webM（高清）
2）audio音乐或其他音频流属性
autoplay、controls、loop、muted、preload、src
3）source
规定可替换的视频/音频浏览器对其类型进行选择
<audio controls> //转换音频格式 <source src="horse.ogg"> <source src="horse.mp3"> </audio>
4）embed
嵌入内容，如插件、声音等，必须有src
<embed src="img/1.mp4">
5）track
track标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
6）audio和video
方法：
①addTextTrack()：向其添加新的文本轨道
②canPlayType()：是否能播放指定的类型
③load()：重新加载视频/音频元素
④play()：开始播放
⑤pause()：暂停播放
事件：
①play() ②playing() ③pause() ④seeked() ⑤seeking() ⑥abort()
18. canvas画布
- canvas提供画布，若想要绘画需要配合js
<canvas id="mycanvas" width="" height="">不支持</canvas>
<script>
var canvas=document.getElementById("mycanvas");
//obj相当于画笔，getContext返回一个对象，现在只能提供2d的绘画环境
var obj=canvas.getContext("2d");
//rect为矩形，浏览器左上角为原点，向下为Y轴正，向右为X轴正，参数为x,y,w,h
obj.rect(0,0,100,100);
//fillStyle修改填充色、渐变或模式
obj.fillStyle="red";
//填充矩形，默认为黑色，参数同上
obj.fillRect=(0,0,100,100);
obj.fillStyle="green";
//画笔的颜色，参数同
obj.strokeRect(100,100,100,100);
//设置阴影
//shadowColor增加阴影，并设置颜色，不偏移则在矩形正下方
obj.shadowColor="rgb(11,25,9)";
//设置X方向的偏移
obj.shadowOffsetX=3;
//设置Y方向的偏移
obj.shadowOffsetY=3;
//模糊阴影的级别，不模糊就是一整块
obj.shadowBlur=5;
//水平渐变
//createLinearGradient水平渐变，（0，0）到（100，0）
var colorobj=obj.createLinearGradient(0,0,100,0);
//0开始，0.5位中间，1为结尾，设置颜色停止位置
colorobj.addColorStop(0,"red");
colorobj.addColorStop(0.5,"green");
colorobj.addColorStop(1,"blue");
obj.fillStyle=colorobj;
//环形渐变
var colorobj2=obj.createLinearGradient(50,50,10,50,50,50);
//其余同上
</script>
19.
-
语义化标签
-
增强型表单
-
视频Video和音频audio
-
Canvas绘图
-
Svg绘图
-
地理定位
-
拖放API
-
Web Worker(为JavaScript创造多线程环境)
-
Web Storage
-
WebSocket