一、认识HTML
1、什么是HTML？
hipertext超文本 、markup标记 、language语言
2、html 作用
标记是用来告诉文本的语义的，也就是告诉浏览器哪些是标题，哪些是段落。
注意：HTML的作用只有一个，它是用来给文本添加语义的，并不是改变其样式。
标签h1的作用
错误：h1标签是可以修改文字的大小，并且让文字加粗
正确：h1标签是专门给指定的文字添加语义，并告诉浏览器哪些文字是标题
3、HTML的发展史
HTML5 支持html1-4的规范 也支持XHTML1-1.1的规范
4、编写第一个html的页面
编写步骤：
1.新建文档，修改其后缀为.html。
若出现将文件名后缀修改为.html后仍无效的情况，则打开文件目录窗口上方的文件夹选项(选项)，在查看中的高级设置中找到隐藏已知文件类型的扩展名这一选项，并将勾选取消，重新尝试步骤一即可。
2.利用Notepad++打开。
3.编写html代码(html的结构)。
4.保存编写的html代码至源文件。
5.利用浏览器打开(千万别用IE，太坑了！！！)。
HTML的基本结构
<html>
<head>
<title>html标题</title>
</head>
<body>
html内容
</body>
</html>
注意：
成对出现
注意首行缩进(缩进不仅会让编程者自己的思路更清晰，更会增加程序的可读性）
title必须写在head里
5、字符集问题
在HTML中，文字制定的字符集必须和文件的字符集一致，否则就会出现乱码。
<head>
<meta charset=”字符集”>
</head>
ISO-8859-1：西方欧洲的字符。
GBK(GBK2312) ：中文汉字和常见的外文。
UTF-8 ：世界上所有的文字 (体积大)。
例如：
<meta charset=”UTF-8”>
那么企业开发中用哪个呢？(可以通过浏览器自己查看网页编码格式)
如果你的网站仅仅包含中文， 那么GBK体积小访问快，已经足够；如果你的网站中出现了中文以外的字符包含了其他国家的语言则UTF-8，体积大。
6、DTD文档声明
因为h5集合了html1-4的版本 XTHML1-1.1的版本所以编写网页的DTD声明 只需要编写H5即可。
<!DOCTYPE html> //文档的声明
注意点：
- 必须写在第一行。
- 不是一个html标签。
- 没有结束标签。
- 对大小写不敏感。
7、HTML和HTML5的区别
HTML和HTML5都是用来编写网页的。Html语法松散，容错性强。Xhtml更为严格，他对编写的要求很高，必须写闭合标签，必须加引号等。Html5除了语法松散，还增加了许多新特性。
8、Html 和htm的差别
win85/98的后缀名不能大于3位，而现在操作系统后缀允许大于3位，所以windows下无所谓3或4位。
二、html各类标签介绍
1.标题标签
<h1></h1> //一级
<h2></h2> //二级
<h3></h3> //三级
<h4></h4> //四级
<h5></h5> //五级
<h6></h6> //六级
作用:告诉浏览器哪些文本是标题
注意点：
- 标题标签只是添加语义，而不是修改其样式。
- 标题标签h1-h6，一共6个。
- 在企业开发中h1 只能使用一次。
2.段落标签
<p></p>
作用：告诉浏览器这段文字是段落。
注意：在浏览器中段落独占一行。
3.水平线标签
<hr>
作用：在页面中显示的水平线。
注意点：在浏览器中独占一行的。
4.图片标签
作用:在页面中插入图片。
格式:
<img src="" alt="" title="" height="" width="">
标签属性：src 图片的路径。
绝对路径：电脑的物理路径。
相对路径：相对自己本页面而言。
alt:图片无法显示，指定文字描述。
title：鼠标悬浮图片时，提示文字。
height:高。
width:宽。
注意：img标签不是独占一行的。
5.br标签
作用：换行。
注意点：
- 如果这段描述完了，则使用P标签换行。
- 如果这段没有描述完想换行，则使用br标签。
- 多个br标签可以连续使用，使用多少次就是换多少行。
但是在企业中，99%的换行都是因为段落的结束，而另起段落的 。
6.a标签
格式：
<a href="" >热点</a>
作用：从一个页面跳转到另一个页面。
属性：
- href：你要跳转的地址。
- target: 控制新的页面打开模式。
- _blank新打开一个页面显示 。
- _self覆盖原网页打开(默认值）。
注意点：
- 可以跳转本地页面也可以跳转外网（如www.baidu.com)。
- a标签不是独占一行的。
- 热点可以是图片也可以是文字。
- href必须指定目标地址，不然不知道跳转到何处。
7.假链接
作用:开发的时候，在页面并没有完全写好的情况下，为了避免用户体验差，一般做假链接。
格式:
<a href="#">热点</a>
<a href="javascript:">热点</a>
两者的区别：
- 会自动回到顶部(淘宝就是这么玩的，回到顶部)。
- javascript不会回到顶部
8.锚链接
作用：跳转到页面中的指定位置
格式：
<a href="#two">热点</a>
<p id="two">跳转的位置</p>
注意点：除了能跳转本页面指定的位置，还能跳转别的页面的指定的位置。
<a href="跳转页面的路径#two">热点</a>
三、什么是列表
作用：给一些数据添加列表语义，告诉浏览器这些数据是一个整体(列表)。
列表的分类
1.无序列表(用的最多的)
格式:
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
属性：type
属性值：
- dise 默认的为实心圆
- square 实心方
- circle 空心圆
注意点：
- 对整个无序列表添加样式点 必须写在ul标签里面
- 独占一行的
- 列表标签是可以嵌套的
应用场景：
- 商品列表的展示。
- 新闻的列表。
- 导航条。
快捷键：
- ul>li*n ：一个ul下面有n个li。
- ctrl+d ：复制当前行。
2.有序列表（用的比较少）
格式：
<ol>
<li></li>
<li></li>
...
</ol>
属性：type
取值：
- 默认的以数字排序
- a/A 以英文的大小写排序
- i/I 以罗马文数字的大小写排序
应用场景：同上
3.自定义列表
格式：
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
...
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
...
</dl>
应用场景：图文混排
四、表格
1.什么是表格
表格是一种数据的呈现形式，当数据量比较大的时候，表格的展现会让数据更加的清晰。
2.什么是表格标签
用来给一堆数据添加表格的语义。
格式：
<table> 表格
<tr> 行
<td></td><td></td><td></td>.... 列 内容写在td里面
</tr>
<tr>
<td></td><td></td><td></td>....
</tr>
</table>
3.表格中的属性:
- border:表格中的边框 默认情况下0 取值代表边框的粗细
- cellspacing 单元格与单元格之间的间距 默认为2个像素的
- cellspadding 单元格与内容之间的距离 默认1个像素
- width: 表格的宽度 默认情况下为内容的宽度
- height:表格的高度 默认情况下为内容的高度
- align: 水平对齐的方式： left center right 默认left
在table中设置 表格在浏览器中为 居左 居中 居右
在tr中设置 当前行的内容在表格中 居左 居中 居右
在td中设置 当前列(当前单元格)的内容在表格中 居左 居中 居右 - valign 垂直对齐方式 ： top middle bottom
在table中设置 无效
在tr中设置 当前行的内容在表格中 居上 居中 居下
在td中设置 当前列(当前单元格)的内容在表格中 居上 居中 居下 - bgcolor 设置表格的背景颜色
在table中设置 为整个表格添加背景颜色
在tr中设置 为当前行添加背景
在td中设置 为当前列(当前单元格)添加背景 - th（推荐不使用）
作用：给表格中的文字加粗 居中
<tr><td>XXX</td></tr>
<tr><th>XXX</th></tr>
注意:表格是独占一行的!
4.表格的结构
作用：由于表格中存储的数据比较复杂（标题 头 主体 尾巴）为了方便管理和阅读，我们必须要提升表格的语义，我们可以把表格分为4类。
结构：
<table>
<caption>表格的标题</caption>
<thead>
<tr><td></td><td></td></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
......
</tbody>
<tfoot>
<tr><td></td><td></td></tr>
</tfoot>
</table>
caption :指定表格的标题。
thead :指定表格的头。
tbody :指定表格的主体。
tfoot :指定表格的附加信息。
5.合并单元格
格式：
合并行 ：rowspan=“n” ，n代表合并几行。
合并列 ：colspan=“n” ，n代表合并几列。
注意点 : 写在td里面。
五、什么是表单
表单是用来收集用户填写的信息的。
1.什么是表单元素
什么是元素？
a:a标签 a标记 a元素
元素就是一种新的说法而已。
组成表单标签的元素。
表单元素
格式：
<form>
表单元素
</form>
快捷键 ：input:type的值 tab。
属性：value 输入框的默认值。
注意：表单元素不是独占一行的！
技术分析
(HTML的表单标签)
-
表单标签：
需要提交的表单需要使用<form></form>括起来。
action：提交路径。
method：提交方式 Get(获取数据) 和 Post(提交数据 Post 安全性较高) 。
文本框:<input type=”text”/>
name：控件的名称 (一组控件的名称)。
value ：控件的值。
size ：控件的长度。
maxlength：控件中文字的最大数量。
readonly：控件设置为只读的。
密码框：<input type=”password”/>
单选按钮：<input type=”radio”/>
Checked：默认选中
复选框：<input type=”checkbox”/>
下拉列表框：<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项：<input type=”file” name=”file”/>
文本域：<textarea name=”” cols=”” rows=””></textarea>
提交按钮：<input type=”submit” value=”注册”>
重置按钮：<input type=”reset” value=”重置”>
普通按钮：<input type=”button” value=”普通按钮”>
隐藏字段：<input type=”hidden” name=”id”/> -
提交方式
GET ：默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST ：
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制 -
文本框
格式:<input type="text">
提高用户输入的体验
1.给输入框添加id属性并赋值
2.把文字放入label标签
3.将label中添加for属性并赋值 值=id的值 -
密码框
格式：<input type="password"> -
单选按钮
格式：<input type="radio">男
注意：想要实现单选 表单radio的name属性值必须相同
如何默认选择 一个radio checked=“checked” -
多选按钮
格式：<input type="checkbox">读书
注意：实现默认选中 添加 checked属性 -
按钮
普通按钮：格式<input type="button" value="我是普通按钮">
注意：value 给按钮赋值【按钮的显示文字】
普通按钮结合js使用的 -
重置按钮
格式：<input type="reset" value="重置"> -
提交按钮
格式：<input type="submit" value="提交">
作用：把用户的输入信息提交到后台
注意点：提交到那里去？ form里 action指定提交地址 -
隐藏域
格式：<input type="hidden" name="" value="999">
文件元素<input type="file">
非input标签
1.下拉框
格式：
<select>
<option>苏州</option>
<option>非洲</option>
<option>八宝粥</option>
</select>
注意：下拉框不能输入内容。
添加selected默认选择该内容 selected=“selected”
2.文本域
格式：<textarea>
文本 :</textarea>
注意：默认情况下,可以无限换行。
默认情况下输入框有自己的宽和高
可以通过rows/cols来设置文本域的宽/高
文本域的宽高可以拉伸 （之后学习ＣＳＳ可控制其不被拉伸）
数据是如何过去的?
name属性 以键值对的形式传输的。
数据的提交方式是什么？
form里 method常见的两大提交方式 get/post。
六、HTML的框架
- 技术分析
HTML的框架标记( HTML5不支持<frameset>标签。)
<frameset></frameset>
注意点：使用了frameset标签，不需要使用body。 - 属性
rows：横向切分页面。
cols：纵向切分页面。
frameborder :是否显示框架边框 ( 0 、 1、 yes、 no)。
<frame>标签代表切分每个部分的页面
src：引入页面的路径.。
name 框架页面的名称。
noresize :禁止调整大。
scrolling : 是否显示滚动条。
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
