有关HTML知识点汇总总结

一、VScode常用快捷键列表

代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up或Alt+Down
快速复制一行代码：Shift+Alt+Up或Shift+Alt+Down
快速保存：Ctrl+S
快速查找：Ctrl+F
快速替换：Ctrl+H

二、HTML系列总结

1、什么是HTML？

HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言：Hyper Text Markup Language
HTNL不是一种汇编语言，而是一种标记语言
标记语言是一套标记标签（markup tag）
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面，网页

2、什么是标签

HTML标记标签通常被称为HTML标签（HTML tag）
HTML标签是由尖括号包围的关键词，比如<html>
HTML标签通常是成对出现的，比如<b>和</b>
标签对中的第一个标签是开始标签，第二个是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML元素

3、网页的基本结构

<!DOCTYPE html>声明为HTML5文档
<html>元素是HTML页面的根元素
<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>元素描述了文档的标题
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中默认的标题
显示在搜索引擎结果页面的标题
<body>元素包含了可见的页面内容，网页的主体内容部分

三、HTML头部

1、HTML <meta>

meta标签描述了一些基本的元数据。
<meta>标签提供了元数据，元数据也不显示在页面上，但会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务。
定义关键词：<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
定义描述：<meta name="description" content="">
定义作者：<meta name="author" content="">
定时刷新页面：<meta http-equiv="refresh" content="30">
定义网页的编码格式：<meta charset="utf-8">

2、HTML <title>

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中默认的标题
显示在搜索引擎结果页面的标题

3、HTML <link>

<link>标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表。rel：定义当前文档与被链接文档的关系，type：定义被链接文档的类型，href：定义被链接文档的地址。
引入外部CSS文件：<link rel="stylesheet" type="text/css" href="mystyle.css">
定义标题的图标：<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

4、HTML<style>

添加内部样式表

5、HTML<base>

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
<base ref="www.baidu.com" target="">

6、HTML<script>

<script>标签用于加载脚本文件

7、HTML<noscript>

<noscript>元素用来定义在脚本未执行时的替代内容（文本）。此标签可被用于识别<script>标签但是无法支持其中的脚本的浏览器

四、HTML属性

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

五、HTML路径

1、相对路径

相对于文档的路径
./ 当前目录
../ 返回上级目录
/ 下级目录

2、绝对路径

固定不变的路径

六、HTML标签

1、标签分类

行标签
行内块标签——img,input,button,select,textarea,iframe
行内（内联）标签——b,i,u,strong,em,ins,del,s,small,big,span,sup,sub,a
一行可以出现多个，前后元素不会自动换行
块标签
自己独占一行，前后元素自动换行——h1-h6,p,div,ul,ol,li,dl,dt,dd,table,tr,caption,thead,tbody,tfoot,form.br,hr
单标签
空标签/自闭合标签——<br/><hr/><meta/><input/><img/><col/>

2、HTML的标题标签

h1-h6，字体默认加粗，h1-h6，字体逐级减小
h1理论上一个页面中只出现一次，h2经量少用，h3可以多用

3、HTML段落标签

<p> paragraph——p标签不可以嵌套p标签
<span> 文本标签 可以单独给部分元素设置样式

4、HTML的文本格式化标签

<b> 定义粗体文本
<em> 表现为斜体字，定义着重文字，强调
<i> 定义斜体字
<small> 定义小号字
<strong> 表现为字体加粗，定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<s> 定义横线

5、HTML"计算机输出标签"

<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本，原样输出

6、HTML引文，引用，标签定义

<addr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用，引证
<dfn> 定义一个定义项目

7、HTML图片标签

<img> 标签定义HTML图像、图片
属性
src：定义显示图片的地址
alt：文本替换当图片无法无法加载显示的替代文字
title：鼠标移入到元素时，右下角提示的文本
width：定义图像的宽
height：定义图像的高
graggable：定义图像是否可以拖拽，默认false

8、HTML链接标签

<a> 标签定义网页中的链接
属性
href：定义链接目标的URL地址
target：定义目标打开的位置（在哪个窗口打开链接）
_blank：新窗口打开
_parent：在父窗口中打开链接
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前整个窗体（框架页）。
frame_name：在指定的框架中打开
name/id 定义锚的名称——跳转到网页指定位置
download 指定下载的链接
默认样式
默认有下划线，鼠标移入指针小手
未访问的链接字体蓝色
已访问的链接字体紫色
点击链接字体红色

9、HTML列表标签

1、有序列表

ol 定义有序列表 ordered list
li 定义列表项 list item
属性
type 定义列表类型 1 A a I i
start 指定列表编号的起始值只针对于type="1"
reversed 倒序

2、无序列表

