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