前端 - HTML基础知识
目录HTML文档参考
- HTML简介
- 网页
- 网页简介
- HTML概念
- 网页的形成
- 浏览器
- Web标准
- 网页
- HTML标签概述
- HTML语法规范
- 基本语法概述
- 标签关系
- HTML基本结构标签
- VSCode自动生成骨架标签
- 文档类型声明标签
- 语言种类
- 字符集
- HTML语法规范
- HTML常用标签
- 标题标签
- 段落标签与换行标签
- 文本格式化标签
- div和span标签
- 图像标签
- 超链接标签
- 注释标签和特殊字符
- 注释
- 特殊字符
- HTML标签进阶
- 表格标签
- 基本结构
- 表头单元格
- 表格属性
- 表格结构标签
- 合并单元格
- 列表标签
- 无序列表
- 有序列表
- 自定义列表
- 表单标签
- 表单域
- 表单控件
- input输入表单元素
- input标签与label标签
- select表单元素
- textarea文本域表单元素
- input输入表单元素
- 表格标签
HTML简介
网页
网页简介
网页是构成网站的基本元素,通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页是htm.
或html
文件。
HTML概念
HTML指的是超文本标记语言(Hyper Text Markup Language),不是编程语言,而是标记语言(markup language),有一套标记标签(markup tag)。
超文本指的是:
- 超越文本限制,可以加入图片、声音、动画等内容。
- 它可以从一个文件跳转到另一个文件(超链接)。
网页的形成
网页由网页元素组成,这些元素利用html
标签描述,通过浏览器解析来展示给用户。
前端代码 => 浏览器解析、渲染 => 生成web界面。
浏览器
浏览器 | 内核 |
---|---|
IE | Trident |
Firefox | Gecko |
Safari | Webkit |
Chrome | Blink |
Web标准
Web标准由W3C(万维网联盟)组织和其他标准化组织制定的一系列标准集合。
标准 | 说明 |
---|---|
结构(Structure) | 结构用于对网页元素进行整理分类,主要指HTML |
表现(Presentation) | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指CSS |
行为(Behavior) | 行为是指网页模型的定义以及交互的编写,主要指JavaScript |
HTML标签概述
HTML语法规范
基本语法概述
- HTML标签是由尖括号包围的关键字,例如
。
- HTML标签通常是成对出现的,称为双标签,例如
。
- 有些特殊的标签是单个标签,称为单标签,例如
。
标签关系
- 包含关系:
- 并列关系:
HTML基本结构标签
每个网页都有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上写的。
标签名 | 定义 | 说明 |
---|---|---|
|
根标签 | 页面中最大的标签 |
|
文档的头部 | 在head 标签中必须要设置title 标签 |
|
文档的标题 | 网页标题 |
|
文档的主体 |
第一个界面:
Hello world!
第一个HTML界面。
VSCode自动生成骨架标签
在VSCode中使用!
自动生成骨架标签:
Document
文档类型声明标签
上面代码中的用来声明文档类型为HTML5,即告诉浏览器用哪种版本的HTML来显示网页。
注意:
声明在文档第一行,位于
标签之前。
是文档类型声明标签,不是一个HTML标签。
语言种类
标签用来定义网页语言种类,
en
表示英文,zh-CN
表示中文。
字符集
标签用来定义编码方式。
HTML常用标签
标题标签
HTML提供了
~
共6个等级的标题标签,有以下特点:
共6个等级的标题标签,有以下特点:- 加了标题标签的文字字号变大,且会被加粗。
- 一个标题独占一行。
一级标题
二级标题
三级标题
段落标签与换行标签
段落标签将网页分为若干个段落,段落与段落之间有空隙。
第一段内容。。。
使用换行标签进行强制换行,不会像段落一样中间有空隙。
第二段内容。。。。。
强制换行
第三段内容。。。。。
上面的显示效果如下:
第一段内容。。。
第二段内容。。。。。
强制换行
第三段内容。。。。。
文本格式化标签
主要有粗体、斜体、删除线、下划线等标签,如表所示(实际使用更推荐用前面的标签,语义更清晰):
语义 | 标签 |
---|---|
加粗 | 或者
|
倾斜 | 或者
|
删除线 | 或者
|
下划线 | 或者
|
div和span标签
标签没有语义,是用来装内容的盒子,其中
标签独占一行,效果和
类似,而
标签一行上可以出现多个。
123
45
67
89
效果如下:
123 45 67 89
图像标签
标签用来定义HTML页面中的图像,需要在属性src
中写出图像文件的路径和文件名,用法如下:
标签属性:
属性 | 属性值 | 说明 |
---|---|---|
src |
图片路径 | 必须写明 |
alt |
文本 | 替换文本,图像不能正常显示后出现的文字 |
title |
文本 | 提示文本,鼠标放在图片上会出现的文字 |
width |
像素 | 设置图像的宽度 |
height |
像素 | 设置图像的高度 |
border |
像素 | 设置图像的边框粗细 |
注意点:
- 所有属性写在标签名之后。
- 属性不分先后顺序,标签名、属性之间以空格分开。
- 属性使用键值对的格式写,即
key="value"
。
超链接标签
用法:
文本或图像
属性 | 说明 |
---|---|
href |
指定链接目标的URL值 |
target |
默认为_self ,即当前窗口打开,_blank 表示在新的空白标签页打开 |
注意:
- 各种元素都可以添加超链接。
- 空链接用
"#"
表示。 - 链接目标可以是:外部链接(baidu)、内部链接(html)、下载链接等。
- 使用锚点链接定位到页面中的某个位置:
- 链接:根据目标的
id
值跳转,公司介绍
。 - 链接目标:设置
id
属性,
。介绍内容
- 链接:根据目标的
注释标签和特殊字符
注释
特殊字符
特殊字符 | 描述 | 代码 |
---|---|---|
空格 | |
|
< | 小于号 | < |
> | 大于号 | > |
& | 与 | & |
¥ | 人民币 | ¥ |
? | 版权 | © |
? | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
2 | 平方 | ² |
3 | 立方 | ³ |
HTML标签进阶
表格标签
基本结构
表格的基本结构表示为:
1
2
3
标签用来定义表格。
中。
表头单元格
一般表头单元格位于第一行/列,里面的文字是加粗居中显示的,表头单元格表示为
。
姓名
学号
班级
123
2016123456
2001
效果如下:
姓名 | 学号 | 班级 |
---|---|---|
123 | 2016123456 | 2001 |
表格属性
表格属性不常用,因为后续主要通过CSS设置表格样式。下面的属性都要写到表格标签内,即
属性名 | 属性值 | 描述 |
---|---|---|
align | left, center, right | 表格对齐方式 |
border | 1或"" | 表格单元是否有边框,默认为"",即没有边框 |
cellpadding | 像素值 | 单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 表格的宽度 |
表格结构标签
为了使表格有更好的语义,使用
和
标签将表格分割为表头和表数据两大部分。用法如下:
姓名
学号
班级
123
2016123456
2001
555
2020123456789
2002
合并单元格
合并的属性需要写在目标单元格中:如果是跨行,目标单元格为最上侧单元格;如果是夸列,目标单元格为最左侧单元格。
- 跨行合并:
rowspan="合并个数"
- 跨列合并:
colspan="合并个数"
学生信息
姓名
学号
班级
123
2016123456
2001
555
2020123456789
效果如下:
学生信息 | ||
---|---|---|
姓名 | 学号 | 班级 |
123 | 2016123456 | 2001 |
555 | 2020123456789 |
列表标签
无序列表
中只能嵌套- 通常使用CSS设置列表的样式
- 1
- 2
- 3
有序列表
中只能嵌套- 通常使用CSS设置列表的样式
- Java
- Python
- C++
自定义列表
自定义列表经常用于对术语或名次进行解释与描述,定义列表的列表项前没有任何符号。
中只能包含
标签和
标签
标签和
标签的个数没有限制,通常是一对多的关系
效果如下:
- 关注我
- 微博
- B站
- 微信公众号
- 服务支持
- 客服电话
- 在线客服
表单标签
表单用于收集用户信息。一个完整的表单通常由表单域、表单控件和提示信息组成。
表单域
表单域是一个包含表单元素的区域,在HTML标签中,
会把它范围内的表单元素信息提交给服务器。
- 表单元素(控件)需要包含在表单域中。
基本结构如下:
属性 | 属性值 | 作用 |
---|---|---|
action |
url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
mathod |
get/post | 用于设置表单的提交方式 |
name |
名称 | 用于指定表单的名称,以区分同一个页面的多个表单域 |
表单控件
input输入表单元素
标签为单标签
- 使用
type
属性来指定控件类型,具体如下:
属性值 | 描述 |
---|---|
button |
定义可点击按钮(多数情况下用过JS启动脚本) |
checkbox |
定义复选框 |
file |
用于文件上传 |
hidden |
定义隐藏的输入字段 |
image |
定义图像形式的提交按钮 |
passsword |
定义密码字段,该字段中的字符不可见 |
radio |
定义单选按钮 |
reset |
定义重置按钮,清空表单内的所有数据 |
submit |
定义提交按钮 |
text |
定义单行的文本输入字段,默认长度20个字符 |
标签除了
type
属性外的其他常用属性如下表所示:name
和value
主要给后台人员使用- 单选和复选框应当有相同的
name
值 checked
主要用于单选和复选控件
属性 | 属性值 | 描述 |
---|---|---|
name |
由用户自定义 | 定义当前input元素的名称 |
value |
由用户自定义 | 规定元素的值 |
checked |
checked | 规定此input元素首次加载时应当被选中 |
maxlength |
正整数 | 规定输入字段中字符的最大长度 |
效果如下:
submit
点击之后,会上传到form
标签中的url中,形式类似:url?username=123&pwd=123123123&sex=male&hobby=basketball&hobby=football&hobby=pingpong
input标签与label标签
标签使用
for
属性和表单元素绑定,当点击标签对应的文本时,就会聚焦到绑定的表单元素。
标签的
for
属性的值与标签的
id
属性相同。
将上面的代码修改如下,此时点击文字“男”或“女”即可选中对应的控件。
select表单元素
textarea文本域表单元素
当用户输入内容较多的情况下,使用标签来处理多行文本的输入。
cols
和rows
属性定义文字的列数和行数,实际开发中不使用,而是用CSS改变大小