html概述
中文全称：超文本标记语言。
不是一种编程语言，是标记语言。
标记语言是一套标记标签。
HTML 使用标记标签来描述网页。
HTML，css，javaScript三者的关系
网页主要由三部门组成：结构、表现和行为。
HTML---结构，决定网页的结构和内容。
css---表现，设定网页的表现样式。
JavaScript（JS）---行为，控制网页的行为。
开发工具
1、webStorm（web前端）
2、Subline Text 代码编辑器
3、HBuilder（HTML5的web开发IDE）
4、eclipse(集成开发环境)
5、Visual studio（简称vs，微软的开发工具集）
6、记事本---需要更改后缀名为.html，且将格式改成utf-8。
HTML标签基本语法
1、基本的语法：
<p> </p>
<开始标签>内容</结束标签>
2、标签通常用<>包围关键字，且成对使用，有一个开始标签就对应有一个结束标签，结束标签只是在开头标签的前面加一个斜杠“/”
特殊：<img scr="" alt="" />空标签
3、在元素的开始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：
<p style="color:red;"></p>
color:属性名
red：属性值
4、属性只能写在开始标签中。
HTML注释
注释内容可插入文本中任何位置，其内容不在网页中显示，只在源码文档中供备注使用，方便程序员自己和他人查看。
<!--<form action="#" method="post">-->
<!--用户名：<input class="username" id="username1" name="username2" type="text"-->
<!--readonly="readonly">-->
<!--密码：<input name="password" type="password" placeholder="请输入密码">-->
<!--<input type="button" value="登录">-->
<!--<input type="submit">-->
<!--<button>我是一个按钮</button>--> 方法适用于文档主体部分（body）
//注释内容
/* 注释内容 */ 方法适用于文档引用标签部分
快捷键：ctrl+“/”
HTML注意事项
1、所有标签的元素和属性的名字都必须使用小写
2、所有的属性必须用双引号“”括起来，如属性值本身就含有双引号
3、文件的扩展名要以.html结束
4、任何空格和回车在代码中都无效，插入空格或回车有专用的标记。分别是 、<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
doctype三种解析模式
IE 准标准模式
标准模式
混杂模式（非标准）
doctype：声明，文档类型，用哪种解析方式
html：html文档，也就是网页
head：所有头部元素的容器，如<title>.<link>.<meta>.<script>.<style>等
title：
1.定义浏览器工具栏中的标题。
2.提供页面被添加到收藏夹时显示的标题。
3.显示在搜索引擎结果中的页面标题。
meta：描述文档（作者或编辑软件），或定义文档的关键词，或重定向用户到新的网址，此处是设置编码格式，否则为乱码，不会显示在页面上。
body：网页内容的主体部分。所有的标签都应该写在这里面。
锚点（回到顶部）
1、创建锚点
2、指向锚点
<a href=""name="ie"></a>
<a href="#ie"></a>
from表单
输入框
input type=“text”
<form action="#" method="post或get">------get安全性低，速度快，显示用户信息。 post安全性高，速度慢，不显示用户信息。
用户名：<input class="username" id="username1" name="username2" type="text"---------------------------class常用于html，css
readonly="readonly">
密码：<input name="password" type="password" placeholder="请输入密码">---------------------id常用于js---------name常用于交互时（供后台）
<input type="button" value="登录">
<input type="submit">--------------自带提交功能
<button>我是一个按钮</button>
<video src="要连接的视频文件名.mp4" controls autoplay></video>
<audio src="song.mp3" controls> </audio>
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
单选框
<div>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
在操作时他的type必须一样可以设置多个选项
<div>
<input type="checkbox">多选框
</div>
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粤菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰国菜</option>
</select>
<div>
<fieldset>
<legend>标题</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>
<label for=""></label>
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="women" name="sex">
<label for="women">女</label>
</div>
<span style=" 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一个span</span>
<strong>我是一个srtong</strong>
<div style=" 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<img src="图片名称.png" alt="">f
<input type="text">用户名
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"---单元格内边距 align="center"----表格内容对齐方式 style="border-collapse:collapse"----合并表格边框>
<caption>学生管理表</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>-------表示表格的列标题
<th>非得给第三</th>
</tr>--------------------------表示行（row）
<tr>
<td colspan="2">1-1</td>----表示列，单元格
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
colspan="2"列上两个单元格合并，占用相邻单元格的空间。
rowspan="2"行上两个单元格合并，占用相邻行上同位置单元格的空间。
表格的语义化，thead页眉，tbody主体内容，tfoot页脚。
placeholder：提供一种提示，描述输入域所期待的值。
块级元素有：div、表单、表格、标题、段落等。
行内元素有：图片，输入框、span、strong等。
两者的区别：
块级元素特点：
1、块级元素比较霸道，总是独占一行。
2、具有一定的宽高。其宽高与内容无关。
3、常用作容器，可以容纳行内元素和其他块级元素。
行内元素特点：
1、和其他行内元素都在一行上。
2、其宽高只与内容有关。
3、行内元素只能容纳文本或者其他行内元素，无法容纳块级元素。
4、内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。