2021年HTML5完整版(全程无废话直接上重点)

703 阅读12分钟

因从自己的语雀复制过来,若有瑕疵请移步语雀

www.yuque.com/books/share… 《Web前端学习路线|进阶版》

常用的浏览器
ie 火狐 谷歌 safari opera内核Trident ie 360 百度浏览器 gecko 火狐 webkit 苹果 blink chrome opera 一般浏览器用的是 webkit移动端的浏览器内核主要说的是系统内置浏览器的内核。 Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二 次开发。 iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的
Web标准
是有 w3c 制定的一系列标准的集合 w3c 就是万维网联合 为什么需要web标准 浏览器不同,他们显示网页 或排版就有些差异 web标准的构成 结构 网页元素的分类和整理 html 表现 网页元素的板式 颜色 css 行为 网页模型的交互效果 JavaScript web标准提出的最佳方案就是 结构表现 行为相分离介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些?浏览器内核包括两部分,渲染引擎和js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。 IE:Trident fifirefox:Gecko chrom、safari:webkit Opera:Presto Microsoft Edge:EdgeHTML
html标签
最大的标签根标签 head title body <!DOCTYPE html>文档类型声明 告诉 浏览器使用哪种html版本来显示网页 这个就是 html5 html标签 lang = ‘en’ zh-cn 主要是提示翻译 meta标签 charset 属性哪种字符编码 utf-8 万国码 GBK 中文简繁体
sublime生成html骨架小技巧
双击打开软件新建文件(ctrl+n)保存(ctrl+s),保存为:文件名.html ( 注意 后缀名必须是 .html ) 放大缩小代码 ctrl+ 加号 键 和 ctrl + 减号键 或者 按住 ctrl 在 滚动鼠标滚轮生成页面骨架结构html: 5 按下tab键 或者 ! 按下tab键在浏览器中预览页面右键在 浏览器中打开
常用的标签
样式标签

加粗(具有语义化) 加粗

倾斜>

倾斜

删除线

删除线

下划线

下划线 行内元素 可设宽高 默认自身宽高 有行内元素行为 内部包裹inline可以超过父元素

元素的显示模式
块级元素
div ul li h p 独占一行 具备大小 宽度默认是父级元素的100%文字类的元素内 里面不能使用块级元素
行内元素
span a b strong ins del s 一行显示多个宽高无效默认宽度就是他本身内容的宽度行内元素只能容纳文本或行内元素
行内块元素
img input td特点1、一行可以放多个 ,但他们之间会有缝隙2、宽度就是他们本身宽度3、高度 行高 内边距都是可以控制

html5 新增内容

1.拖拽释放(Drag and drop)API 2.语义化内容标签(header nav footer aside article section) 3.音频、视频API(audio video) 4.画布(Canvas)API 5.地理(Geolocation)API 6.本地离线缓存localStorage长期存储数据,浏览器关闭后数据不丢失 7.sessionStorage的数据在浏览器关闭欧自动删除 8.表单控件,input type =calendar、date、time、email、url、search、ip、tel、number color range 9.新技术webworker、websocket、Geolocation 属性选择器 nth-child(n)

HTML标签的语义化

白话: 所谓标签语义化,就是指标签的含义。方便代码的阅读和维护同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容 使用语义化标签会具有更好地搜索引擎优

路径

相对路径以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。路径分类符号说明同一级路径只需输入图像文件的名称即可,如img src="baidu.gif" /。下一级路径“/”图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如img src="images/baidu.gif" /。 上一级路径“../”在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推, 如img src="../baidu.gif" /。 相对路径,是从代码所在的这个文件出发, 去寻找我们的目标文件的,而 我们所说的 上一级 下一级 同一级 简单说,就是 图片 位于 HTML 页面的位置绝对路径绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。“D:\web\img\logo.gif”,或完整的网络地址,例如“www.baidu.com”。注意:绝对路径用的较少,我们理解下就可以了。 但是要注意,它的写法 特别是符号 \ 并不是 相对路径的 /

总结

HTML第一天复习.xmind

锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:1. 使用相应的id名标注跳转目标的位置。 (找目标)

第2集

2. 使用链接文本创建链接文本(被点击的) (拉关系) 我也有一个姓毕的姥爷..

base 标签

