一、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>的名称