ul 定义无序列表 unordered list
ol 定义列表项
属性
type 定义无序列表的类型 disc cricle square

10、列表的嵌套

11、自定义列表

常用于图文列表

dl 定义自定义列表 definition list
dt 定义自定义标题 definition title
dd 定义自定义描述 definition description

七、HTML的表格

table 定义HTML表格
align 定义表格的水平对齐方式 left right center
bordor 定义表格的边框
cellspacing 定义单元格之间的间距
cellpadding 定义单元格与内容之间的间距
width 定义表格的宽
bgcolor 定义表格的背景色
tr 定义表格的行 table row
align 定义行中内容的水平对齐方式 left right center
valign 定义行内容的垂直对齐方式 top middle bottom baseline
bgcolor 定义行的背景色
td 定义表格的单元格 table datacell
align 定义单元格内容水平对齐方式 left right center
valign 定义单元格内容的垂直对齐方式 top middle bottom baseline
bgcolor 定义单元格的背景色
width 定义单元格的宽
colspan 跨列合并向右合并
rowspan 跨行合并向下合并
th 定义表格的表头
thead 定义表格的页眉
tfoot 定义表格的页脚
tbody 定义表格的主体默认生成
caption 定义表格的标题
align 定义标题的对齐方式 (left right在火狐浏览器) top bottom
colgroup 定义表格的列的分组
align 定义列内容水平对齐的方式 left right center
valign 定义列内容的垂直对齐方式 top middle bottom baseline
bgcolor 定义列的背景色
col 定义列的属性
span 定义跨的列数

八、HTML表单

form 定义供用户输入的菜单
name 定义表单的名称
action定义表单提交的地址
input 定义输入域
type 定义input元素的类型
text 默认。定义一个单行的文本字段（默认宽度为20个字符）
password 定义密码字段（字段中的字符会被遮蔽）
radio 定义单项按钮
checkbox 定义复选框
button 定义可点击的按钮（通常与JavaScript一起使用来启动脚本）
submit 定义提交按钮
reset 定义重置按钮（重置所有表单值为默认值）
image 定义图像作为提交按钮
file 定义文件选择字段和“浏览...”按钮，供文件上传
hidden 定义隐藏输入字段
name 属性规定<input>元素的名称
checked 属性规定在页面加载时应该被预先选定的<input>元素。（只针对type="checkbox"或者type="radio"）
disabled 属性规定应该禁用的<input>元素
readonly 属性规定输入字段是只读的
size 属性规定以字符数计的<input>元素的可见宽度
value 指定<input>元素的value的值
width 属性规定<input>元素的宽度。（只针对type="image"）
height 规定<input>元素的高度。（只针对type="image"）
src 属性规定显示为提交按钮的图像的URL。（只针对type="image"）
alt 定义图像输入的替代文本。（只针对type="image）
autofocus 属性规定当页面加载时<input>元素应该自动获得焦点
placeholder 属性规定可描述输入<input>字段预期值的简短的提示信息
textarea 定义文本域/多行文本框
autofocus 规定当页面加载时，文本区域自动获得焦点
cols 规定文本区域内可见的高度
rows 规定文本区域内可见的行数
name 规定文本区域的名称
placeholder 规定一个简短的提示，描述文本区域期望的输入值
readonly 规定文本区域为只读
disabled 规定禁用文本区域
select 定义下拉选项列表
name 定义下拉列表的名称
disabled 当该属性为true时，会禁用下拉列表
size 规定下拉列表中可见选项的数目
multiple 当该属性为true时，可选多个选项
autofocus 规定在页面加载时下拉列表自动获得焦点
option 定义下拉列表中的选项
disabled 规定此选项应在首次加载时被禁用
selected 规定选项（在首次显示在列表时）表先为选中状态
value 定义送往服务器的选项值
optgroup 定义选项组
disabled 规定禁用该选项组
label 为选项组规定描述/标题
button 定义一个点击按钮
name 规定按钮的名称
disabled 规定应该禁用该按钮
type 规定按钮的类型。button reset submit（默认）
value 规定当页面加载时按钮应当自动地获得焦点
fieldset 定义一组相关的表单元素，用框包起来
disabled 规定该组中的相关表单应该被禁用。
name 规定fieldset的名称
legend 定义<fieldset>元素的标题
id 定义名称
input 标签中使用list绑定id的值
datalist 指定一个预先定义的输入控件选项列表

九、HTML框架

<iframe> 定义一个内联的frame 在一个浏览器窗口显示不止一个页面
frameborder 规定是否显示<iframe>周围的边框
src 规定在<iframe>中显示的文档的URL
width 规定<iframe>的宽度
height 规定<iframe>的高度
name 规定<iframe>的名称