文章目录
HTML简介
概念：
- HTML(Hyper Text Markup Language) 指的是超文本标记/标签语言，一款专门制作网页的语言。
- 普通的文本就是类似英文单词，英文字母一样的存在。
- 超文本的意思就是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。（例如：字母img只是普通的字母，没什么特殊的含义。而
<img>被加上尖括号后，在网页的世界中，就具备了显示图片的作用。）
HTML的使用
文件标签
<html>标签： 代表当前书写的是一个HTML文档<head>标签：存储的本页面的一些重要的信息，不会显示出来<head>标签：有一个子标签<title>用于定义页面的标题<body>标签：书写的内容会显示出来<body>标签的属性：text：设置文字颜色bgcolor：设置页面背景色background：设置页面背景图片
排版标签
-
HTML注释：
<!-- 此处的内容不会显示出来 --> -
换行标签：
<br/>- 注意事项：html是一门相对不那么严谨的语言，标签中的
/可有可无，但有/才是html语言的标准化
- 注意事项：html是一门相对不那么严谨的语言，标签中的
-
段落标签：
<p>-
在此标签中的内容，会在开始与结束之间产生一个空白行，并且会自动换行
-
常用属性
align：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello, HTML!</title> </head> <body text="white" bgcolor="black"> <p>默认左对齐</p> <p align="center">居中对齐</p> <p align="right">靠右对齐</p> </body> </html>
-
-
水平线标签：
<hr>- 常用属性：
align：水平线位置，可取值有leftrightcenter（默认center居中）size：水平线厚度（粗细）width：水平线宽度color：水平线的颜色
- 常用属性：
-
分区标签：
<div>div是一个块标签，用来进行布局div与span都有 “容器” 的作用，具体区别：div支持自动换行，又名块级元素；span不支持自动换行，又名行内元素div整体划分区块；span局部划分区块
-
字体标签：
<font>- 常用属性：
face：用于设置字体，例如 宋体 隶书 楷体size：用于设置字的大小（大小默认设置1-7，7最大，想更大，需要使用css）color：用于设置字的颜色
- 常用属性：
-
标题标记：
<h1>-<h6><h1>最大（一级标题），<h6>最小（六级标题）
-
格式化标签
<b>：字体加粗<i>：字体倾斜<del>：删除线<u>：下划线
列表标记
- 有序列表：
<ol>- 常用属性：
type="A"：字母排序type="I"：罗马排序start="n"：序列从n开始
- 常用属性：
- 无序列表：
<ul>- 常用属性：
type="disc"：默认，实心圆type="square"：方块type="circle"：空心圆
- 常用属性：
图像标签
<img>它可以让我们在网页中引入一张图片，常用属性：src图片的路径width图片的宽度height图片的高度border用于设置图片的边框alt图片无法显示时，默认显示的文本信息title鼠标悬停图片上，默认显示的文本信息align图片附件文字的对齐方式，可取值有：left：把图像对齐到左边right：把图像对齐到右边middle：把图像与中央对齐top：把图像与顶部对齐bottom：把图像与底部对齐（默认）
超链接标签
<a>：可以实现跳转到其他页面的操作- 超链接的内容不仅可以是文本，也可以是图片等信息
- 常用属性：
href代表的我们要跳转的路径target这个属性规定在何处打开这个链接文档，可取值：blank在新窗口中打开页面self默认，在本窗口打开页面
表格
<table>：定义一个表格border边框，取值以像素为单位width代表的表格的宽度align代表表格的对齐方式；取值：left左对齐表格right右对齐表格center居中对齐表格
cellspacing：单元格间距（通常设置0表示单线表格）
<tr>：表格中的行 （Table Row）align代表表格的对齐方式；取值：left左对齐内容（默认值）right右对齐内容center居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格 （Table DataCell）colspan指示列的合并（例如：colspan="3"表示合并3列）rowspan指示行的合并
表单标签
表单可以让我们将录入信息携带到服务器端。将所有录入的数据形成一个整体，一起提交给服务器。常见的 登录页面、注册页面 都离不开表单的应用。
form属性
action：整个表单提交的目的地method：表单提交的方式get：提交时，传输数据量少（传递普通文字信息，无法传递照片），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）post：提交时，传输数据量大（同时支持传递文字和图片），密文提交（浏览器的url后面看不到提交的数据）
表单中的元素（控件）
-
<input>元素的type属性：-
text：默认值，普通的文本输入框placeholder：提示文本maxlength：最多能输入字符数量
-
password：密码输入框 -
checkbox：多选框/复选框checked：默认被选中
-
radio：单选按钮 -
file：上传文件 -
reset：重置按钮 -
submit：提交按钮 -
button：普通按钮
-
-
<select>：下拉列表/下拉框<option>：列表中的项selected：默认被选中
-
<textarea>：文本域（多行文本框）- 可以通过
cols和rows属性来规定textarea的尺寸，不过更好的办法是使用 CSS 中的height和width属性。
- 可以通过
-
<button>：按钮-
在
form表单中，作用和submit一样 -
不在
form表单中，就是普通按钮（配合javascript，可扩展性更高）
-
-
注意事项：
- 所有表单中的元素都要定义名称（否则提交到服务器后，服务器无法区分多个元素之间的不同）
- 单选框要想一次仅能选择一个，需要具有相同的
name值 - 所有的复选框以组为单位，组内的每个复选框都应该具有相同的
name值
框架标签
- 通过
<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。 - 注意事项：框架标签和
body标签无法共存。
其他标签与特殊字符
<meta>标签
-
<meta>标签必须写在<head>标签之间<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello, HTML!</title> </head> -
说明：
charset="UTF-8"：当前页面的字符编码为UTF-8name="viewport"：name为显示窗口content="width=device-width, initial-scale=1.0"：文本内容，显示窗口的宽度 = 客户端的屏幕宽度（满屏），显示的文字和图形的初始比例 = 1.0http-equiv="X-UA-Compatible" content="ie=edge"：任何IE版本都以当前版本所支持的最高级标准模式渲染
HTML5的新特性
新增语义化标签
- 意义：在html4中，所有的容器标签95%都会使用
div，div过多的话，很难加以区分。HTML5中新增了部分语义化标签，使得div见名知意。section：表示页面中的内容区域，页面的主体部分article：文章aside：文章内容之外的，标题header：头部，页眉，页面的顶部hgroup：内容与标题的组合nav：导航figure：图文并茂foot：页脚，页面的底部
新增媒体标签
<video>：在网页上播放视频src：媒体资源文件的位置controls：控制面板autoplay：自动播放loop：循环播放
新增表单控件
<input>：可选的type属性：color：调色板date：日历month：月历week：周历number：数值域min：最小值（默认值是1）max：最大值（默认值无上限）step：递增量
range：滑块search：搜索框（带×号，可一键删除框中内容）
<progress/>：进度条<mark>：高亮显示<datalist>：联想输入框（模糊查询）<option>：选项