一、VS Code
Ctrl + O 打开新的文件
Ctrl + N 新建
Ctrl + C 复制
Ctrl + X 剪切
Ctrl + V 粘贴
Ctrl + W 关闭当前文件
Ctrl + Shift + S 另存为
Ctrl + S 保存
Alt + ↑ 上移当前行
Alt + ↓ 下移当前行
Alt + Shift+鼠标左键 选中多行进行同时编辑
Alt + F4 关闭软件
1.2 快捷键
! | html:5 => tab 快速生成一个html骨架
标签名 => tab 快速创建标签
标签名*数量 => tab 快速创建一定数量的同种标签。
标签名+标签名 => tab 快速创建两个标签
标签名{内容} => tab 快速创建带有内容的标签
标签名{内容$}*数量 => tab 快速创建带有内容序号的标签
标签名>标签名 => tab 快速创建嵌套关系的标签
1.3 常用插件
Auto Close Tag 自动闭合标签插件
Auto Rename Tag 自动重命名标签插件
open in browser 自动开启浏览器插件
文件|文件名 => 右键 => 选择浏览器
Live Server 在服务器下打开html页面(暂时不建议安装)
配置插件
ctrl + ,
file => Prefrences => Settings
1.4 文件拓展名
文本文档 .txt
压缩文件 .zip/.rar
word文件 .doc/.docx
音频文件 .wma/.mp3
excel文件 .xls/.xlsx
网页文件 .html/.htm
ppt文件 .ppt/.pptx
样式文件 .css
视频文件 .wmv/.flv/.mp4/.avi/.mkv
javascript文件 .js
图片文件 .png/. jpg/. gif/. psd/.bmp/.ico
1.5 DOS指令
查看IP地址
右下角小电脑 打开网络和共享中心 => 更改适配器设置 => 本地链接 => 属性 => IpV4地址
DOS查看:
Win + R 打开运行
输入命令cmd 点击确定
ipconfig 点击回车
基本操作:
cd 打开目录 dir 查看目录内容
d: 进入d盘
## 二、HTML 骨架
2.1 DTD
DocType Definition:文档类型定义(DTD),用来定义文档的规范。可以内部声明也可以外部声
明。
- 内部声明:
- 例如:
- 外部声明:
- 例如:
作用:规定了html使用的是哪个版本的html书写规范。
html、css、js规范维护更新的组织W3C组织。
网址:http://www.w3.org/
中文学习网址:http://www.w3school.com.cn/
2.2 DTD版本
html4.01版本,结构和样式做了分离。
Xhtml1.0版本,规范做了拓展升级。
代码必须用小写字母,属性必须用双引号包裹,结束标签必须写关闭符号/等等。
html4.01 和 Xhtml1.0这两个规范分别包含了3个小规范:
- Strict 严格版:不能使用font/b/u/i等废弃标签,不能使用框架集(Framesets)。
- Transitional 过渡版(通用版):可以使用font等废弃标签,不能使用框架集(Framesets)
- Frameset 框架集版:可以使用框架集
严格程度:XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl
html5 不基于 SGML规范,不再区分3个小规范,所以不需要引用 DTD。
<!-- DTD网页说明书(文档定义模型),告诉浏览器该如何显示页面,能使用哪些标签等 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.3 html标签
html标签是双标签,表示我们的整个网页。
html标签有两个属性。
manifest 定义一个 URL,在这个 URL 上描述了文档的缓存信息(html5 新增)。
xmlns HTML 不支持。只有 XHTML 支持。 规定 XML 的 namespace 属性
如:http://www.w3.org/1999/xhtml
注意:在html5 规范中,html标签上的lang属性是全局属性。
xmlns表示命名空间:namespace
因为我们制作的网页给不同的用户来浏览,命名空间规定我们的标签代表的含义,必须将命名空间进
行统一。
2.4 元素,标签与属性
元素:网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,所以说,HTML元素就是构
成HTML文件的基本对象,HTML元素是一个统称。HTML元素就是通过使用HTML标签进行定义的。
标签:标签就是、、
是成对出现的,如
<br >、<img>
等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
注意:元素是实体,标签是名称(标记),后面的课程中,不再强调区分标签和元素。
属性:为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形
式出现,而且属性总是在HTML元素的开始标签中进行定义。
2.5 注释
注释:就是一段用来解释说明的文档,渲染页面的时候会被浏览器忽略,而不会显示在页面中。
语法:
快捷键: ctrl + /
注:在开始标签中有一个惊叹号,但是结束标签中没有。
浏览器不会显示注释,但是能够说明的 HTML 文档。可以利用注释在 HTML 中定义通知和提醒信
息。
2.6 head 标签
<head>
标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指
示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档
的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为
内容显示给读者。
下面这些标签可用在 head 部分:, , ,
<title>
。
base 标签为页面上的所有链接规定默认地址或默认目标。
href:规定页面中所有相对链接的基准 URL。
target:在何处打开页面中所有的链接(_blank,_parent,_self,_top,framename)
title 标签内部放的是网页的名字。
里面的内容可以帮我们提高搜索引擎优化(SEO)。
link 定义文档与外部资源的关系。如:引入外部样式,shortcut icon
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head表示视口外部的内容(网页中看不到的) -->
<!-- 常用标签:base,link,style,script,meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link用来引入与页面相关的文件 -->
<!-- href功能:找到文件资源, ./代表当前目录 (路径) -->
<!-- ref功能:文件与页面的关系 -->
<!-- stylesheet: 样式规则表 -->
<!-- 图标:icon|shortcut icon -->
<!-- <link rel="icon" href="./favicon.ico"> -->
<link rel="shortcut icon" href="./favicon.ico">
<!-- base定义资源从哪里找,页面从哪里打开 -->
<!-- href:定义文件的查找位置 -->
<!-- target:定义页面从哪里打开: _blank表示新标签,_self表示当前页面 -->
<!-- 全局配置 -->
<base href="https://www.baidu.com" target="_blank">
<title>Document</title>
</head>
<!-- 网页主题,视口(显示页面的区域)内部的内容 -->
<body>
<a href="https://www.icketang.com" target="_self">爱创乐育</a>
</body>
</html>
2.7 字符集
字符集:定义了当前文件使用的字库。
中文字库:
UTF-8:国际标准字库。包含了人类所有语言的文字。一个汉字3个字节。
GBK/gb2312:中国字库,国家标准。包含所有的简体中文,大部分繁体,一些特殊符号,片假
名。一个汉字2个字节。
分情况使用:网页是外文网站,用UTF-8字库。有大量的中文,要求网页加载速度快,用gbk字库。
注意:必须保证设置的字符集和软件保存的字符集类型一致。
2.8 body标签
作用:body部分是我们的网页主体,给客户浏览的区域。
内容:里面放置的是我们的html标签书写的网页结构。
2.9 html基本语法
标签之间对空格、缩进、换行不敏感。对我们的标签的嵌套关系敏感。
tab:缩进。 shift+tab:撤销缩进。
空白折叠现象:文本内容区域内如果有一个或多个空格或者缩进或者换行,在浏览器中显示的时候,
只显示一个空格。即将所有空白区域折叠为一个空格。
标签的语法
① 标签必须写在一对尖括号里面,里面写的是我们的标签关键字。
② 双标签必须成对儿出现。
③ 结束标签必须写关闭符号/。
④ 标签分类:容器级标签、文本级标签。
2.10 标签分类
html中标签的分类:
容器级标签:h1-h6 pre div
文本级标签:p code span
文本级标签一般不能或不建议嵌套容器级标签,但是容器级可以嵌套文本级标签
三、标签介绍
3.1 h系列标签
h1-h6标题标签
给文本添加标题语义用,不能互相嵌套
默认加粗
具有换行符
h1-h6字体逐渐变小
由于 h 标签拥有确切的语义,因此要选择恰当的标签层级来构建文档的结构。
注意:请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到
漂亮的显示效果
3.2 p 标签
给文本添加段落语义
具有换行符
注意:
p 标签可以嵌套在块级元素内,
但 p 标签不能嵌套其它块元素,如 div,h系列标签,p标签等
3.3 属性
元素的属性:对元素的描述以及控制信息。
语法 文本内容
属性分类:
必选属性 img 图片标签中的 src alt
可选属性 img 图片的标签 width height
标准(全局)属性 id class style lang
事件属性 onclick onmouseover onmouseout
必选属性以及可选属性也可以看做是特有属性。
3.4 img 标签
img 标签是一个单标签 ,单标签在标签内使用 / 结束,当然目前是可以省略的。
img 标签的属性:
src 添加资源文件的路径
alt 图片加载失败后的文本提示
title 文本提示信息(鼠标悬停)
width 设置图片的宽度
height 设置图片的高度
border 设置图片的边框厚度(默认黑色实线,且不可修改)