Html简要笔记
html在线文档：
https://www.w3school.com.cn
怎么创建文件我已经会了
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>
