HTML知识点学习笔记
2022-10-13 10:36:59 0 举报AI智能生成
HTML知识点学习笔记
作者其他创作
大纲/内容
video
audio
aside
base
input
type
body
子主题
map
area
textarea
h1/2/3/4/5/6
html标题
从大到小
</h1/2/3>结束
p
一个段落
</p>结束
morquee
table
th
tr
col列定义
colgroup列分组
span合并几列
command（定义命令按钮，仅IE支持）
ember嵌入
br换行
可以插入段落里
hr换行并划线
id定义元素唯一
id=""只能一个，多个无效
abbr/acronym
小写/大写
简写，移至表达完整
<abbr title="etcetera">etc.</abbr>
引文，引用，标签定义
abbr
定义缩写
The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
address
定义地址
分支主题
blockquote
定义长的引用
<blockquote cite="">
q
定义短的引用语
cite
定义引用，引证，作品的标题
引用的文体，以斜体表示
dfn
定义一个定义项目
短语标签
dfn
定义一个定义项目
strong
定义重要的文本。
em
强调的文本
code
定义计算机代码文本
samp
定义样本文本
kbd
定义键盘文本
var
标签表示变量的名称，或者由用户提供的值。
code
标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
pre
定义预格式化的文本
区块
块级元素
div
定义文档的区域，块级
实例：<h1><p><ul><table>
内联元素
实例<b><td><a><img>
span
用来组合文档中的行内元素
table
元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
如何使用 style 属性制作一个没有下划线的链接
<a href="http://www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a>
正常表示有下划线
<a href="http://www.runoob.com">访问 runoob.com!</a>
边框
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
link rel
使用了外部样式文件来格式化文本
<link rel="stylesheet" type="text/css" href=“./文件.css”>
通过样式文件 styles.css 渲染后显示的。
这句话的意思就是在html文件里边引入了一个css的外部样式链接，type说的是类型是css，href说的是链接的地址，这个css文件叫做style，在css这个文件夹里边
<link rel="值”>
alternate
链接到该文档的替代版本（比如打印页、翻译或镜像）。
author
链接到该文档的作者。
help
链接到帮助文档。
使用了外部样式文件来格式化文本
通过样式文件 styles.css 渲染后显示的。
<link rel="stylesheet" type="text/css" href="../../styles.css">
子主题
icon
导入表示该文档的图标。
license
链接到该文档的版权信息
next
表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档
prefetch
规定应该对目标资源进行缓存。
prev
表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档
search
链接到针对文档的搜索工具。
stylesheet
要导入的样式表的 URL
子主题
自由主题
自由主题
自由主题
布局
div
id
定义唯一元素
container容器
menu菜单
content内容
footer页脚
style
table
属性
draggable
dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。
accesskey 规定访问元素的键盘快捷键<br>class 规定元素的类名（用于规定样式表中的类）。<br>contenteditable 规定是否允许用户编辑内容。<br>contextmenu 规定元素的上下文菜单。<br>dir 规定元素中内容的文本方向。<br>draggable 规定是否允许用户拖动元素。<br>dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。<br>hidden 规定该元素是无关的。被隐藏的元素不会显示。<br>id 规定元素的唯一 ID。<br>lang 规定元素中内容的语言代码。<br>spellcheck 规定是否必须对元素进行拼写或语法检查。<br>style 规定元素的行内样式。<br>tabindex 规定元素的 tab 键控制次序。<br>title 规定有关元素的额外信息。
存储
manifest
cache缓存
network不缓存
浏览器
渲染过程
构建dom树
依据css构建render
构建布局数据（位置和几何形状）
Http状态码
1**
请求发送中
2**请求成功
3**请求重定向
4**客户端错误
5**服务端错误
网页安全
XSS攻击
CSRF
性能优化
子主题1、使用css sprites，可以有效的减少http请求数 2、使用缓存 3、压缩js，css文件，减小文件体积 4、使用cdn，减小服务器负担 5、懒加载图片 6、预加载css，js文件 7、避免dom结构的深层次嵌套 8、给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流<br><br>
同一域名同时加载资源有个数限制
解析
DOCTYPE：声明文档类型，未声明会使浏览器使用兼容模式去解析
兼容模式：使用老式浏览器进行渲染，会出现宽度等计算问题
标准模式：让html和js使用最高标准去执行
内核
主流内核
谷歌依靠工具闪光，火狐壁虎都是动物，三叉戟插住大部分浏览器，欧鹏迅速退出
presto迅速
opera12.17之前
trident三叉戟(又称MSHTML)
IE及国内各浏览器
gecko壁虎
Firefox火狐，Netscape
webkit网页工具
blink闪光
chrome谷歌，safari旅行，opera12.17之后
内核
js引擎
渲染引擎
Html5
新增表单标签语义化定位网络存储
ECMAScript6
兼容
渐进加强
优雅降级
元素类型
块级元素：每个元素占一行
div、form、h1/2/3/4/5、ul、li、
行级元素：不换行
除块级元素
CSS
css
透明
0.1_1
scss
a
链接
href
网址
<a href=“http：//www”文字>
<a href="url">链接文本</a>
href=“”几种用法
Js的几种调用方法
href="#"
href=“URL"
"#c4"=查看章节
在当前页面链接到指定位置
<a id=
target="_top"
跳出框架
<a href="http://www.runoob.com/" target="_top">点击这里!</a>
电子邮件链接
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
img
图像
img src=文件来源哪里
html文件跟*.jpg文件（D盘）不同目录
img src=“file：///D：/*.jpg”
图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下
img src="../image/*.jpg/"
width
宽度
height
高度
class
属性样式的名称class=“”
引号里面可以填多个class属性
style
规定元素xi
hr
水平线=分隔线
文体格式化
b/strong
加粗文本
i/em
斜体文本
sub
下标
sup
上标
big
文本字体放大
small
文本字体缩小
pre
对空行和空格进行控制
标记删除文本/插入文本
del
ins
ins
插入字
bdo
改变文字方向
<p><bdo dir="rtl"/ltr>示。</bdo></p>
p
块引入=实现长短不一的引用语
分支主题
计算机文字输出
code
计算机输出
kdd
键盘输入
tt
打字机文本
samp
计算机代码样本
var
计算机变量
子主题
头部/head元素
title
文档的标题
base
页面链接标签的默认链接地址
meta
HTML文档中的元数据
link
一个文档和外部资源之间的关系
通常用于链接到样式表
script
客户端的脚本文件
style
HTML文档的样式文件
样式实例/style
字体
font-family
字体颜色
color
字体大小
font-size
文字对齐/居中对齐
text-align：center
图像
alt
图片名称
如果无法显示图像，浏览器将显示替代文本，就像这样，显示图片名称
src
<img src="url" alt="some_text">
URL 指存储图像的位置<br>
高度
heightr
宽度
width
map
定义图像地图
area
定义图像地图中的可点击区域
coords坐标
shape指点区域的形态
<area shape="default|rect|circle|poly">
default
规定全部区域
rect
定义矩形区域
circ/circle
定义圆形
poly
定义多边形区域
map name
图像映射的名称。
href
表示文件图片
style="float”=属性
border
边框
不用单位
表格
table
tr
每个表格均有若干行
th
表格的表头/居中的文本（粗体）
td
每行被分割为若干单元格
border边框
border=0 表格没有边框
caption
定义表格标题
colgroup
表格列的组
col
定义用于表格列的属性
thead
表格的页眉
tbody
表格的主体
tfoot
表格的页脚
单元格
跨行
<th colspan="2">行的名称</th>
跨列
<th rowspan="2">列的名称:</th>
有单元格边距
cellpadding=“”
单元格间距
cellspacing
无序列表
ul
li
列表
type
属性/a/A/I/i
有序列表
ol
li
start="数字"
规定有序列表的开始点
type
属性
无序列表
ul
li
style=“list-style-type：”
disc
圆点
circle
圆圈
square
正方形
子主题
li
定义列表项
dl
定义列表
dt
自定义列表项目
dd
定义自定列表项的描述
嵌套列表
type
分支主题
header
footer
nav
0 条评论
下一页
