一、HTML 简介

HTML，Hyper Text Markup Language，超文本标记语言，是一种描述网页的语言

HTML 页面包括文本、超文本，即 HTML 由文本和标签组成

超文本：超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记：又叫做标签，格式<标签名></标签名>或<标签名>或<标签名 />

HTML 页面中可以有 HTML 标签、css、JavaScript

HTML 描述一个网页的结构，css 描述网页的表现，JavaScript 描述网页的行为

HTML 页面由浏览器解析，因此不同的浏览器可能解析的结果不一样，即浏览器的兼容性问题

二、HTML 的组成部分

<!--声明HTML的版本为HTML5-->
<!DOCTYPE html>
<!--HTML的根标签，只能存在一个，页面中所有的内容都必须存在于根标签中-->
<html lang="en">
  <!--
	描述HTML的头部，head标签中的内容不会显示在页面中
	其中可以设置页面的编码、设置页面的标题、编写css代码、编写JavaScript代码、引入css文件、引入js文件
-->
  <head>
    <!--设置页面的编码-->
    <meta charset="UTF-8" />
    <!--设置页面的标题-->
    <title>testHTML</title>
  </head>
  <!--描述HTML的身体部分，所有需要在页面中显示的内容都需要设置在body中-->
  <body>
    helloworld
  </body>
</html>

三、HTML 的语法

标签的分类
- 标签分为单标签和双标签
- 双标签有开始标签和结束标签，格式：<标签名></标签名>
- 单标签只有开始标签，格式：<标签名>或<标签名 />
- 注意：若双标签中没有任何内容，就可以改为单标签
标签不区分大小写
标签可以嵌套但不能交叉嵌套
标签必须正确关闭
属性必须有值，且属性值必须加引号
注释不能嵌套

四、HTML 的常用标签

1、标题标签

<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>

2、div

div：用于页面布局

<div
  style="border: 1px solid #000; width: 100px; height: 100px; background-color: red;"
>
  hello
</div>

3、段落标签 p

段落标签 p：段落标签独占一行

1	<p>好好学习，天天向上</p>

4、字符转义

HTML 中有些字符具有特殊含义，若要在页面中原样展示，则需要使用其对应的实体

1	>：> <：< 空格：

5、无序列表和有序列表

<!--无序列表-->
<ul>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>
<!--有序列表-->
<ol>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol>

6、插入图片 img

属性：

```
src：设置所展示图片的路径
```

alt：若图片无法正常显示，所展示的提示信息

注意：路径分为相对路径和绝对路径

相对路径：目标资源相当于当前位置的路径

绝对路径：

Static web：绝对路径指资源在磁盘上的路径
Dynamic web：绝对路径指资源在服务器中的路径

<img src="img/wm.jpg" alt="无法显示" />
<img src="jf.gif" alt="无法显示" />
<img src="../02.常用标签/hei.gif" alt="无法显示" />
<img src="../yin.gif" alt="无法显示" />

7、超链接 a

属性：

href：设置要跳转到的页面的路径
target：设置页面跳转的方式，target=”_self|_blank”
_self：在当前的标签页中跳转页面
_blank：在新的标签页中跳转页面

8、表格

table：描述一个表格
tr：描述表格中的一行
td：描述某一行的某一列
th：描述某一行的某一列，将此行设置为表头，即其中的内容会自动加粗并居中

在 td 和 th 中设置合并行或合并列：
colspan：合并列；rowspan：合并行

9、表单 form

属性：

action：设置提交到的资源的路径
method：设置表单提交的方式，method=”get|post”

表单项：

<input type="hidden" />：描述一个隐藏域

<input type="text" />：描述一个单行文本框

<input type="password" />：描述一个密码框

<input
  type="radio"
/>：描述一个单选框，注意多个单选框需要设置相同的name属性，才能实现单选

<input type="checkbox" />：描述一个复选框

<input type="file" />：描述一个文件域

<select>
  ：描述一个下拉列表框
  <option></option>
  ：描述下拉列表框中的列表项
</select>

<textarea></textarea>：描述一个文本域（多行文本框）

<input
  type="reset"
/>：描述一个重置按钮，可以将表单中的表单项还原到最初的状态，按钮默认显示"重置",可通过value属性设置按钮上显示的内容

<input
  type="submit"
/>：描述一个提交按钮，可以将表单中的表单项提交到某个地址，按钮默认显示"提交",可通过value属性设置按钮上显示的内容

<input type="button" />：描述一个空按钮，必须通过value属性设置按钮上显示的内容

<button>点击</button
>：描述一个按钮，默认的功能为提交，可通过其中的type属性设置其功能，type="submit|reset|button"，其value属性不能设置按钮上显示的内容，需要在双标签中间设置

注意：

① 关于 value 属性

表单提交时，需要将表单项的数据提交到指定的地址，表单项必须设置 name 和 value 属性

其中单行文本框、密码框、文本域不需要设置 value，因为这些标签，用户输入的内容就是 value 属性值

文件域也不需要设置 value，其 value 就是选择的文件的文件名

但是单选框、复选框、下拉列表框必须设置 value

② 关于提交表单项数据

当表单项有了 name 和 value 属性，表单提交表单项的数据时的格式为：

username=value&password=value&…

get 和 post 的提交方式的区别

get 提交方式时，所提交的数据会通过?拼接在提交的地址后面
post 提交方式时，所提交的数据会被存储在请求报文的请求体中，但是其格式都是name=value&name=value&…
get 会暴露表单项的数据，因此不安全；post 相对而言安全
get 传输速度快；post 相对而言传输速度慢
get 传输的数据量较小；post 传输的数据量较大，可以认为无限制
文件上传时只能使用 post，并且表单中必须设置属性enctype=”multipart/form-data”

五、css

CSS 全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体等

1、css 有三种使用方式

① 行内样式

行内样式：在标签中直接设置样式

有些标签中，样式直接以属性的方式存在，而有些样式则没有相对应的属性，此时可以通过 style 属性统一设置

1	<p style="color: red;">师傅领进门，修行在个人</p>

② 内嵌样式

内嵌样式：在 head 标签的 style 标签中，通过选择器匹配标签，并且设置样式在 head 标签的 style 标签中，通过选择器匹配标签，并且设置样式

<style type="text/css">
  #testH2 {
    color: red;
  }
  p {
    color: green;
  }
  .testClass {
    font-weight: bolder;
  }
  #testH2,
  .testClass,
  div {
    border: 1px solid blue;
  }
  * {
    border: 1px solid blue;
  }
</style>

③ 外部样式

外部样式：在 head 标签中，通过 link 标签引入外部的 css 文件，作用于当前页面设置样式，css 文件中也需要通过选择器匹配标签

1	<link rel="stylesheet" href="test.css" />

2、选择器

名称	格式	说明
id 选择器	#id{样式}	通过 id 属性匹配标签
标签选择器	标签名{样式}	通过标签名匹配标签
class 选择器	.class{样式}	通过 class 属性匹配标签
群组选择器	选择器 1,选择器 2,选择器 3{样式}	通过多个选择器匹配标签，此时所匹配的标签只要满足其中一个选择器即可
全局选择器	*{样式}	匹配页面所有标签，全局选择器又叫通用选择器