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="width: 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一个span</span><strong>我是一个srtong</strong>
<div style="width: 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、内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
转载于:https://www.cnblogs.com/zacy110/p/5427543.html
