HTML（上）
2022-03-22 18:46:47 29 举报AI智能生成
HTML（上）
作者其他创作
大纲/内容
目标
能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出 alt 和 title 的区别
能够说出相对路径的三种形式
目录
HTML语法规范
HTML基本结构标签
开发工具
标签语义
无语义标签
图像标签和路径
超链接标签
HTML中的注释和特殊字符
HTML语法规范
由尖括号包围的关键词
通常是成对出现，开始标签、结束标签，有些特殊的必须是单个标签
双标签
<html></html>
单标签
<br />
标签关系
包含关系
并列关系
HTML基本结构标签
第一个HTML网页
HTML页面也叫HTML文档
每个网页都有一个基本的结构标签，也叫骨架标签
页面内容在基本标签上书写
HTML文档的后缀名必需为html或htm
HTML基本结构标签
<html></html>
HTML标签，页面中最大的标签，我们称为根标签
<head></head>
文档的头部，注意：在head标签中必需设置title标签
<title></title>
文档的标题，让页面拥有一个属于自己的网页标题
<body></body>
文档的主体，元素包含文档的所有内容，页面内容基本都是放到body里
开发工具
Visual Studio Code（VSCode）
快捷键
新建文件command N
保存文件command S
放大编辑器界面command +
缩小编辑器界面Command -
预览结果Alt B
编辑器自动换行Alt Z
输入英文符号“ ! ”再按下Tab键，可以直接生成HTML骨架
<!DOCTYPE>标签
文档类型声明标签，告诉浏览器用哪种HTML版本来显示网页
位于文档最前面，处于<html>标签之前
<!DOCTYPE html>
lang语言
让浏览器识别，呈现出对应语言的网页
英文<html lang="en">
中文<html lang="zh-CN">
charset字符集
字符集(CHaracter set)是多个字符的集合。以便计算机能够识别和存储各种文字，防止出现乱码的情况
在<htad>标签内，通过<meta>标签的charset属性来规定HTML文档用哪种字符编码
charset常用的值有GB2312、BIG5、GBK和UTF-8，UTF-8被称为万国码
<meta charset="UTF-8">
标签语义
标签的含义，这个标签是用来干嘛的
在合适的地方给最合理的标签，让页面结构更清晰
HTML常用标签
标题标签<h1></h1>
<h1> 到 <h6>
<h1> 到 <h6>
单词head的缩写，意为头部、标题
作为标题试用，并且依据重要性递减
加了标题的文字会加醋，字号也会变大
一个标题独占一行
段落标签<p></p>
单词paragraph的缩写，意为段落
在网页中为了文字有条理展示，需要将文字分段展示
用于定义段落，可以把HTML文档分割为若干段落
特点
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙
换行标签<br />
单词break的缩写，意为打断、换行
在HTML中，一个段落中的文字会从左到右依次排列，直到窗口右端才自动换行
希望某段文本强制换行显示
特点
单标签
只是简单地开始新的一行，和段落不一样，段落之间会插入垂直的间距
文本格式化标签
有时需要给文字设置粗体、斜体和下划线等效果，使文字以特殊的方式展示
标签语义：突出重要性，比普通文字更重要
加粗<strong></strong>或<b></b>
倾斜<em></em>或<i></i>
删除线<del></del>或<s></s>
下划线<ins></ins>或<u></u>
无语义标签
没有语义，它们是一个盒子，用来装内容的
<div></div>
division的缩写，表示分割、分区
用来布局，一行只放一个，大盒子
<span></span>
跨度、跨距
用来布局，一行可以多个，小盒子
图像标签和路径
图像标签<img />
用于定义HTML页面中的图像
单词 image 的缩写，意为图像
<img src="图像URL" />
属性：属于这个图像的特性
图片路径src
必须属性，用于指定图像文件的路径和文件名
替换文本alt
图像不能显示时的文字
提示文本title
鼠标放到图像上，显示的文字
宽度像素width
设置图像的宽度
高度像素height
设置图像的高度
边框像素border
设置图像的边框粗细
注意点
图像可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即key="value"的格式，属性 = “属性值”
路径
文件不能乱放，否则很难找到，所以需要文件夹来管理
目录文件夹
就是普通文件夹，里面存放了做页面所需要的素材，比如：html文件、图片等
根目录
打开目录文件夹的第一层就是根目录
VSCode打开目录文件夹
文件——打开文件夹，选择目录文件夹
直接拖拉进入VSCode
页面中图片非常多，通过新建文件夹来存放图像文件（images），查找图像则采用“路径”来制定图像文件位置
路径分为
相对路径
以引用文件所在位置为参考基础，而建立出的目录路径
相对路径是从代码所在的文件触发，去寻找目标文件，而上一级、下一级和同一级，就是图片相对于HTML页面的位置
同一级路径
图像文件位于HTML文件同一级
<img src="baidu.jpg" />
下一级路径/
图像位于HTML文件下一级
<img src="images/baidu.jpg" />
上一级路径../
图像位于HTML文件上一级
<img src="../baidu.jpg" />
绝对路径
目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
"D:\web\img\logo.jpg"
反斜杠
完整的网络地址"http://www.baidu.com/logo.jpg"
超链接标签
单词anchor的缩写，意为：锚
<a></a>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
两个属性
href
用于指定链接目标的url地址，必须属性
target
用于指定链接页面的打开方式
默认值_self
新窗口中打开_blank
外部链接
<a herf="http://www.baidu.com"></a>
内部链接
网站内部页面之间的相互链接，直接链接内部页面名称即可
<a href="index.html">首页</a>
空链接
没有确定链接目标时，用 # 暂定
<a href="#">首页</a>
下载链接
href里地址是一个文件或压缩包，会下载这个文件
<a href="img.zip"
网页元素链接
网页中的各种网页元素都可以添加超链接，如文本、图像、表格、音频、视频等
锚点链接
可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>
HTML中的注释和特殊字符
注释
便于阅读和理解，以"<!--"开头，以"-->"结束
给开发人员查看，程序不执行注释内容
<!-- 注释语句 -->
快捷键：command /
特殊字符
空格符
<小于号
<
>大于号
>
&和号
&
¥人民币
¥
©️版权
©
®️注册商标
®
°摄氏度
°
±正负号
±
×乘号
×
÷除号
÷
²平方2（上标2）
²
³平方3（上标3）
³
0 条评论
下一页
