HTML 1、HTML的概述 1.1、HTML简介 l HTML(Hyper Text Markup Language)：超文本标记语言。 >标记就是标签 >HTML不是一种编程语言，而是一种标记语言 l 作用： 就是用来写网页的 1.2、HTML的书写规范 a).H ...
HTML
1、HTML的概述
1.1、HTML简介
l HTML(Hyper Text Markup Language)：超文本标记语言。
>标记就是标签
>HTML不是一种编程语言，而是一种标记语言
l 作用：
就是用来写网页的
1.2、HTML的书写规范
a).HTML的创建
可以使用文本编辑器来创建，扩展名html或htm
因为windows之前不支持3个以上的拓展名，后来才逐渐完善，所以html和htm本质是一样的
可以被IE（浏览器）解析浏览的。
b).HTML的结构
<html>
<head>
<title></title>
</head>
<body></body>
</html>
c).Html标签的规范
*Html是由一对尖括号包裹着的关键字组成的。例如：<title>
*HTML通常是成对出现的，是由一个开始标签和一个结束标签组成的。例如：<title></title>
特殊情况：
HTML的空标签。例如：<br/>
*HTML标签通常是有属性的。属性格式：属性名=”属性值” 可以用双引号、单引号或者不加引号。建议使用引号的。 例如：<font color="blue" size='22' face=隶书>真晴朗</font>
*HTML是可以嵌套使用的。（只允许包裹嵌套，不允许交叉嵌套）
*HTML是大小写不敏感的。推荐使用小写
2、HTML的基本标签（链接标签、表格标签）
2.1、文件标签
l <html>标签
声明了该文档是一个HTML文档。
包裹了整个HTML 文件
l <head>标签
网页的说明信息。
它里面的内容是不会显示。
l <title>标签
它是网页的标题
l <body>标签
负责显示页面的
它里面的内容是会显示的
*属性：
>text 设置body标签中正文的颜色
>background 设置body背景图片
>bgcolor 设置body的背景颜色
2.2、排版标签
l <br/>标签
*就是一个换行
l
*是一个空格
l HTML注释
*格式：<!--注释内容 -->
l <p>标签
*就是一个段落标签。段前段后各加一行
*属性：
>align 设置段落的对齐方式
l <hr/>标签
*就是一条水平线
*属性：
>color 设置水平线的颜色
>size 设置水平线的粗细
>width 设置水平线的长度
扩展：
1、HTML长度设置（了解）
像素：width =”6”或者width =”6px”
百分比：width =”80%”.它会随着浏览器改变而改变
2.3、块标签
l <div>
在文档中设定一个块区域
块级元素（自动换行）
l <span>
在行内设定一个块区域
内联元素（不自动换行）
HTML绝大多数都属于块级元素或者内联元素
2.4、字体标签
l <font>标签
*设置字体的大小、颜色、字体类型
*属性：
>color 设置字体颜色
>size 设置字体大小 取值范围 1~7
>face 设置字体类型。
l 标题标签
*h1~h6
*h1最大，h6最小
l 斜体、粗体标签
<i></i>
<b></b>
2.5、列表标签
l 有序列表(ol标签)
*属性
>type 设置有序列表的项目序号。 A,I,1
>start 设置有序列表的项目序号起始值。
l 无序列表(ul标签)（常用）
*属性：
>type 设置无序列表的项目标号。
l 列表项条目（li标签）
2.6、图片标签
l <img />
*属性：
>src 设置图片引入路径的（常用）
>alt设置替代图片的文字（常用）
>width 设置图片的宽度
>height 设置图片的高度
>border 设置图片的相框宽度
>align 设置图片的对齐方式（不建议使用）
2.7、链接标签（重点）
l <a>
*如果要实现跳转链接，那么必须有内容。例如：<a>内容</a>
*属性：
>href 设置链接路径（常用）
访问内网：相对路径或者绝对路径
访问外网：需要加上http协议。 例如：http://www.baidu.com
>name 设置锚点（常用）
配合herf使用
设置锚点，a标签可以没有内容
>target 定位资源打开位置。
一般可以配合框架使用。
例如：<a href=”xx.html” target=”top”>打开</a>
<frame name=”top”/>
那么就是在名字为top的框架中打开。
2.8、表格标签（重点）
l 表格标签
*table,用来定义一个表格
l 行标签
*tr，用来定义一个表格内的行
l 单元格标签
*td，用来定义一个单元格。
*th，用来定义一个表头单元格。默认居中加粗
*td及th属性：
>colspan 列合并
>rowspan 行合并
l 表格标题标签
*caption，用来定义一个表格标题
*必须紧跟在table标签之后
l 分组标签
*对表格中的行进行分组
*thead 定义表格的页眉。仅有一个
*tbody 定义表格的主体。一个或多个
*tfoot 定义表格的页脚。仅有一个
*如果在分组标签外定义了行，那么行默认属于TBODY
*分组标签如果使用必须三个一起使用，否则无效果。
分行下载：
可以控制表格分行下载，从而提高下载速度。
在需要分行下载处加上<tbody>和</tbody>。
3、HTML的表单标签（重点）
作用：表单用来提交用户输入的数据
3.1、表单标签
*<form>,就定义了一个表单
*常用属性：
>action 规定当提交表单时，向何处发送表单数据。（默认向本页提交）
向外网提交：需要加http协议，
例如：http://www.baidu.com
向内网提交：相对路径和绝对路径
>method 规定如何发送表单数据
HTML中分为两种：
post 和 get
默认是get
面试题：
表单提交 post和get的区别？
1、get方式提交会把参数显示在地址栏
post方式提交不会把参数显示在地址栏上。（请求体中）
2、get方式敏感信息不安全
post方式敏感信息安全
3、get方式提交，官方限制提交大小仅1KB（但多数浏览器可以提交2KB）
post方式提交，提交大数据
get方式发送表单数据：
地址栏上：?参数名1=参数值1&参数名2=参数值2
Post方式发送表单数据：
请求体中
3.2、输入标签
*input，定义了一个输入表单项，用来接收用户输入的信息。
*属性：
>type 指定输入标签的类型
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。非明文
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值
附件框 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。例如：照片
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。例如：用户编号
按钮 button 可以为其自定义事件。
图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时，会将鼠标点击图片的坐标一起封装。较少使用
>name 用来指定输入项的名称。即参数名称
>value 用来指定输入项的值。即参数值
>checked 用来设置单选框或者多选框的默认勾选。值为checked为默认选中
>src 当type=”image”时，该属性用来引入图片
3.3、选择框标签
*select，定义了一个选择框
*属性：
>name 用来指定选择项的名称。即参数名称
> multiple 用来设置选择框为多选形式
*option，定义了一个选择框条目
*属性：
>value 用来指定选择项的值。即参数值
如果未设置value属性，那么默认提交的是<option>标签的内容体
>selected 用来设置选择框的默认选中。值为selected为默认选中
3.4、文本域标签
*textarea，定义一个文本域输入框
*属性：
>name 用来指定文本域的名称，即参数名
>cols 定义文本域显示几列
>rows 定义文本域显示几行
和<input type=“text”/>区别：
1、文本域可以换行，而文本框不可以
2、文本域的值是写在内容体中的，文本框的值是在value中
作业 ： 用table和form组合在一起写一个注册表单。（用form嵌套table）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用户注册</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body> <form action=""> <table> <tr> <td>用户名</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="woman">女</td> </tr> <tr> <td>爱好</td> <td><input type="checkbox" name="hobby" value="lol">英雄联盟 <input type="checkbox" name="hobby" value="lushi">炉石传说 <input type="checkbox" name="hobby" value="dota2">dota2</td> <tr> <td>所在城市</td> <td><select name="city"> <option value="beijing" selected="selected">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenhzhen">深圳</option> </select></td> </tr> </tr> <tr> <td>照片</td> <td><input type="file" name="photo"></td> </tr> <tr> <td>简介</td> <td><textarea rows="10" cols="20"></textarea></td> </tr> <tr> <td><input type="submit" value="提交"></td> <td><input type="reset" value="重置"></td> </tr> </table> </form></body></html>
原标题：JAVA Web day01
关键词：JAVA
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
