html在线文档:
怎么创建文件我已经会了
1,html快速入门
<!--文档类型说明 注释 -->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-US -->
<html lang="en">
<!--html头 -->
<head>
<!--charset文件的字符集-->
<meta charset="UTF-8">
<!--文件标题-->
<title>船儿很奶思</title>
</head>
<!--body体,主体部分-->
<body>
<!--内容-- 注释的快捷键 ctrl + />
hello,小船
</body>
</html>
2,标签基本说明和使用细节
<!--文档类型说明 注释 -->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国美国 en-US -->
<html lang="en">
<!--html头 -->
<head>
<!--charset文件的字符集-->
<meta charset="UTF-8">
<!--文件标题-->
<title>船儿很奶思</title>
</head>
<!--body体,主体部分-->
<body>
<!--内容-- 注释的快捷键 ctrl + / -->
hello,小船
<!--双标签-->
<span></span>
<!--单标签-->
<!--画一条横线-->
<hr/>
<!--换行-->
mary <br/>
smith
<!--
标签使用细节:
1,标签不能交叉嵌套
2,标签必须正确关闭
3,注释不能嵌套
4,html 语法不严谨。有时候标签不闭合,属性值不带 "" 也不报错
-->
<!--1,标签不能交叉嵌套-->
<!--<div><span>tom</span></div> 正确用法-->
<!--<div><span>tom</div></span> 错误用法-->
<!--2,标签必须正确关闭-->
<span>jack</span>
<!--3,注释不能嵌套-->
<!--4,html 语法不严谨。有时候标签不闭合,属性值不带 "" 也不报错-->
<font color="red">张飞</font>
<font color=blue>关羽</font>
<br/>
</body>
</html>
3,font标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--字体标签
应用标签 1:在网页上显示 北京,并修改字体为 微软雅黑,颜色为蓝色。
font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
(1)color 属性修改颜色
(2)face 属性修改字体
(3)size 属性修改文本大小
多说一句,对应标签的属性,顺序不做要求
-->
<font size="40px" face="微软雅黑" color="red">北京</font>
</body>
</html>
4,字符实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--特殊字符 应用实例:
把 <hr/> 变成文本 显示在页面上
常用的特殊字符
< : <
> : >
空格 :  
-->
jack
<!--浏览器会将 <hr/> 解析成一条线-->
<hr/>
<hr/>
<!--无论打出多少个空格,浏览器中认为一个空格,所以要用特殊字符替换-->
smith smith2 hsp<br/>
smith smith2 hsp<br/>
</body>
</html>
5,标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签
应用实例:演示标题1 到 标题6的
h1 - h6 都是标题标签 h1:最大 h6:最小
align:属性是对齐属性
left:左对齐(默认)
center:居中
right:右对齐
-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>
6,超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
a 标签是 超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self:表示当前页面(默认值),即使用当前替换目标页
_blank:表示打开新页面来进行跳转
点击超链接,打开邮件
-->
<a href="http://www.sohu.com">搜狐</a><br/>
<a href="http://www.sohu.com" target="_blank">搜狐2</a><br/>
<a href="mailto:tom@sohu.com">联系管理员</a>
</body>
</html>
点击页面的过程可以自己运行代码后看
7,列表标签(无序列表和有序列表)
7.1,无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ul:表示无序列表
li:列表项
type:指定列表项前的符号
disc:实心圆点
circle:空心圆
square:空心正方形
-->
<h1>五虎将</h1>
<ul type="circle">
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
</ul>
</body>
</html>
7.2,有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ol:表示有序列表
li:列表项
type属性:指定列表项前的排序方式
type 设定数目款式,其值有5种,默认为 start="1"。
可以取以下值中的任意一个:
1 阿拉伯数字 1,2,3,...
a 小写字母 a,b,c...
A 大写字母 A,B,C
i 小写罗马数字 i,ii,iii,...
I 大写罗马数字 I,II,III,...
-->
<h1>五虎将</h1>
<ol>
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
</ol>
</body>
</html>
从第3个大写字母开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ol:表示有序列表
li:列表项
type属性:指定列表项前的排序方式
type 设定数目款式,其值有5种,默认为 start="1"。
可以取以下值中的任意一个:
1 阿拉伯数字 1,2,3,...
a 小写字母 a,b,c...
A 大写字母 A,B,C
i 小写罗马数字 i,ii,iii,...
I 大写罗马数字 I,II,III,...
-->
<h1>五虎将</h1>
<ol type="A" start="3">
<li>关羽</li>
<li>张飞</li>
<li>赵云</li>
<li>马超</li>
<li>黄忠</li>
</ol>
</body>
</html>
8,图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
应用实例:使用 img 标签显示照片。
img: 标签是图片标签,用来显示图片
src: 属性可以设置图片的路径
width: 属性设置图片的宽度
height: 属性设置图片的高度
border: 属性设置图片边框大小
alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在 web 中路径分为相对路径和绝对路径两种
相对路径: . 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径: 正确格式是: http://IP 地址:port/工程名/资源路径,即使用url方式定位资源
错误格式是: 盘符:/目录/文件名
-->
<h1>图片标签的演示</h1>
<!--./imags/people.png 表示当前路径下的 imags文件夹下的 people.png-->
<!--在进行图片缩放时,建议指定 width 或者 height 即可,浏览器会按照比例显示-->
<img src="./imags/people.png" width="600"><br/>
<img src="./imags/people.png" width="600" border="10px"><br/>
<img src="./imags/1.png" alt="找不到">
</body>
</html>
9,表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--说明:
table: 标签是表格标签 border: 设置表格标签
width: 设置表格宽度 height: 设置表格高度
align: 设置表格相对于页面的对齐方式
cellspacing: 设置单元格间距
tr :是行标签 th :是表头标签 td :是单元格标签
align: 设置单元格文本对齐方式 b :是加粗标签
-->
<table width="500" height="200" align="center" border="6">
<h1 align="center">表格标签的使用</h1>
<tr>
<th>名字</th>
<th>地址</th>
<th>邮件</th>
</tr>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>
10,表格跨行跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--说明:
合并列 : colspan="列数"
合并行 : rowspan="行数"
cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙
bordercolor: 指定表格边框的演示
border: 表格边框
width: 表格的宽度
思路:
1,先把整个表格的完整的行和列,展示
2,在使用合并的技术,来处理
-->
<table width="500" height="200" align="center" border="2" cellspacing="0" bordercolor="pink">
<h1 align="center">表格标签的使用</h1>
<tr>
<!--合并了3列-->
<td colspan="3" align="center">第1行第1列</td>
</tr>
<tr>
<!--合并行,跨行 row行,第3行第1列就要删了-->
<td rowspan="2">第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<tr>
<!--合并行,跨行 row行,第5行第1列就要删了-->
<td rowspan="2">第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
<tr>
<td>第5行第2列<img src="./imags/people.png" width="100"></td>
<td>第5行第3列</td>
</tr>
</table>
</body>
</html>
11,表单标签和小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--说明:
1. form 表示表单
2. action: 提交到哪个页面
3. method: 提交方式 ,常用 get 和 post
4. input type=text 输入框
5. input type=password 密码框
6. input type=submit 提交按钮
7. input type=reset 重置按钮
为了个汉字对齐,输入全角的空格即可
多说一句: method 不写默认是 get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
用户名:<input type="text" name="username"><br/>
密 码:<input type="password" name="username"><br/>
<input type="submit" value="登录"> <input type="reset" value="重新填写">
</form>
</body>
</html>
ok.html 页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录成功</title>
</head>
<body>
<h1>恭喜你登录成功!</h1>
</body>
</html>
12,表单综合案例和表单格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单格式化</title>
</head>
<body>
<!--说明:
form 标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中 input
type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)
select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中韩顺平 Java 工程师
textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
老师提醒,一定一定使用 form 标签将 input 元素包起来
一定一定要给 input 元素设置 name 属性,否则,数据提交不到服务器
注意:checkbox 是复选框,如果希望是同一组 保证 name 属性一致
注意:在 checkbox select radio 提交数据的时候是 value 属性的值
-->
<form>
<h1>用户注册信息</h1>
<table>
<tr>
<td>用户名称: </td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>用户密码: </td>
<td><input type="text" name="pwd1"></td>
</tr>
<tr>
<td>确认密码: </td>
<td><input type="password" name="pwd2"></td>
</tr>
<tr>
<td>选择你喜欢的运动项目: </td>
<td><input type="checkbox" name="sport" value="lq">篮球
<input type="checkbox" name="sport" value="zq" checked>足球
<input type="checkbox" name="sport" value="pq" checked>排球</td>
</tr>
<tr>
<td>请选择性别: </td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td>请选择城市: </td>
<td> <select name="city">
<opiton>--请选择--</opiton>
<option value="cd">西安</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select></td>
</tr>
<tr>
<td>自我介绍: </td>
<td><textarea rows="6" cols="10"></textarea></td>
</tr>
<tr>
<td>选择你的文件(头像): </td>
<td><input type="file" name="myfile"></td>
</tr>
<tr>
<td><input type="submit" value="提交"/> <input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
13,表单提交注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交数据的注意事项和细节!</title>
</head>
<body>
<!--说明:
老韩解读 表单必须掌握!!!!
1. action 表示将 form 表单的数据提交给哪个 url,即服务器的哪个资源(servlet)
2. method 表示提交的方式 主要是 get / post, 默认是 get韩顺平 Java 工程师
3. 如果 form 表单的元素,没有写 name 属性,则数据不会提交
4. 对应 select checkbox radio 标签,提交的数据是 value 指定的值
5. 对应 checkbox 复选框,可以提交多个字,但是 name 是统一的,都是 sport sprot=xx&sport=yy这样提交的
6. 提交的数据,一定要放在 form 标签内,否则数据不会提交
Get请求特点:
1. Get 请 求 数 据 是 显 示 在 浏 览 器 地 址 栏
http://localhost:63342/html/ok.html?username=&pwd1=&pwd2=&sport=zq&sport=pq&city=cd&myfile=
2. Get 请求不安全的,而且数据是有长度限制的(不同的浏览器规定不一样), 建议有重要信息,不要使用 Get
post请求特点:
1. 浏览器地址栏中只有action属性值,提交的数据是携带在http请求中,不会展示在地址栏 http://localhost:63342/html/ok.html
2. Post 请求数据是和 http 传输的,在 http 体中,相对安全
3. Post 传输的数据长度理论上没有限制,但是在实际的应用中,也不能太大 , 即合理即可
-->
<form action="ok.html">
<h1>用户注册信息</h1>
<table>
<tr>
<td>用户名称: </td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>用户密码: </td>
<td><input type="text" name="pwd1"></td>
</tr>
<tr>
<td>确认密码: </td>
<td><input type="password" name="pwd2"></td>
</tr>
<tr>
<td>选择你喜欢的运动项目: </td>
<td><input type="checkbox" name="sport" value="lq">篮球
<input type="checkbox" name="sport" value="zq" checked>足球
<input type="checkbox" name="sport" value="pq" checked>排球</td>
</tr>
<tr>
<td>请选择性别: </td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女</td>
</tr>
<tr>
<td>请选择城市: </td>
<td> <select name="city">
<opiton>--请选择--</opiton>
<option value="cd">西安</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select></td>
</tr>
<tr>
<td>自我介绍: </td>
<td><textarea rows="6" cols="10"></textarea></td>
</tr>
<tr>
<td>选择你的文件(头像): </td>
<td><input type="file" name="myfile"></td>
</tr>
<tr>
<td><input type="submit" value="提交"/> <input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
14,div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div标签</title>
</head>
<body>
<!--
1. <div> 标签可以把文档分割为独立的、不同的部分
2. <div> 是一个块级元素。它的内容自动地开始一个新行,不需要写<br/>
3. style : 样式-> CSS 详细介绍, 先简单的使用,混个眼熟
-->
hello world
<div>
<h3 style="color:pink">this is a h3</h3>
<a href="http://www.baidu.com">goto 百度</a>
</div>
</body>
</html>
15,p标签和span标签
15.1,p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<!--
1. <p> 标签定义段落
2. p 元素会自动在其前后创建一些空白
-->
hello world
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>
15.2,span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span 标签</title>
</head>
<body>
<!--
1. span 标签是内联元素,不像块级元素(如:div 标签、p 标签等)有换行的效果。
2. 如果不对 span 应用样式,span 标签没有任何的显示效果
3. 语法:<span>内容</span>
(1) span 标签是内联元素(内嵌元素, 行内元素), 没有换行效果
(2) 如果不对 span 应用样式,span 标签没有任何的显示效果
(3) 往往是为了单独的去控制某个关键的内容
-->
您的购物车有<sapn style="color: red;font-size: 40px">10</sapn>个商品
</body>
</html>
16,课后练习(两个题)
16.1,员工表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工表格</title>
</head>
<body>
<!--一共4行6列-->
<h1 align="center">雇员薪资信息</h1>
<table align="center" width="600" height="200" border="3" cellspacing="0" bgcolor="#f0f8ff">
<tr align="center">
<th>编号</th>
<th>名字</th>
<th>性别</th>
<th>薪水</th>
<th>职位</th>
<th>email</th>
</tr>
<tr align="center">
<td>111</td>
<td>宋江</td>
<td>男</td>
<td>1000.00</td>
<td>总裁</td>
<td>sj@163.com</td>
</tr>
<tr align="center">
<td>111</td>
<td>宋江</td>
<td>男</td>
<td>1000.00</td>
<td>总裁</td>
<td>sj@163.com</td>
</tr>
<tr align="center">
<td>111</td>
<td>宋江</td>
<td>男</td>
<td>1000.00</td>
<td>总裁</td>
<td>sj@163.com</td>
</tr>
</table>
</body>
</html>
16.2,课表安排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<!--一共8行8列-->
<h1 align="center">成绩表</h1>
<table width="600" height="100" align="center" border="4" bordercolor="pink">
<tr align="center">
<th>项目</th>
<!--合并5列,第一行的,第2列到第6列的标题头就删除-->
<th colspan="5" align="center">上课</th>
<th colspan="2" align="center">休息</th>
</tr>
<tr align="center">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr align="center">
<!--合并了4行,第3行第4行第5行第6行,它们的第1列就得删除-->
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
<tr align="center">
<td rowspan="2" align="center">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr align="center">
<td>数学</td>
<td>数学</td>
<td>地理</td>
<td>历史</td>
<td>化学</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>