语法:

总结:

base 可以设置整体链接的打开状态 base 写到 之间把所有的连接 都默认添加 target="_blank"全体链接~ 到 ~ 全体集合 所有链接 以新窗口打开页面 ~ 是

预格式化文本pre标签

标签可定义预格式化的文本。被包围在
 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。  此例演示如何使用 pre 标签
  对空行和 空格
  进行控制
所谓的预格式化文本就是 ,按照我们预先写好的文字格式来显示页面, 保留空格和换行等。 有了这个标签,里面的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。

特殊字符 (理解)

一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。虽然有很多,但是我们平时用的比较较少, 大家重点记住 空格 大于号 小于号 就可以了,剩下的回来查阅。总结:是以运算符&开头,以分号运算符;结尾。他们不是标签,而是符号。HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体

表格属性

表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。我们经常有个说法,是三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0

合并单元格2种方式

跨行合并:rowspan="合并单元格的个数" 跨列合并:colspan="合并单元格的个数"

合并单元格顺序

合并的顺序我们按照 先上 后下 先左 后右 的顺序 跟我们以前学习汉字的书写顺序完全一致。

合并单元格三步曲

先确定是跨行还是跨列合并根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 : 删除多余的单元格 单元格

总结表格

标签名定义说明

表格标签就是一个四方的盒子表格行标签行标签要再table标签内部才有意义单元格标签单元格标签是个容器级元素,可以放任何东西表头单元格标签它还是一个单元格,但是里面的文字会居中且加粗表格标题标签表格的标题,跟着表格一起走,和表格居中对齐clospan 和 rowspan合并属性用来合并单元格的表格提供了HTML 中定义表格式数据的方法。表格中由行中的单元格组成。表格中没有列元素,列的个数取决于行的单元格个数。表格不要纠结于外观,那是CSS 的作用。表格的学习要求: 能手写表格结构,并且能简单合并单元格。

表格划分结构(了解)

对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构注意::用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签!:用于定义表格的主体。放数据本体 。放表格的脚注之类。以上标签都是放到table标签中。typora-copy-images-to: media

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

名词1

名词1解释1

名词1解释2

...

名词2

名词2解释1

名词2解释2

...

列表总结

标签名定义说明

无序标签里面只能包含li 没有顺序,我们以后布局中最常用的列表

有序标签里面只能包含li 有顺序, 使用情况较少

自定义列表里面有2个兄弟, dt 和 dd

input 控件(重点)

常用属性:

label标签

目标:label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。概念:label 标签为 input 元素定义标注(标签)。作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。如何绑定元素呢?第一种用法就是用label直接包括input表单。

用户名:

适合单个表单选择第二种用法 for 属性规定 label 与哪个表单元素绑定。

当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

textarea控件(文本域)

文本框和文本域区别

表单名称区别默认值显示用于场景input type="text"文本框只能显示一行文本单标签,通过value显示默认值用户名、昵称、密码等textarea文本域可以显示多行文本双标签,默认值写到标签中间留言板

select下拉列表

语法:

选项1

选项2

选项3

...

注意:select 中至少包含一对 option 在option 中定义selected =" selected "时,当前项即为默认选中项。但是我们实际开发会用的比较少

form表单域

常用属性:属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。methodget/post用于设置表单数据的提交方式,其取值为get或post。name名称用于指定表单的名称,以区分同一个页面中的多个表单。注意:每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

SEO优化

1、logo盒子里面首先放一个h1标签2、h1里面放链接,把logo的背景图片给链接3、为了搜索引擎收录,链接里面要放文字,但是文字不要漏出来 font-size=04、最后给链接一个title属性,鼠标放上去就可以看到文字了

什么是重绘?

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。

什么是回流?

当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)

区别:

回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变

过程:

不是修改完立马执行这个过程浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

如何减少重绘和回流

使用transform替代top使用visibility替换display:none,因为前者只会引起重绘,后者会引发回流(改变了布局)避免使用table布局,可能很小的一个改动会造成整个table的重新布局尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围。避免设置多层内联样式,css选择符从右往左匹配查找,避免节点层级过多。将动画效果应用到position属性为absolute或者fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流。同时,控制动画速度可以选择requestAnimationFrame。避免使用css表达式,可能会引发回流