html的基础
前端主要由三大块组成：
1、Html网页内容的载体，是“结构层”
2、Css对页面进行修饰，是“表现层”
3、Javascript实现页面特效（动画、交互），是“行为层”
一、认识html
1、定义：超文本标记语言。
超文本：音频、视频、图像等；
标记：标签。
2、开发环境：文本编辑工具—sublime
优点：轻量级，开发速度快
使用sublime时，用“ctrl+n”新建文件，“ctrl+s”保存文件
注意：输入文件名时要自己添加后缀“.html”。
3、运行环境：浏览器 谷歌，火狐，IE，opera
二、html5结构
<!DOCTYPE html>版本标识html5
<html lang="en">语言是：English
<head>
<meta charset="UTF-8">使用meta标签中的属性charset，防止中文乱码
<title>Document</title>页面标题
</head>
<body>
内容
</body>
</html>
三、html常用标签（标签有语义）
1、p标签：段落标签，用来存放大量的文字
特征：（1）默认宽度是父元素宽度的100%
（2）可以设置宽/高
（3）独占一行
2、h标签：标题标签
特征：（1）h1-h6 字体由大到小，默认加粗
（2）默认宽度是父元素宽度的100%
（3）可以设置宽/高
（4）独占一行
这是标题一</h1>
这是标题二</h2>
...
这是标题六</h6>
注意：h1标签在一个页面上只能使用一次，与SEO（搜索引擎）有关：优先选择title“网页标题”相关内容，其次选择h1相关内容，h1多写会被SEO认为滥用。
3、div和span标签：没有任何语义，用来实现页面布局
（1）div：是一个块元素，无语义，可以包含其他html标签，可以将网页分为几个区块，用于排版布局。
（2）Span：是一个行内元素，通常用来定义一小段文字样式。
特征：a.同一行显示，
b.宽度由内容决与p标签不同，不换行</span>
注意：与标签区分开。
可以使用“p*3 “ctrl+e””直接生成三行<p></p>，span一样
4、格式化标签（都是双标签、行内元素，格式化标签可嵌套）
（1）<b>：粗体文字（bold）
（2）<strong>：粗体，加重语义
（3）<big>：大号字
（4）<em>：斜体（emphasized），加重语义
（5）<i>：斜体（italic）
（6）<small>：小号字
（7）<sub>：下标字（subscript）
（8）<sup>：上标字（superscript）
（9）<del>：删除字
注意：（1）“<strong>与<b>”，“<em>与<i>”这两组语义相同，但SEO在搜索时会优先筛选加重语义的标签信息。
（2）i：icon（小图标意思），图标首选<i>标签。
5、img标签（单标签，为网页插入图片）
<img src=”地址” alt=”图片加载失败” width=”宽” hight=”高” title=”我是一幅图”>
（1）src：规定显示图片的URL（地址/存放位置），可以是gif、PNG、JPEG等；
（2）alt：图片加载失败后的显示文本；
（3）title：图片加载成功时鼠标滑过显示的文本。
注意：<1>绝对路径：
a.网络地址：http://img/.../image.jpg
b.从盘符开始的路径：C:\Users\images\go.jpg
<2>相对路径：
a.当图片所在文件夹与当前的html文件在同一个文件夹时（同一层）：src=”images/go.jpg”
b.不在同一层：src=”../imgages/yes.jpg”
6、a标签：双标签，插入链接
<a href=”http://www.baidu.com” target=”_blank” title=”进入百度”>百度 </a>
四种状态：
（1）link 访问前 黑色
（2）visited 访问后 紫色
（3）hover 悬停时 可设置颜色
（4）active 按住不放 红色
属性：
（1）href：规定链接指向的页面的URL
（2）target：在何处打开
默认是“_self ”在当前窗口打开；
“_blank”在新窗口打开
★各种链接类型★：
（1）文字链接
<a href=”mi.html”>小米手机</a>
（2）图片链接
<a href=”mi.html”><img src =”images/mi.jpg” alt=”红米”></a>
（3）空链接
<a href=”#”>空链接</a> ##可多个
不进行页面跳转，但显示网址
<a href=”javascript:;”>空链接</a>
不进行页面跳转也不显示网址
（4）锚点链接：可以连接到同一页面的指定位置
步骤：1.在被连接的位置上输入id：<p id=”mi4”>..</p>
2.在建立连接的对象上添加a标签：
<a href=”#mi4”>小米手机4</a>
7、高级标签table（tr行，td 列）
1.属性：（1）border：加边框
（2）cellspacing：单元格边沿与内容间距
（3）cellpadding：单元格边沿之间间距
（4）colspan：列跨度
（5）rowspan：行跨度
例1：<table border="1">
<tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td></tr>
<tr><td>小丽</td><td>88</td><td>87</td> <td>66</td></tr>
</table>
例2：
<table width="55%" height="123" border="1" cellpadding="1" cellspacing="1">
<tr><td colspan="2" align="center"><h3>菜单</h3></td>
<td rowspan="2" width="34%" align="center">备注</td>
</tr>
<tr><td>青椒炒肉</td><td>糖醋里脊</td></tr>
</table>
2.结构：
多个<th>..</th></thead>可省略
多个<td>..</td></tbody>
多个<td>..</td></tfoot>可省略
8、form表单
1.应用场景：登陆页面、注册页面、搜索等跟服务器进行数据传递的地方。
2.表单元素：
（1）action：它的值是form表单需要提交的地址
Img和a标签的路径
（2）mathod属性取值（默认get）：
get：信息追加到URL后面，不安全
post：不将信息追加到URL后边，安全，但效率低于get
（3）input中type属性取值：
<1>text：文本输入
<2>password：密码
<3>checkbox：复选框
<input type="checkbox" checked="checked">1
<input type="checkbox">2
<input type="checkbox">3
<4>radio：单选按钮
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
注意：指定相同的name，才能实现互斥，即只选一个,返回值value代表信息
<5>submit：自动提交按钮（不同的浏览器默认显示的不一样，例如“提交”、“登陆”、“自动提交”等，可以用value定义）
<6>button：普通按钮
<input type="button" value="button按钮">=button按钮</button>
<7>reset:重置
<input type="reset"><br>
<8>hidden：隐藏域
<hidden value="我妈不让我跟傻子玩"></hidden>
<9>fiel：文件域
<input type="file"><br>
<10>image：图片域
<input type="image" src="picture/yes.jpg"
height="100" width="100"><br>
3.其它标签：
（1）textarea：多行文本框
<textarea name="textarea" id="" cols="30"
rows="10"></textarea><br>
（2）select：下拉框
属性：Size:显示行数；multiple：默认选择三个。
<select name="" id="" size="3" multiple="2">
<option value="zz">郑州</option>
...
信阳</option>
</select><br>
（3）label：将label属性“for”与input属性“id”绑定
点击label文本，对应id的input标签获取交代
方式一：<input type="radio" name="sex" value="0" id="women">女
<label for="women">女</label>
方式二：<label>用户名：
name="username"></label>
（4）fieldset打包：
<fieldset><ledend>是标题哦</ledend>
<input type="text">
<input type="password">
</fieldset>
带格式粘贴：ctrl+shift+v
四、什么是标签语义化？
1、合适的标签做合适的事情
2、不需要添加CSS，也可以看到页面结构，结构清晰
3、有利于SEO搜索
4、推荐使用有语义的标签，少用无语义的标签
