HTML基础知识

1 什么是HTML？
HTML 指的是超文本标记语言 (Hyper Text Markup Language)。不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML 使用标记标签来描述网页。

2 HTML标签
HTML 标签是由尖括号包围的关键词，比如 ； 标签通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签。

标签分类：

双标签
html <标签名> 内容 </标签名>
单标签(也称为空标签)
hr <标签名 />
标签关系分为两种：

嵌套关系

并列关系 3 HTML基本结构 如下所示： ... ​代码讲解： 1. 称为根标签，所有的网页标签都在中。 2. 标签用于定义文档的头部，它是所有头部元素的容器。 头部元素有

​为什么要有语义化标签？

方便代码的阅读和维护。
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 。
使用语义化标签会具有更好地搜索引擎优化。
语义是否良好，在于当我们去掉CSS之后，网页结构依然阻止有序，并且有良好的可续性。也就是说，一眼看去知道哪个是重点结构是什么，知道每一块的内容有什么作用。

​遵循的原则是先确定语义的HTML，再选合适的CSS。

5 段落标签

段落

标签的默认样式，段前段后都会有空白。 6 换行标签 如果希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：

Helloween
World！
I'm Coming!

7 标题标签 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。

语法： 标题文本 (x为1-6)​
标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

8 水平线标签

---

标签在 HTML 页面中创建水平线,可用于分隔内容。

Welcome to China!

---

是单标签

Thank you!

9 注释 注释的作用是为了解释代码的用途，方便程序员查找以及他人阅读。常见的注释有：

/注释/
可以使用快捷键 ctrl+/ 或者 ctrl+shift+/
10 div span标签
div span没有语义，它的作用是为了结合CSS设置单独的样式使用。

语法：

分割

跨度 11 列表 列表分为无序列表、有序列表和自定义列表

无序列表：使用ul-li标签实现，没有前后顺序的信息列表。
语法：

• 3
• 2
• 1

​有序列表：使用ol-li标签实现，是有前后顺序的信息列表。 语法：

1. 1
2. 2
3. 3

自定义列表：使用dl-dt-dd标签实现，通常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。 语法：

12 表格 创建表格几元素：table(定义表格)、tr(行)、td(列)、thread(表格头部)、th(表格表头)、tbody(表格主体)

除此之后还有指定表格标题，rowspan合并行，colspan合并列。

语法：

第一行第二行

标题

第一列	跨两列
第二列

13 超链接 超链接类型分为三种：1 内部链接 2 外部链接 3 锚链接

语法：

链接显示的文本
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，
其中_self为默认值，_blank为在新窗口中打开方式。
​注意：

1.外部链接 需要添加 http:// http://www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

​锚点定位 （难点）

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

使用“a href=”#id名>“链接文本"创建链接文本（被点击的）

使用相应的id名标注跳转目标的位置。
跳转到锚链接

14 图片
语法：

15 表单
网站怎样与用户进行交互？

答案是使用HTML表单(form)。

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

action：在表单收集到信息之后，需要将信息传递给服务器进行处理，

action属性用于指定接收并处理表单数据的服务器程序的URL地址。
method:用于设置表单数据的提交方式，取值为get或post。
name：用于知道你跟表单的名称，以便于区分同一个页面中的多个表单。
​表单控件：单行文本输入框、密码输入框、复选框、单选框、提交按钮、重置按钮等，都必须放在标签之间。

​单行文本输入框：当用户要在表单中输入字母、数字等内容时，就需要文本输入框，文本框也可以转化为密码输入框。

语法：

当type="text"对应的就是文本输入框；当type="password",对应的就是密码输入框。 ​复选框： 比如个人资料填写爱好的勾选 单选框：

比如性别的选取
多行文本框：

文本 比如备注的填写
下拉框：

选项值 选项值 选项值 ​按钮：

提交按钮
重置按钮
​
HTML