HTML初步+常用标签+工具
目标
-
能够说出标签的书写注意规范
-
能够写出HTML骨架标签
-
能够写出超链接标签
-
能够写出图片标签并说出Alt和title的区别
-
能够说出相对路径的三种形式
1. HTML语法规范
1.1基本语法概述
-
HTML标签是由尖括号包围的关键词，所有的标签都必须包含在一对<>之中。
-
一般情况下标签成对出现，如< html>< /html>，称之为双标签，第一个为开始标签，第二个为结束标签。
-
有些特殊的标签必须是单个标签，如< br/>，称之为单标签。
1.2标签关系
双标签可以分为两类：包含（嵌套）关系和并列关系
- 包含关系(父子关系)
<head>
<title> </title>
</head>
- 并列关系(兄弟关系)
<head> </head>
<body> </body>
2.HTML基本结构标签
2.1第一个HTML
每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写
<html>
<head>
<title>第一个页面</title>
</head>
<body>
键盘敲烂，工资过万
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html>< /html> | HTML标签 | 页面中最大的标签，称之为根标签 |
| < head>< /head> | 文档的头部 | 注意在head标签中必须要设置的标签是title |
| < title>< /title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body>< /body> | 文档的主体 | 包含文档的所有内容，页面内容基本都是放到body里 |
3. 开发工具
3.1 Visual Studio Code下载网址：
https://code.visualstudio.com/#built-in-git
3.2 VScode简介
Vscode 是一款十分出色的 ide 开发工具，界面美观大方，功能强劲实用，软件支持中文，拥有丰富的插件，集成了所有一款现代编辑器所应该具备的特性，包括语法高亮(syntax high lighting)，可定制的热键绑定(customizable keyboard bindings)，括号匹配(bracket matching)以及代码片段收集(snippets)。支持 Windows，OS X 和 Linux 。内置 JavaScript、TypeScript 和 Node.js 支持。
优点：
- 免费
- 借助IntelliSense超越了语法突出显示和自动完成功能。
- 直接从编辑器调试代码。
- 内置 Git 命令。
- 可扩展和可定制。
- 以 Microsoft Azure 轻松部署和托管网站。
3.3 VScode的使用
- 双击打开软件
- 新建文件夹(Ctrl+N)
- 保存(Ctrl+S),注意要保存为.html文件
- Ctrl+加号键，Ctrl+减号键 可以放大缩小视图
- 生成页面骨架结构：输入!按下Tab键
- 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“open in default browser”
3.4 VScode插件安装
4.网页开发工具
4.1. <!DOCTYPE>标签
< !DOCTYPE>document type文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>
这句代码的意思是：当前页面采用的是HTML5版本来显示网页
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于< html>标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
4.2.lang语言种类
-
language缩写
-
用来定义文档显示的语言
-
en 定义语言为英文
-
zh-CN定义语言为中文
-
简单来说定义en就是英文网页，定义为zh-CN就是中文网页
-
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
4.3.charset字符集
字符集（character set)是多个字符的集合，以便计算机能够识别和存储各种文字
在< head>标签内，可以通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8"/>
charset 常用的值有：GB2312（简体中文）,BIG5（繁体中文）,GBK（简体和繁体）和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
注意：< meta charset=“UTF-8”/>必须写，否则会出现乱码的情况，一般情况下，统一使用UTF-8编码
4.4.总结
-
以上三个代码vscode自动生成基本不需要我们重写
-
<! DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取HTML5版本来显示页面
-
< html lang=“en”>告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
-
< meta charset=“UTF-8”/> 必须写，采用UTF-8来保存文件，否则会出现乱码
5.HTML常用标签
5.1标签语义
学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的
5.2 标题标签< h1>-< h6>（重要）
为了使网页更具有语义化，我们经常在页面中用到标题标签，HTML提供了6个等级的网页标题，即< h1>-< h6>
<h1>我是一级标题</h1>
-
h为单词head的缩写，意为头部，标题
-
标签语义：作为标题使用，并根据重要性递减
特点：
-
加了标题的文字会变的加粗，字号也会变大
-
一个标题独占一行
5.3.段落标签
在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在HTML中，< p>标签用于定义段落，它可以将整个网页分为若干个段落
<p>这是一个段落</p>
- 单词paragraph的缩写
特点：
-
文本在浏览器中会根据浏览器窗口的大小自动换行
-
段落和段落之间保有空隙
5.4.换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签< br/>
- 单词break的缩写，意为打断，换行
特点：
-
< br/>是一个单标签
-
< br/>标签只是简单的开始新的一行，跟段落不一样
5.5文本格式化标签
使文字以特殊的方式显示，突出重要性
| 语义 | 标签(前者语义更强) |
|---|---|
| 加粗 | < strong>< /strong>,< b>< /b> |
| 斜体 | < em> < /em>,< i>< /i> |
| 删除线 | < del>< /del>,< s>< /s> |
| 下划线 | < ins>< /ins>,< u>< /u> |
5.6< div>和< span>标签
< div>和< span>是没有语义的，他们就是一个盒子，用来装内容的
<div>这是一个div 标签</div>
<span>这是一个span标签</span>
特点：
-
< div>标签用于布局，但是一行只能放一个< div>，大盒子
-
< span>标签用于布局，一行上可以多个< span>,小盒子
5.7图像标签（重点）
在HTML中，< img>标签（单标签）用于定义HTML页面中的图像
<img src="图像URL"/>
-
img是单词Image的缩写，意为图像
-
src是< img>标签的必须属性，它用于指定图像文件的路径和文件名
-
所谓属性：就是属于这个图像标签的特性
-
必须将HTML和图像文件放一起
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示时用文字替换 |
| title | 文本 | 提示文本，鼠标放到图片上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
- 宽度和高度可以只修改一个，另一个会自动等比缩放。
图像标签注意点：
-
图像标签可以拥有多个属性，必须写在标签名的后面属性之间部分先后顺序，标签名与属性之间用空格隔开
-
属性采取键值对的格式，即key="value"的格式，属性=”属性值“
5.8路径
1.目录文件夹和根目录：
-
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，如HTML文件，图片等
-
根目录：打开目录文件夹的第一层就是根目录
2.vscode打开目录文件夹
文件–打开文件夹，选择目录文件夹，后期非常方便管理文件
路径
-
创建一个文件夹来存放图像文件(images)这时在查找图像，就需要采用“路径”的方式来指定图像文件的位置
-
路径可以分为：相对路径，绝对路径
-
一般使用相对路径
**相对路径：**以引用文件所在位置为参考基础，而建立出的目录路径。
简单来说就是图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如< img src=“baidu.jpg /”> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级，如< img src=“imges/baidu.jpg /”> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级，如< img src="…/baidu.jpg /"> |
相对路径是从代码所在的文件夹出发，去寻找目标文件的，而这里所说的上一级，下一级，同一级就是图片相对于HTML页面的位置
绝对路径：
-
是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，也可以是完整的网络地址，符号\
-
绝对路径和相对路径的符号不同，绝对路径\，相对路径/
-
使用绝对路径可能遇到的问题：
可能用web服务器无法访问本地文件（就是不能用浏览器直接打开），其实不用浏览器打开就没问题，直接找到这个文件的路径，在文件夹里打开这个HTML文件就可以正常显示。所以不要轻易使用绝对路径
5.9超链接标签
在HTML中,< a>标签用于定义超链接，作用是从一个页面链接到另一个页面
1.链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- 单词anchor的缩写，意为“锚”
两个属性的作用如下
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当标签应用href属性时他就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式。其中_ self为默认值，_ blank为在新窗口中打开方式 |
target：打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank新窗口打开页面
2.链接的分类
-
外部链接：如< a href=“http://www.daidu.com”>百度网址
-
内部链接：网站内部页面之间相互连接，直接链接内部页面名称即可，例如< a href=“index.html”>首页< /a>
-
空链接：如果当时没有能够确定链接目标时,< a href="#">首页< /a>
-
下载链接：如果href里面的地址是一个文件(.exe)或者压缩包(.zip)，会下载这个文件
-
网页元素链接：在网址中的各种网页元素，如文本，图像，音频，视频等都可以添加超链接
-
锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two">第二季< /a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如：< h3 id=“two”>第二季介绍< /h3>
6.html中的注释和特殊字符
6.1注释
如果需要在HTML文件中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要用到注释标签
HTML中注释中以"<!..“开头，”…>"结束
<!..注释语句..> 快捷键 ：Ctrl+/
-
一句话：注释标签里面的内容是给程序员看的，这个代码不执行不显示到页面中
-
添加注释是为了更好的解释代码的功能，便于相关开发人员理解和阅读代码
6.2特殊字符
-
在HTML中，一些特殊的符号很难或者不方便直接使用，此时我们就是用下面的字符来实现
-
图就不贴了，实在太多了
-
重点记住：空格（ )，大于号(>)，小于号(&it)，其余用的很少，需要可以网上查
7.视频推荐
黑马程序员url:https://b23.tv/lunVPo
ps:非常适合入门。
2824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
