一、HTML第一个语言
<html> <head> //浏览器的头部信息 <title>我的第一个网页</title> //标题 </head> <body> 欢迎来到我的学校 </body> </html>注意事项
文件后缀名以 .html 结尾
在编写代码的过程中，< > 必须是英文状态下编写
HTML5介绍
HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>
标签有两种表现形式：
双标签，例如：<html></html>
单标签，例如：<img>
HTML5的DOCTYPE声明
DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前.
它是网页必备的组成部分，避免浏览器的怪异模式。
<!DOCTYPE html>
HTML5基本骨架
html标签
定义HTML文档，这个元素我们浏览器看到后就明白这是一个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
<!DOCTYPE html> <html> </html>
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html> <html> <head> </head> </html>
body标签
body元素定义文档的主体。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
title标签
可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
title 标签是 head 标签中唯一必须要包含的东西，就是说写head一定要写title。
title 的增加有利于SEO优化
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
meta标签
meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset = "utf-8"是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8.
<!DOCTPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>itbaizhan</title> </head> <body> </body> </html>
标题介绍与应用
标题（Heading）是通过<h1>-<h6>标签进行定义的。
h1 定义最大的标题，<h6>定义最小的标题
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>生成 h1~h6 快捷键：h$*6
标题标签位置摆放
在标签中添加属性：align = "left | center | right" 默认居左
标签之段落、换行、水平线
段落标签：<p> </p>
<p>这是一个段落</p> <p>这是另一个段落</p>换行标签：
<p>如果您希望在不产生一个<br/>新段落的情况下进行换行</p>水平线标签：<hr/>
<hr color="" width="" size="" align=""/>属性：
color：设置水平线的颜色
width：设置水平线的长度
size：设置水平线的高度
align：设置水平线的对齐方式（默认居中），可取值：left | center | right
标签之图片
img 标签定义HTML页面中的图像
<img src="" alt="" title="" width="" height="">注意事项
img 是单标签，不需要进行闭合操作
属性：
src：路径（图片地址与名字）
alt：规定图像的替代文本
width：规定图像的长度
height：规定图像的高度
title：鼠标悬停在图片上给予提示
图片路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\DAGENGREN\1.jpg<img src="E:\DAGENGREN\1.jpg">相对路径
两者相对关系，两者在同一路径下可以直接访问
子父关系：/
父级关系：../
同级关系：./（可以省略）
网络路径
具体的网络地址：xxx
<img src="xxx">
标签之超文本链接
HTML使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a href="url">链接文本</a>超链接属性
在标签 <a> 中使用了 href 属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
一个未访问的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
标签之文本
常用文本标签
列表标签之有序列表
有序列表
有序列表时一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol> <li>码学堂</li> <li>程序员</li> </ol>type属性
ol 的属性type拥有的选项
有序列表嵌套
列表是可以进行嵌套的
<ol> <li>尚学堂</li> <li> <ol> <li>阿里</li> <li>京东</li> </ol> </li> <li>百战程序员</li> </ol>
列表标签之有序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圈圈）进行标记
无序列表始于 <ul>标签。每个列表项始于 <li> 标签
<ul> <li>尚学堂</li> <li>百战程序员</li> </ul>type属性
无序列表嵌套
列表是可以进行嵌套的
<ul> <li>尚学堂</li> <li> <ul> <li>阿里</li> <li>京东</li> </ul> </li> <li>百战程序员</li> </ul>常见应用场景
无序的列表效果
导航效果
快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的 li 数量来修改）
标签之表格
表格标签
表格：<table>
行：<tr>
单元格（列）：<td>
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>快捷键
快速生成表格结构：table>tr*2td{单元格}
表格属性
border：设置表格的边框
width：设置表格的长度
height：设置表格的高度
表格单元格合并
水平合并：colspan （保留左边，删除右边）
垂直合并：rowspan （保留上边，删除下边）
<table border="3" width="500px" height="200px"> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <td colspan="2">单元格6 单元格7</td> <td rowspan="3">单元格8单元格13单元格18</td> <td>单元格9</td> <td>单元格10</td> </tr> <tr> <td>单元格11</td> <td>单元格12</td> <td>单元格14</td> <td rowspan="2">单元格15单元格20</td> </tr> <tr> <td colspan="2" rowspan="2">单元格16,17,21,22</td> <td>单元格19</td> </tr> <tr> <td>单元格23</td> <td>单元格24</td> <td>单元格25</td> </tr> </table>输出到的表格
From表单
用户输入，让网站具有交互性
表单在web网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框
表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件
<from action="url" method="get|post" name="myform"></from>属性说明
action：服务器地址
name：表单名称
method中Get和Post的区别
数据提交方式，get把提交的数据 url 可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
表单标签
表单域
表单按钮
<from> <input type="text"> <input type="submit"> </from>
表单元素
文本框
文本域通过<input type="text">标签设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域
<from> First name：<input type="text" name="fristname"> <br/> Last name：<input type="text" name="lastname"> </from>密码框
密码字段通过标签<input type="password">来定义
<from> password：<input type="password" name="pwd"> </from>温馨提示
密码字段字符不会明文显示，而是以星号或圆点替代
提交按钮
<from name="input" action="url" method="get"> Username：<input type="text" name="user"> <input type="submit" value="Submit"> </from>
元素分类
内联元素和块级元素的区别
常见的块级元素
div、from、h1~h6、hr、p、table、ul等常见的内联元素
a、b、em、i、span、strong等行内快级元素（特点：不换行、能够识别长高）
button、img、input等
HTML5新增标签
扩展知识
div 容器元素，也是页面中见到的最多的元素
