HTML（超文本标记语言，Hyper Text Markup Language）是用来描述网页的一种语言，是一种标记语言而不是编程语言。

HTML5引入了一些新特性，包括用于绘画的canvas标签、用于媒介回放的video和audio元素等。

常用浏览器基本上都支持了HTML5。

HTML元素

元素指从开始标签到结束标签的所有代码。

<p/>空标签

<br/>换行

HTML属性

属性以键/值对的形式出现，如href="www.baidu.com"

常用标签属性：

<h1>：align对齐方式
<body>：bgcolor背景颜色
<a>：target规定在何处打开链接
- _blank表示在新标签页打开
- _self表示在此标签页打开

通用属性：

class：规定元素的类名
id：规定元素唯一id
style：规定元素样式
title：规定元素的额外信息

HTML格式化

标签	描述
`<b>`	定义粗体文本
`<big>`	定义大号字（已过时）
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义重点文字
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字（下划线）
`<del>`	定义删除字（删除线）

HTML样式

标签：

<style>：样式定义
<link>：资源引用

属性：

rel="stylesheet"：外部样式表
type="text/css"：引入文档的类型
margin-left：边距

三种样式表插入方法：

外部样式表

1	<link rel="stylesheet" type="text/css" href="mystyle.css">

放置在<head>头文件中

内部样式表

<style type="text/css">
	p{
		color:aqua
	}
</style>

放置在<head>头文件中

内联样式表
1
<a style="color: brown">hello</a>

HTML链接

链接数据：文本链接、图片链接

属性：

href属性：指向另一个文档的链接

name属性：创建文档内的链接

1
2
3

<a name="tips">hello</a>
<br/><br/>......<br/>
<a href="#tips">跳转</a>

img标签属性：

alt：替换文本属性
width：宽
height：高

HTML表格

表格标签	描述
`<table>`	定义表格
`<caption>`	定义标题
`<th>`	定义表头
`<tr>`	定义行
`<td>`	定义单元
`<thead>`	定义页眉
`<tbody>`	定义主体
`<tfoot>`	定义页脚
`<col>`	定义列属性

HTML列表

标签	描述
`<ol>`	有序列表
`<ul>`	无序列表
`<li>`	列表项
`<dl>`	自定义列表
`<dt>`	自定义列表项
`<dd>`	自定义列表项描述

无序列表

type属性：disc实心圆；circle空心圆；square实心方块
有序列表

type属性：A/a/I/i：大小写字母/大小写罗马数字

start属性：开始编号数字
嵌套列表
自定义列表

HTML块

块元素：

通常以新行开始，如<p>、<h1>、<ul>等。

内联元素：

通常不会以新行开始，如<b>、<a>、<img>等。

<div>元素：

也被称为块元素，通常作为组合HTML元素的容器。

<span>元素：

是内联元素，可作为文本的容器。

HTML布局

使用<div>布局

css float浮动详解

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML基础</title>
	<style type="text/css">
		body{
			margin: 0px;
		}
		#container{
			width: 100%;
			height: 950px;
			background-color: darkgray;
		}
		#heading{
			width: 100%;
			height: 10%;
			background-color: aqua;
		}
		#content_menu{
			width: 30%;
			height: 80%;
			background-color: aquamarine;
			float: left;
		}
		#content_body{
			width: 70%;
			height: 80%;
			background-color: blueviolet;
			float: left;
		}
		#footing{
			width: 100%;
			height: 10%;
			background-color: grey;
			clear: both;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="heading">头部</div>
		<div id="content_menu">内容菜单</div>
		<div id="content_body">内容主体</div>
		<div id="footing">底部</div>
	</div>
</body>
</html>

使用<table>布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML基础</title>
</head>
<body marginheight="0px" marginwidth="0px">
	<table width="100%" height="950px" style="background-color: darkgray;">
		<tr>
			<td colspan="2" width="100%" height="10%" style="background-color: aqua;">这是头部</td>
		</tr>
		<tr>
			<td width="30%" height="80%" style="background-color: blue;">左菜单</td>
			<td width="70%" height="80%" style="background-color: blueviolet;">右菜单</td>
		</tr>
		<tr>
			<td colspan="2" width="100%" height="10%" style="background-color: darkseagreen;">这是底部</td>
		</tr>
	</table>
</body>
</html>

HTML表单

表单用于获取不同类型的用户输入。

标签	描述
`<form>`	表单
`<input>`	输入域
`<textarea>`	文本域
`<label>`	控制标签
`<fieldset>`	定义域
`<legend>`	域的标题
`<select>`	选择列表
`<optgroup>`	选项组
`<option>`	下拉列表中的选项
`<button>`	按钮

<input>标签type属性：

text：文本框
password：密码
checkbox：多选框
radio：单选框

用name属性标识选框所属的组别。

HTML框架

框架标签<frame>（已过时）

内联框架<iframe>

框架可以嵌套，<a>标签中target属性中_self、_parent、_top分别表示在本框架中打开、在上一层框架打开和在最顶层（整个页面）打开。

HTML背景

background：背景图片

bgcolor：背景颜色，形如#FF00FF

HTML实体

实体：

HTML中预留字符串必须被替换成字符实体，如<、>、&

实际上就是转义，如用&gt表示>

HTML全局属性

全局属性指可以用在所有元素中的属性。

contenteditable：可编辑

designMode：页面可编辑

hidden：隐藏元素

spellcheck：拼写检查

tabindex：按tab键时的遍历顺序

结构元素

<article>元素

<section>元素

<nav>元素

<aside>元素

<time>元素

非主体结构元素

<header>元素

<footer>元素

<hgroup>元素

<address>元素

<div class="header">

表单元素与属性

form属性：指定所属表单id

formaction属性：指定提交到的页面

formmethod属性：指定提交方法

formenctype属性：指定编码方式

formtarget属性：指定页面打开方式

autofocus属性：页面打开时自动获得焦点

required属性：设置不得为空

label标签：利用for属性与另一个标签绑定

文本框的placeholder属性：输入提示

文本框的list属性：使用<datalist>和<option>标签设置可选的下拉选项

文本框的autocomplete属性：自动补全

文本框的pattern属性：使用正则表达式检查

文本框的selectiondirection属性：获取选择文本方向

复选框的indeterminate属性：未确定状态

<image>的width和height属性：宽、高