目录
5.WEB存储【localStorage 和 sessionStorage 】
一、HTML简介
行业介绍:全栈(即覆盖前端又覆盖后端)>WEB前端≈HTML5=H5(编写网页)
H5:在互联网环境里面看到的所有界面展示和操作都是H5。
WEB【网页】组成:结构html、表现css、行为js。
网页【浏览器是网页的载体】为什么叫HTML【超文本标记语言】?
普及:W3C万维网联盟【制定规则】
OpenSSL:全世界80%以上的网络通信都使用了它提供的加密工具来保障信息的安全。
(1)代码编写工具
代码缩进:出现嵌套结构就需要使用它;使用键盘上的Tab键进行缩进。
代码构成:<!DOCTYPE html>----这句声明是告诉浏览器,使用H5标准,只有定义文档类型的作用。 <head>.......</head>:网页的头部 <body>.......</body>:网页的主体
<!-- 这是一个注释 -->
标题标签:<h1>...</h1>标题大小总共123456【6最小】
段落标签<p>.....</p>:,文字独占一行
换行 单标签<br>
水平线 <hr> 属性有一个noshade===取消阴影
VSCODE设置滚动条:文件-》首选项-》搜索框 搜索 wrap ->控制折行的方式 换成on
普及: title可以是网页标题标签但不是内容标题,没有h7这个标签
(2)路径
../------返回上一级目录 思路:超链接标记包含文字与图片,设置相对路径与绝对路径
绝对路径:任何情况下,都能找得到的地址。
相对路径:必须知道当前所在,才能找到定位目标
(3)标签的嵌套
超链接不能嵌套超链接、P标签不能嵌套P标签、标题标签h1~h6也不能互相嵌套
(4)快捷键整理
ctrl+鼠标滚轮,放大代码 ctrl+R 快速预览
alt+Q 可以隐藏左边的项目栏 全选 ctrl+A;
crtl+shift+R:复制当前行到下一行 ctrl+/ 快速/取消注释
Ctrl + Shift + T 重新打开刚关闭的页面 Ctrl + Alt + R重新加载
Ctrl + Backspace 删除前一个单词 Shift + Alt + 向下箭头, 重复复制行,
Ctrl + X删除一行 Windows+shift+S截图
放大ctrl++ 缩小ctrl+- 查找元素ctrl+F 段落快速注释 alt+w
(5)特殊符号
<左尖角号 >右尖角号
空格 占据宽度是一个中文宽度
版权©C
商标® R &tradeTM
1.[文本格式化]
2.[表格Table]--记忆:C列R行
1.表格属性
宽度width 高度height 边框border 边框颜色bordercolor 背景颜色bgcolor
水平对齐align=”center/right/left” cellspacing=单元格与单元格之间的距离
<th>=加粗并水平居中的<td> cellpadding= 单元格与内容之间的距离
Colspan=”7”-----列的合并(7列合并为一个)
Rowspan=”4”-----行的合并(4行合并为一个)
<colgroup span=”6” width=”100px”>==6个<col width=”100px”>
2.行tr属性
高度height 背景颜色bgcolor 水平对齐align=”center/right/left” 文字垂直对齐 valign=”top/middle/bottom”
3.单元格td属性:如果一个单元格设置宽度/高度,影响的是这一整列的宽度/高度
宽度width 高度height 背景颜色bgcolor 水平对齐align=”center/right/left” 文字垂直对齐 valign=”top/middle/bottom”
3.[图片Images]
<img loading="lazy" src="URL" alt="替换文本" height="42" width="42">
【px:像素单位、100%:撑满整个窗口】
<img src=”地址”title=”鼠标划上去时的提示 alt=”图片加载失败后的文字”>
普及:切图?用PS打开、选择【切片工具】、切图、Ctrl+alt+Shift+s、选择用户切片
4.[链接Links]
<a href=”超链接地址” title="鼠标悬停时的提示信息 " target=”在何处打开文档”>.......</a>
普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签: <a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>
普及:【target="-self"默认值 target="-blank"新窗口打开 】
5.[列表]---记忆:无U有O
(1)无序列表
<ul> <li>项目</li> <li>项目</li> </ul>
<ul type=”disc”>实心圆、<ul type=”circle”>空心圆、<ul type=”square”>实方块
普及:默认的是黑色的实心圆,其中属性中none用的多
(2)有序列表
<ol> <li>第一项</li> <li>第二项</li> </ol>
<ol type=”1”>数字排序、<ol type=”A” start="2">字母排序、<ol type=”I”>罗马数据排序
普及:数字是自动生成的,start的取值只能是一个数字
(3)自定义列表
<dl><dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
6.[表单Forms]
(1)<form action=”http://www.~.cn”>即form必须有action 属性,表示提交地址
(2)所有需要提交的数据,input必须有name属性
(3)input按钮的文字,使用value属性表示
(4)input必须放在form标签内才能提交;<table>...</table>放<form>...</form>中
(5)type=”text”:文本输入框、password:密码输入框、button:普通按钮、submit:提交按钮、reset:重置按钮、file:文件选择框、radio:单选框、checkbox:复选框、placeholder提示信息。
(6)input是表单控件(即表单元素),tr是表格的行,td是表格的列 , 默认值 value。
普及:【get和post请求方式的区别】
(1)get请求表示获取数据,post请求表示提交数据。
(2)get请求发送的数据都写在地址栏上,用户可见,而post请求发送的数据用户不可见。
(3)ger请求不能提交大量数据,但post可以,不建议混用。
二.HTML5新增
1.H5新增语义化标签
- header:表示页面中一个内容区块或整个页面的标题(头)
- footer:表示页面中一个内容的区块或整个页面的脚注(脚、尾)
- nav:表示导航链接部分(导航)
- section:用来表示页面中的一个区块,(划分版块用的)
- main:表示页面中的主要内容区域(ie不兼容)
- article:表示一块与上下文无关的独立的内容(文章、偏向于写内容块)
- aside:在article之外的,与article内容相关的辅助信息。(侧边栏)
- figure:表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)和dl、dd有点类似,可以做图文混排效果。
- hgroup:标题的一个分组
- mark:定义高亮显示的文本
- time:(兼容性不是很好)
- dialog:定义一个对话框(目前只有chrome和Safari6支持)
- embed:定义外部的可交互的内容或插件、比如flash
2.多媒体标签
- video【视频】:
- src:视频路径
- controls:显示视频控件、比如播放、暂停等按钮
- autoplay:自动播放。Autoplay+muted可实现自动播放
- loop:重复播放
- muted:静音播放
- autoplay和muted冲突,需要静音之后才能自动播放
- poster:视频正在下载时的图像,直到点击播放按钮为止。
- audio【音频】:属性同上
- source标签:(source媒介元素,video和audio就是媒介资源)
- 允许可替换的视频、音频。提供给浏览器进行媒体类型的选择
- type属性值:
- 视频的:video/ogg video/mp4 video/webm
- 音频的:audio/ogg audio/mpeg4(mp4) audio/wav/mp3
- 注意:object-fit:cover可以让视频覆盖整个父容器
- type属性值:
3.增强表单
(1)input
<form>和<input>更多属性见:HTML5 表单属性 | 菜鸟教程
(2)新增表单属性
- required:必填,如果为空则不能提交
- min:最小===用在number上
- max:最大===用在number上
- step:步数,步长===用在number上
- list:必须结合datalist标签,绑定datalist id名称【作用:可以做智能提示】
- autocomplete:是否自动提示信息【on---开启//off---关闭】【要结合name属性和提交按钮一起才能看到效果】
- placeholder:文本框提示信息
- autofocus:自动聚焦,一个页面只能有一个
- pattern:属性值是正则表达式
- novalidate:取消验证===加载form上
- multiple:上传多个
(3)新增标签
- output:输出框
- datalist【数据列表】
4.Canvas和SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
5.WEB存储【localStorage 和 sessionStorage 】
客户端存储数据的两个对象为:
- localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。