HTML及新增

野槐

已于 2022-05-02 16:58:26 修改

阅读量638

点赞数

分类专栏：前端 H5 文章标签： html5

于 2022-03-25 23:27:10 首次发布

本文链接：https://blog.csdn.net/qq_44930306/article/details/123583931

版权

前端同时被 2 个专栏收录

45 篇文章 5 订阅

订阅专栏

6 篇文章 1 订阅

订阅专栏

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）特殊符号

<左尖角号 >右尖角号

 空格&emsp;占据宽度是一个中文宽度

版权©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]

【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【视频】：
1. src：视频路径
2. controls：显示视频控件、比如播放、暂停等按钮
3. autoplay：自动播放。Autoplay+muted可实现自动播放
4. loop：重复播放
5. muted：静音播放
6. autoplay和muted冲突，需要静音之后才能自动播放
7. poster：视频正在下载时的图像，直到点击播放按钮为止。
audio【音频】：属性同上
source标签：（source媒介元素，video和audio就是媒介资源）

允许可替换的视频、音频。提供给浏览器进行媒体类型的选择
1. type属性值：
  1. 视频的：video/ogg video/mp4 video/webm
  2. 音频的：audio/ogg audio/mpeg4(mp4) audio/wav/mp3
2. 注意：object-fit：cover可以让视频覆盖整个父容器

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 - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

野槐

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML及新增

目录一、HTML简介（1）代码编写工具（2）路径（3）标签的嵌套（4）快捷键整理（5）特殊符号 1.[文本格式化]2.[表格Table]--记忆：C列R行3.[图片Images]4.[链接Links]5.[列表]---记忆：无U有O (1)无序列表（2）有序列表（3）自定义列表6.[表单Forms]一、HTML简介行业介绍：全栈(即覆盖前端又覆盖后端）>WEB前端≈HTML5=H5（编写网页）H5：在互联网环境...
复制链接

扫一扫