一、HTML页面固定结构
1.1 骨架结构标签
1.1.1 DOCTYPE文档说明
<!DOCTYPE html>文档类型声明,告诉浏览器该网页的 HTML版本
注意点:DOCTYPE需要写在页面的第一行,不属于HTML标签
1.1.2 网页语言
标识 网页 使用的 语言
作用:搜索引擎归类 + 浏览器翻译
常见语言:zh-CN 简体中文 / en 英文
二、HTML 语法规范:
2.1、注释的作用和写法
注释的作用:
• 为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释
注释的快捷键:
• 在VS Code中:ctrl + /
2.2、HTML标签的构成
结构说明:
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
- 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
2.3、HTML标签的属性
标签的完整结构图:
属性注意点:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
2.3.1 title属性
2.4、HTML标签的关系
HTML标签与标签之间的关系可分为:
父子关系(嵌套关系)
兄弟关系(并列关系)
三、常用标签
1、<strong>
Strong 元素 (<strong>) 表示文本十分重要,一般用粗体显示。
3.1、排版标签
3.1.1、标题标签
在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
代码:h系列标签
语义:1~6级标题,重要程度依次递减
特点:
• 文字都有加粗
• 文字都有变大(h1 - h4变大),并且从h1 → h6文字逐渐减小
• 独占一行
3.1.2、段落标签
在新闻和文章的页面中,用于分段显示
语义:段落
特点:
• 段落之间存在间隙
• 独占一行
3.1.3、换行标签
在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,
特点:
• 单标签
• 让文字强制换行
3.1.4、水平线标签
The Thematic Break (Horizontal Rule) element
分割不同主题内容的水平线
<hr>
特点:
• 单标签
• 在页面中显示一条水平线
3.2、文本格式化标签
需要让文字加粗、下划线、倾斜、删除线等效果
突出重要性的强调语境
推荐使用第二组:
实际项目开发中选择标签的原则:标签语义化
即:根据语义选择对应正确的标签
• 如:需要写标题,就使用h系列标签
• 如:需要写段落,就使用p标签
好处:
• 对人:好理解,好记忆
• 对机器:有利于机器解析,对搜索引擎(SEO)有帮助
推荐: • strong、ins、em、del,表示的强调语义更强烈
3.3、媒体标签
3.3.1、图片标签
在网页中显示图片
特点:
• 单标签
• img标签需要展示对应的效果,需要借助标签的属性进行设置!
src属性
属性值:目标图片的路径
注意点:
当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
路径的情况有很多,
alt属性
属性值:替换文本
• 当图片加载失败时,才显示alt的文本
• 当图片加载成功时,不会显示alt的文本
title属性
属性值:提示文本
• 当鼠标悬停时,才显示的文本
注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
width和height属性
宽度和高度(数字)
注意点:
• 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个,若设置不当此时图片可能会变形
路径
绝对路径
指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
例如:
• 盘符开头:D:\day01\images\1.jpg
• 完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
相对路径
从当前文件开始出发找目标文件的过程
相对路径分类:
1)同级目录
直接写目标文件的名字即可
• 方法一:<img src=“目标图片.gif”>
• 方法二:<img src=“./目标图片.gif”>
VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!
2)下级目录
VS Code快捷操作:直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!
3)上级目录
VS Code快捷操作:直接敲…/后,会自动提示上级目录下有文件,直接选择即可!
3.3.2、音频标签
音频标签目前支持三种格式:MP3、Wav、Ogg
3.3.3、视频标签
视频标签目前支持三种格式:MP4 、WebM 、Ogg
3.4、链接标签
a标签、超链接、锚链接
特点:
• 双标签,内部可以包裹内容
• 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
href属性
点击之后跳转去哪一个网页(目标网页的路径)
显示特点:
• a标签默认文字有下划线
• a标签从未点击过,默认文字显示蓝色
• a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
target属性
目标网页的打开形式
3.4.1、空链接
功能:
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置,用空链接占个位置
3.5、列表标签
列表的应用场景
在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
3.5.1、 无序列表
在网页中表示一组无顺序之分的列表,如:新闻列表。
显示特点:
• 列表的每一项前默认显示圆点标识
注意点:
• ul标签中只允许包含li标签
• li标签可以包含任意内容
3.5.2、有序列表
在网页中表示一组有顺序之分的列表,如:排行榜。
显示特点:
• 列表的每一项前默认显示序号标识
注意点:
• ol标签中只允许包含li标签
• li标签可以包含任意内容
3.5.3、自定义列表
在网页的底部导航中通常会使用自定义列表实现。
显示特点:
• dd前会默认显示缩进效果
注意点:
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容
3.6、表格标签
在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
The <tr> HTML element defines a row of cells in a table. The row’s cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
3.6.1、表格相关属性
实际开发时针对于样式效果推荐用CSS设置
3.6.2、表格标题和表头单元格标签
注意点:
• caption标签书写在table标签内部
• th标签书写在tr标签内部(用于替换td标签)
3.7 <script>
<script>
HTML元素用于嵌入可执行代码或数据;这通常用于嵌入或引用JavaScript代码。
<script>
元素也可以与其他语言一起使用,例如WebGL的GLSL着色器编程语言和JSON。
属性
1 crossorigin
普通<script>
元素向window.onerror传递最小的信息,用于未通过标准CORS检查的脚本。若要允许为静态媒体使用单独域的站点记录错误,请使用此属性。
三、VS Code的基本快捷键
1. 快速生成标签
英文 + tab
2. 保存文件
ctrl + s
• 注意1:写完文件之后务必需要保存文件,否则网页无变化
• 注意2:可以设置自动保存省去每次保存的麻烦
3. 快速查看网页效果
右击 → Open in Default Browser • 快捷键:alt + b • 注意:必须安装了open in browser 插件
4. 快速生成结构标签
! + tab
• 注意1:!必须是英文的,中文!无效
• 注意2:必须保证当前文件后缀名是.html,否则无效 • VS Code自动生成的骨架多了其他标签,之后会介绍