html入门
HTML 入门
一、HTML的概述
1、 HTML简介
l HTML(Hyper Text Markup Language)：超文本标记语言。
>标记就是标签
>HTML不是一种编程语言，而是一种标记语言
l 作用：
*就是用来写网页的
2、 HTML的书写规范。
a).HTML的创建
可以使用文本编辑器来创建，扩展名html或htm
可以被IE（浏览器）解析浏览的。
b).HTML的结构
<html>
<head>
<title></title>
</head>
<body></body>
</html>
l html
包裹了整个HTML 文件
l head
网页的说明信息。
它里面的内容是不会显示。
l body
负责显示页面的
它里面的内容是会显示的
l title
它是网页的标题
c).Html标签的规范
*Html是由一对尖括号包裹着的关键字组成的。例如：<title>
*HTML通常是成对出现的，是由一个开始标签和一个结束标签组成的。例如：<title></title>
特殊情况：
HTML的空标签。例如：<br/>
*HTML标签通常是有属性的。属性格式：属性名=”属性值” 可以用双引号、单引号或者不加引号。建议使用引号的。 例如：<font color="blue" size='22' face=隶书>真晴朗</font>
*HTML是可以嵌套使用的。（只允许包裹嵌套，不允许交叉嵌套）
*HTML是大小写不敏感的。推荐使用小写
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> 你好aaa </body> </html>
二、HTML的基本标签（链接标签、表格标签）
排版标签
l Br标签
*就是一个换行
l
*是一个空格
l HTML注释
*格式：<!--注释内容 -->
l P标签
*就是一个段落标签。段前段后各加一行
*属性：
>align 设置段落的对齐方式
l Hr标签（使用较少）
*就是一条水平线
*属性：
>color 设置水平线的颜色
>size 设置水平线的粗细
>width 设置水平线的长度
小知识：
1、HTML长度设置（了解）
像素：width =”6”或者width =”6px”
百分比：width =”80%”.它会随着浏览器改变而改变
2、 HTML的颜色设置（了解）
*颜色关键字 例如：red,blue,pink
*颜色代码。 例如：#000000。 每一位都是16进制。红色、绿色、蓝色
*三原色。 例如：rgb(0,0,0) 每一位取值0~255
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <p>静夜思</p> <p>李白</p> <p>床前明月光，</p> <p>疑是地上霜，</p> <p>举头望明月，</p> <p>低头思故乡。</p> <hr color="red" size="5" width="800"/> <hr color="blue" size="5" width="80%"/> </body> </html>
块标签
l Div
在文档中设定一个块区域
块级元素（自动换行）
l Span
在行内设定一个块区域
内联元素（不自动换行）
HTML绝大多数都属于块级元素或者内联元素
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div>我是DIV1</div> <div>我是DIV2</div> <span>我是SPAN1</span> <span>我是SPAN2</span> </body> </html>
字体标签（少）
l Font标签(少)
*设置字体的大小、颜色、字体类型
*属性：
>color 设置字体颜色
>size 设置字体大小
>face 设置字体类型。
l 标题标签（一般）
*h1~h6
*h1最大，h6最小
l 斜体、粗体标签（比较）
<i></i>
<b></b>
l 滚动字幕（不建议）
(marquee标签)
*只兼容IE，所以不建议使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <font size="7" color="red" face="JAVA体">你好aaa</font> <h1>aaaa</h1> <h2>aaaa</h2> <h3>aaaa</h3> <h4>aaaa</h4> <h5>aaaa</h5> <h6>aaaa</h6> <i>我是斜体</i> <b>我是粗体</b> <i><b>既是粗体又是斜体</b></i> <b><i>既是粗体又是斜体</i></b> </body> </html>
列表标签
l 有序列表(ol标签)
*属性
>type 设置有序列表的项目序号。 A,I,1
>start 设置有序列表的项目序号起始值。
l 无序列表(ul标签)（常用）
*属性：
>type 设置无序列表的项目标号。 （了解）
l 列表项条目（li标签）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <ol type="a" start="10"> <li>java</li> <li>.net</li> <li>php</li> </ol> <hr/> <ul type="square"> <li>java</li> <li>.net</li> <li>php</li> </ul> </body> </html>
图片标签(常用)
l <img />
*属性：
>src 设置图片引入路径的（常用）
>alt设置替代图片的文字（常用）
>width 设置图片的宽度
>height 设置图片的高度
>border 设置图片的相框宽度
>align 设置图片的对齐方式（不建议使用）
小知识：
1、绝对路径和相对路径（重要）
绝对路径：文件在硬盘上的具体位置。
相对路径：文件相对于引入者的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- src 设置图片的引用路径 相对路径和绝对路径 alt 设置图片的替代文字 绝对路径：就是文件在硬盘上的位置 相对路径：就是文件相对于引入者 --> <img src="../img/heima.jpg" width="500" height="300" border="5" alt="黑马"/> </body> </html>
链接标签（重点）
l <a></a>
*如果要实现跳转链接，那么必须有内容。例如：<a>内容</a>
*属性：
>href 设置链接路径（最常用）
访问内网：相对路径，绝对路径
访问外网：需要加上http协议。 例如：http://www.baidu.com
>name 设置锚点（次常用）
相当于（书签）
配合herf使用
设置锚点，a标签可以没有内容
>target 定位资源打开位置。（了解会用）
一般可以配合框架使用。
例如：<a href=”xx.html” target=”top”>打开</a>
<frame name=”top”/>
那么就是在名字为top的框架中打开。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- href 设置链接路径 内网：绝对路径和相对路径 外网：必须加上http:// name 设置锚点（书签） --> <a href="demo.html">我是超链接</a> <a href="http://www.baidu.com">百度</a> <a name="top"></a> <a href="#top">返回顶部</a> <a href="#middel">返回中间</a> </body> </html>
表格标签（重点）
年度统计
| 第一季度 |
第二季度 |
总共 |
| 100 |
100 |
400 |
| 100 |
100 |
|
|
|
|
|
| 平均100 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- td和th 单元格合并 colspan 列合并 rowspan 行合并 分行下载 --> <table border="1" width="100%" bgcolor="pink"> <caption>年度报告</caption> <tr> <th>第一季度</th> <th>第二季度</th> <th>总共</th> </tr> <tr> <td>100</td> <td>100</td> <td rowspan="2"> </td> </tr> <tr> <td>100</td> <td>100</td> </tr> <tr> <td colspan="2">平均100</td> <td> </td> </tr> </table> <table border="1" width="100%" bgcolor="pink"> <caption>年度报告</caption> <thead> <tr> <th>第一季度</th> <th>第二季度</th> <th>总共</th> </tr> </thead> <tbody> <tr> <td>100</td> <td>100</td> <td rowspan="2"> </td> </tr> <tr> <td>100</td> <td>100</td> </tr> </tbody> <tbody> <tr> <td>100</td> <td>100</td> <td rowspan="2"> </td> </tr> <tr> <td>100</td> <td>100</td> </tr> </tbody> <tbody> <tr> <td>100</td> <td>100</td> <td rowspan="2"> </td> </tr> <tr> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">平均100</td> <td> </td> </tr> </tfoot> </table> </body> </html>
l 表格标签
*table,用来定义一个表格
l 行标签
*tr，用来定义一个表格内的行
l 单元格标签
*td，用来定义一个单元格。
*th，用来定义一个表头单元格。默认居中加粗
*td及th属性：
>colspan 列合并
>rowspan 行合并
l 表格标题标签
*caption，用来定义一个表格标题
*必须紧跟在table标签之后
*一个表格只有一个标题
l 分组标签（了解会用）
*对表格中的行进行分组
*thead 定义表格的页眉。仅有一个
*tbody 定义表格的主体。一个或多个
*tfoot 定义表格的页脚。仅有一个
*如果在分组标签外定义了行，那么行默认属于TBODY
*分组标签如果使用必须三个一起使用，否则无效果。
分行下载：
可以控制表格分行下载，从而提高下载速度。
在需要分行下载处加上<tbody>和</tbody>。
公司年度报告
| 第一季度 |
第二季度 |
平均 |
| 100 |
100 |
100 |
| 100 |
100 |
|
| 400 |
|
|
三、HTML的表单标签（重点）
作用：表单用来提交用户输入的数据
l 表单标签：
*<form>,就定义了一个表单
*常用属性：
>action 规定当提交表单时，向何处发送表单数据
内网提交：绝对路径和相对路径
向外网提交：http://www.baidu.com
>method 规定如何发送表单数据(发送表单数据的方式)
post 和 get
默认是get
面试题：
表单提交 post和get的区别？
1、get方式提交会把参数显示在地址栏
post方式提交不会把参数显示在地址栏上
2、get方式敏感信息不安全
post方式敏感信息安全
3、get方式提交，官方限制提交大小仅1KB（但多数浏览器可以提交2KB）
post方式提交，提交大数据（提交附件用POST）
l 输入标签：
*input，定义了一个输入表单项，用来接收用户输入的信息。
*属性：
>type 指定输入标签的类型
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。非明文
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值
附件框 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。例如：照片
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。例如：用户编号
按钮 button 可以为其自定义事件。
图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时，会将鼠标点击图片的坐标一起封装。较少使用
>name 用来指定输入项的名称。即参数名称
>value 用来指定输入项的值。即参数值
>checked 用来设置单选框或者多选框的默认勾选。值为checked或true为默认选中
l 选择框标签
*select，定义了一个选择框
*属性：
>name 用来指定选择项的名称。即参数名称
*option，定义了一个选择框条目
*属性：
>value 用来指定选择项的值。即参数值
>selected 用来设置选择框的默认选中。值为selected为默认选中
l 文本域标签（常用）
*textarea，定义一个文本域输入框
*属性：
>name 用来指定文本域的名称，即参数名
>cols 定义文本域显示几列
>rows 定义文本域显示几行
和<input type=“text”/>区别：
1、文本域可以换行，而文本框不可以
2、文本域的值是写在内容体中的，文本框的值是在value中
注意：input select textarea 统称为表单项（表单输入项）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- form 就用来定义一个表单 action 就是定义了表单提交的位置 内网提交：绝对路径和相对路径 外网提交：必须加HTTP协议 method 就是定义了表单的提交方式 get 和 post 如果不设置。默认get 面试题： 表单的提交方式get和post有什么区别？ 1、get方式提交的数据显示在地址栏上 post方式提交的数据不会显示在地址栏上(请求体) 2、get方式提交的数据（敏感数据）不安全 post方式提交的数据（敏感数据）相对安全 3、get方式提交的数据最大是1kb post方式提交的数据没有限制的，是可以提交大数据的（提交附件一般用POST） input 就是用来接收用户输入的数据 type 输入框是什么类型的 text 文本框 password 密码框，非明文 radio 单选框，用name属性可以进行分组 checkbox 复选框，用name属性可以进行分组 submit 提交按钮，就是用来提交表单 reset 重置按钮，就是用来把表单恢复成默认状态 hidden 隐藏域，就是用来做例如用户编号等数据的存放 image 图片类型的提交按钮。提交表单时，会把鼠标点击图片的坐标传过去 button 按钮 name 用来定义输入框的名称，作为参数名 checked 就是单选框/多选框 的默认选中.值可以是checked也可以是true value 就是定义输入框的值 src 就是定义了图片（资源）的路径 select 就是选择框 name 就是用来定义选择框名称，作为参数名 size 就是用来定义选择框的显示的条目 option 就是选择框的条目 value 就是用来定义条目的值，如果不设置默认以内容体作为值提交 textarea 就是定义了一个文本域 name 就是用来定义文本域的名称，作为参数名 cols 设置文本域的列 rows 设置文本域的行 文本域和文本框的区别： 1、文本域可以换行，文本框不能 2、文本域的值是在内容体中，文本框值在value --> <!-- D:\workspace\ee16\day01\WebRoot\html\表单标签.html D:/workspace/ee16/day01/WebRoot/html/表单标签.html?sex=on&hobby=on&hobby=on 参数 name=value username=%E5%BC%A0%E4%B8%89 URL编码 --> <form action="http://www.baidu.com" method="post"> <!-- 用户编号(隐藏域)： --><input type="hidden" name="uid" /> 用户名：<input type="text" name="username"/><br/> 密码：<input type="password" name="pwd"/><br/> 性别：<input type="radio" name="sex" checked="checked" value="man"/>男 <input type="radio" name="sex" value="woman"/>女<br/> 爱好：<input type="checkbox" name="hobby" checked="checked" value="lq"/>篮球 <input type="checkbox" name="hobby" value="bq"/>编程 <input type="checkbox" name="hobby" value="yy"/>游泳<br/> 照片：<input type="file" name="photo"/><br/> 城市：<select name="city" size="3"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select><br/> 简介：<textarea cols="10" rows="10" name="jianjie">aaaaaa</textarea><br/> <input type="submit" value="注册"/> <input type="reset" value="取消"/> <input type="image" src="../img/heima.jpg"/> <input type="button" value="我是按钮"/> </form> </body> </html>
四、HTML的框架标签及特殊符号（了解）
其他标签（了解）
<meta> 定义了页面信息
*存在于<head>标签中
<link> 定义了文档和外部资源的关系
*存在于<head>标签中
*用来引入CSS文件
特殊符号（了解）
不断行的空白符
< < 小于号
> > 大于号
& & &符号（经常用于传参）
" “ 引号
® ® 已注册
© © 版权
框架标签（了解会用）
作用：将网页分割成几个部分，在每个部分分别显示不同内容。
注：框架标签不可以放到<body>里，一般为了代码的可读性，会到<head>和<body>之间。或者不要body也可以。
l frameset
表示框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。
*常用属性：
>cols 垂直切割。接收整数值或百分比。*代表占用剩余空间
>rows 横向切割。接收整数值或百分比。*代表占用剩余空间 吗
l frame
表示框架页面，用来承载页面，并修改参数属性值
*常用属性：
>src 表示资源的路径
>name 设置框架的名称
例如<frame name=“top”/> <a href=“xx.html” target=“top”>top中打开</a>。那么xx.html是在top框架中打开
框架已经逐渐被DIV+CSS形式取代
作业
1、 简述get和post提交方式的区别
2、 用table和form组合在一起写一个注册表单。
3、 DIV和SPAN的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <form action="" method="post"> <table border="1" width="50%"> <tr> <td>用户名：</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="sex" checked="checked" value="man"/>男 <input type="radio" name="sex" value="woman"/>女</td> </tr> <tr> <td>爱好：</td> <td><input type="checkbox" name="hobby" checked="checked" value="lq"/>篮球 <input type="checkbox" name="hobby" value="bq"/>编程 <input type="checkbox" name="hobby" value="yy"/>游泳</td> </tr> <tr> <td>照片：</td> <td><input type="file" name="photo"/></td> </tr> <tr> <td>城市：</td> <td><select name="city" size="3"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select></td> </tr> <tr> <td>简介：</td> <td><textarea cols="10" rows="10" name="jianjie"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"/><input type="reset" value="取消"/></td> </tr> </table> </form> </body> </html>