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