HTML超文本标记语言

方法1：
VSCode编辑器中新建网页，后缀为.html
方法2
在资源管理器中，点击鼠标右键，新建文本文档，将.txt变为.html（原因：html文档本身就是纯文本的）

方法1：
在文件夹中双击网页图标
方法2：
VSCode安装Live Server；功能：自动刷新网页
再文件中，按ctrl+shift+p键，选择“Open with Live Server"即可
注意：网页必须存放在文件夹中，且VSCode已经打开这个文件夹

第一部分：文档类型声明DTD
第一行必须是DTD（Document Type Definition，文档类型声明）
作用：说明当前HTML文件遵循几代的什么版本的规范
不写DTD会引发兼容问题

第二部分：HTML标签对
包括：
head标签对：网页的配置
body标签对：网页的内容

先在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码
再更改meta标签

Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集

SEO（Search Engine Optimization，搜索引擎优化）
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益

title

1.设置网页的标题，文字会显示在浏览器的标签栏上
2.是搜索引擎收录网站时显示的标题

关键词及页面描述

meta标签设置关键词及页面描述
name属性设置具体功能

通常成对儿出现
不同标签有不同功能
如何选择标签？看语义
有的标签不是成对儿的，而是只有起始标签，称为单标签

在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写

Hyper Text Markup Language超文本标记语言
是用来开发网页的语言
用标签的形式，为文档放置语义，添加部件

h1到h6分别代表一级标题到六级标题

只能放置一个，否则会被搜索引擎视为作弊；应将重点内容放到其中，比如网页的logo等

任何段落都要放到其中
原因：HTML中代码换行但页面显示效果无
不能嵌套h系列标签和其他p标签

是最常见的HTML标签
结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS"
是一个容器，什么都可以容纳

注意
不能散着放，属于父子组合标签，不能单独出现
子标签只能是
中可以放任何标签，形成列表的嵌套

type属性

定义前导符号的样式，但是HTML5中已经废弃，建议用CSS替代
值 描述
disc 默认值-实心圆
circle 空心圆
square 实心方块

type属性

值 意义
a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）

start属性

属性值是整数，指定列表编号的起始值

reversed属性

指定列表中的条目是否是倒序排列的
不需要值，只需要写reversed单词即可，这是HTML5的全新特性

图片放在项目文件夹中的images子文件夹中
本质是被引入

alt属性

alternate“替代品“
对图像的文本描述，不是强制性的
若由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本

width&heigth属性

分别设置宽度和高度，单位是像素，不需要写单位
若省略其中一个属性，则表示按原始比例缩放图片

图片格式

格式 说明
.bmp windows画图软件默认保存的格式
.gif 支持动画（比如表情包）
.jpeg(.jpg) 有损压缩图片，用于照片
·png 便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg 矢量图片
.webp 最新的压缩算法非常优秀的图片格式

相对路径

描述从网页出发，如何找到图片
…/回退层级

绝对路径

描述图片精准地址

是将网页和网页连结到一起的方法
是互联网成“网“的原因

a:anchor锚的首字母
hypertext reference 超文本引用

href属性

支持相对路径和绝对路径

title属性

用于设置鼠标的悬停文本

target属性

设置为blank即可在新标签页中打开网页，HTMl4代，blank之前有下划线

锚点

给h系列标签添加id属性，它将成为页面的锚点
网址后面添加#时，页面自动滚动到锚点所在位置
其他页面的超级链接，可以链接到指定锚点

下载链接

指向exe、zip、rar等文件格式的链接，将自动成为下载链接

邮件链接

有mailto:前缀的链接是邮件链接，系统将自动打开Email相关文件

给小编发邮件

电话链接

有tel:前缀的链接是电话链接，系统将自动打开拨号盘

##
使用标签在浏览器中插入音频，兼容到IE9

controls显示播放控件
常用音频格式：mp3、ogg

autoplay属性

声明autoplay属性，音频会自动播放
常用浏览器为不打扰用户，可能不允许自动播放，必须让用户手动点击之后才能播放

loop属性

声明loop属性，音频会循环播放

兼容到IE9

div标签实现文档区块分隔，为了区分每个div功能，会借助div标签的class属性
但是class命名没有规范，不同网站无法统一
为解决这个问题，HTML5推出了众多新的区块标签

所有表单都以元素开始

action属性

表示表单要提交到后台程序的网址

method属性

表示表单提交的方式
属性值：get/post

input类型总结

单行文本框

是单标签

value属性

表示已经填写好的值

placeholder属性

表示提示文本
将以浅色文字写在文本框中，并不是文本框中的值

单选按钮

同组单选按钮要求name为相同值（满足互斥）

value属性

如果有value属性值，向服务器提交的就是value值

checked属性

如果加上了checked属性，表示默认被选中

disabled属性

如果加上了disabled属性，则无法被选中

多选按钮

同组复选框要求name值一致

value属性

如果有value属性值，向服务器提交的就是value值

密码框

三种按钮

下拉菜单

多行文本框

rows和cols属性

用于定义多行文本框的行数和列数

label标签

用于将文字和单选/多选选项按钮绑定，单击文字时也视为点击了单选/多选按钮

在HTML4时代，label标签是通过for属性和单选按钮的id属性进行绑定的

控件

为输入框提供一些备选项
当用户输入的内容与备选项文字相同时，将会显示智能感应

tr:table row
td:table data

border属性

表格显示边框

caption属性

表格标题

是“标题小格”，可以替代的作用

合并单元格

colspan属性

用来设置td或者th的列跨度

rowspan属性

用来设置td或者th的行跨度