JavaWeb之HTML
作者：刘婧怡
时间：2019.01.30
主机环境：MacBookPro
HTML语言
1. HTML简介
- 什么是html？
-- HypeText Markup Language：超文本标记语言，网页语言
** 超文本：超出文本的范畴，使用html可以轻松实现这样的操作
** 标记：html所有的操作都是通过标记实现的，标记就是标签，写法 ：<标签名称>
** 网页：浏览器打开的
- 第一个html程序
-- html的后缀是 .html 或 .htm
** 在MAC中创建 HTML 文件
· 在 Mac 上的“文本编辑”应用中，选取“文件”>“新建”，然后选取“格式”>“制作纯文本”。
· 输入 HTML 代码。可直接输入
这是一个html程序
· 选取“文件”>“存储”，键入一个名称，后跟扩展名“.html”（例如，输入“index.html”），然后点按“存储”。
· 当提示要使用的扩展名时，请点按“使用 .html”。
· 若打开后出现乱码情况，则在程序中加入
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
· 保存好之后，直接双击打开为网页形式。
-- 利用标签修改html代码
** 在上个代码的基础上加入<font>标签
<font>这是一个html程序</font>
对比之后发现并没有变化。
** 若想改变字体和颜色，则加入size和color标签
<font size="5" color="red">这是一个html程序</font>
此时字体为5，颜色为红色，如下图所示
- html的规范（遵循）
-- 一个html文件要有开始和结束的标签
** 开始：<html>
** 结束：</html>
-- html包含两个部分
** 设置相关信息：
<head> 设置相关信息,如<title>这是一个标题</title>，此时将修改标题 </head>
** 显示在网页上的内容：
<body> 显示在页面上的内容都写在body里面，如<font size="5" color="red">这是一个html程序</font> </body>
当前页面为
-- html里要有开始标签也要有结束标签，即成对出现
-- html不区分大小写
-- 有些标签没有结束标签
** 换行标签（在标签内结束）：<br/>
** 水平线（在标签内结束）：<hr/>
- html的操作思想（重要）
-- 使用标签改变显示效果
** 网页中有很多数据，不同的数据可能有不同的显示效果，这个时候需要使用标签把操作和数据封装起来，通过修改标签的属性值实现标签内数据样式的变化。
** 一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的改变
<html> <head> <title>这是一个标题</title> </head> <body> <font size="5" color="red">这是一个html程序1</font><br/> <font size="5" color="green">这是一个html程序2</font><br/> <font size="5" color="yellow">这是一个html程序</font><br/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
2. 文字标签和注释标签
- 文字标签
-- 修改文字的样式
** 用<font></font>
** 属性：
size：文字的大小，取值范围为1 - 7，超出7默认为7。
color：文字的颜色，两种表示方式：英文单词（red，green...) & 使用十六进制数表示（RGB，如#ffffff）
- 注释标签
-- 注释写法
<!-- 注释 -->（英文输入！）
3. 标题标签、水平线标签和特殊字符
- 标题标签
--写法
<h1></h1> 、<h2></h2> 、<h3></h3> ... <h6></h6>
-- 代码实例
<html> <head> <title>事例</title> </head> <body> <!-- 演示标题标签 --> <h1>标题一</h1> <h2>标题二</h2> <h6>标题六</h6> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
** 从h1到h6的大小一次变小
** 标题标签会自动换行
- 水平线标签
-- 写法
<hr/>
-- 属性
** size：水平线的粗细，范围为1 - 7
** color：水平线的颜色，表示方法与文字标签的一样
--代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示水平线标签 --> <hr size="5" color="red"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
- 特殊字符（转义）
-- 写法（常用）
** 将 < 改为 <； 将 > 改为 >；（;为英文）
** 将一个空格改为 ；（;为英文）
** 将 & 改为 &；（;为英文）
-- 代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示特殊字符 --> <html>:这是 一个 网页&的开始 </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下
4.列表标签
- 定义列表
-- 写法
** <d1> </d1>：表示列表的范围
** 在dl里面 <dt></dt>：上层内容
** 在dl里面 <dd></dd>：下层内容
-- 代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示列表标签 --> <dl> <dt>西安电子科技大学</dt> <dd>计算机科学与技术学院</dd> <dd>电子工程学院</dd> </dl> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
- 有序列表
-- 写法
** <ol></ol>：有序列表范围
** 在ol中有属性type：1（默认），a，i
** 在ol标签里面 <li>具体内容</li>
--代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示有序标签 --> <ol type="1"> <!== 引号里可写1，a，i ==> <li>计算机科学与技术学院</li> <li>电子工程学院</li> </ol> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
-无序标签
-- 写法
** <ul></ul>：表示无序列表的范围
** 在ul里面有属性type：空心圆circle，实心圆disc（默认），实心方块square
** 在ul里面有 <li></li>
-- 代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示无序标签 --> <ul type="circle"> <li>计算机科学与技术学院</li> <li>电子工程学院</li> </ul> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
5.图像标签（重要）
- 写法
** <img src="图片路径"/>
** 属性：scr（图片的路径），width（图片的宽度），height（图片的高度），alt（图片上显示文字，把鼠标移动到图片上，停留片刻会显示，有些浏览器不显示）
- 代码
<html> <head> <title>事例</title> </head> <body> <!-- 演示图像标签 --> <img src="/Users/liujingyi/javaWeb/javaweb之HTML(一)/1.png"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
如果没有该2.png这个图片
<html> <head> <title>事例</title> </head> <body> <!-- 演示图像标签 --> <img src="/Users/liujingyi/javaWeb/javaweb之HTML(一)/2.png" alt="hh"/> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
6. 路径介绍
- 分类
-- 绝对路径
** 如/Users/liujingyi/javaWeb/javaweb之HTML(一)/1.png
-- 相对路径
** 一个文件相对于另一个文件的位置
** 当html文件与图片在一个路径下，可以直接写文件名称，如1.png
** 当图片在html文件的下层目录时，假设html文件的路径为如/Users/liujingyi/javaWeb/hello.html，图片的路径为如/Users/liujingyi/javaWeb/javaweb之 HTML(一)/1.png，此时可写为javaweb之HTML(一)/1.png
**当图片在html文件的上层目录时，假设html文件的路径为如/Users/liujingyi/javaWeb/javaweb之HTML(一)/hello.html，图片的路径为如/Users/liujingyi/javaWeb/1.png，此时可写为 ../1.png（../表示上层目录）
7. 超链接标签（重要）
- 链接资源
-- 写法
** <a href="链接到资源的路径" 显示在页面上的内容 </a>
** href：链接的资源的地址，#为默认，不打开任何资源，只是占位
** target：设置打开的方式，默认是在当前页面打开，_black（在新窗口打开），_self（在当前页打开）
-- 代码
<html> <head> <title>事例</title> </head> <body> <a href="/Users/liujingyi/javaWeb/JavaWeb视频教程_day1-资料源码/code/05-列表标签的案例.html" target="_black">这是一个超链接</a> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
点击之后会弹出一个新页面
- 定位资源
-- 定义位置
** 写法：<a name="top"> 顶部 </a>
-- 回到该位置
** 写法：<a href="#top" 回到顶部 </a>
-- pre标签
** 作用：在<pre>输出的内容</pre>中，内容是原样输出的，即程序怎么写，网页就如何显示
8. 表格标签（重要）
- 写法
** <table></table>：表示表格的范围
** table中有属性border：表示表格线的粗细，bordercolor：表示表格线的颜色，cellspacing：表示单元格的间隙（若为0，则表示没有间隙），height：表示表格的高，weight：表示表格的宽度
** 在table里面 <tr></tr>：表示一行
** 在tr中可以设置显示方式align：left，center，right
** 在tr里面<td></td>：表示每行的一个单元格
** 在td中可以设置显示方式align：left，center，right
** 将td改为th可以将单元格中的字体加粗并居中
** <caption></caption>：设置表格的题目，写在table中
- 代码
<html> <head> <title>事例</title> </head> <body> <table border="1" bordercolor="blue" cellspacing="0"> <tr> <td>姓名</td> <td>年龄</td> <td>学院</td> </tr> <tr> <td>哈哈</td> <td>20</td> <td>计算机科学与技术学院</td> </tr> </table> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
若不加cellspacing="0"，结果如下：
- 合并单元格
** rowspan：跨行
** colspan：跨列
** 代码（跨列操作）：
<html> <head> <title>事例</title> </head> <body> <table border="1" bordercolor="red" cellspacing="0"> <tr align="center"> <td colspan="3">人员信息</td> <!-- 引号内填写跨行或跨列的数目 --> </tr> <tr align="center"> <td>哈哈</td> <td>20</td> <td>计算机科学与技术学院</td> </tr> </table> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
9. 表单标签（非常重要）
- 写法
** <form></form>：定义一个表单的范围
** 属性：action属性将提交结果送入该地址，并跳转的该页面
method属性表示表单提交的方式，常用的有两种：get（默认）和post，区别为a .get请求地址栏会携带提交的数据，post不会携带，b. get的请求的安全级别较低，c. get请求有数据大小的限制
enctype属性（一般情况下不需要），在文件上传的时候需要该属性
** 输入项：可以输入或选择的部分内容
- 大部分的输入项使用 <input type="输入项的内容"/>，必须要写name属性，不然不会提交
1.普通的输入项：<input type="text"/>
2.密码输入项：<input type="password"/>
3.单选输入项：<input type="radio"/>，需要有属性name，并且属性值必须相同，才能保证是单选，必须要写value值区分不同选项
实现默认选中的属性：checked="checked"
4.复选输入项：<input type="checkbox"/> `，需要有属性name，并且属性值必须相同，必须要有value值
实现默认选中的属性：checked="checked"
5.文件输入项（用于文件上传）：<input type="file"/>
6.隐藏项：<input type="hidden"/>
7.提交按钮：<input type="submit"/>，按钮中的内容可用属性value
使用图片提交：<input type="image" src="图片路径"/>
8.重制按钮：<input type="reset" value=""/>，回到默认状态
9.普通按钮：<input type="button" value=""/>，和js在一起使用
- 不使用input
10.下拉输入项：<select name=""></select>select中包括<option value=""></option>
实现默认选中：selected="selected"
11.文本域：<textarea cols="10" lows="10"></textarea>
- 代码
<html> <head> <title>事例</title> </head> <body> <form> 手机号码：<input type="text" name="tele"/><br/> 密码：<input type="password" name="password"/><br/> 性别：<input type="radio" name="sex1" value="女"/>女 <input type="radio" name="sex1" value="男"/>男<br/> 爱好：<input type="checkbox" name="hobby" value="p"/>乒乓球 <input type="checkbox" name="hobby" value="y"/>羽毛球 <input type="checkbox" name="hobby" value="z"/>足球<br/> 文件上传：<input type="file" name="file"/><br/> 隐藏项：<input type="hidden"/><br/> 生日：<select name="birth“> <option value="0">请选择</option> <option value="1993">1993</option> <option value="1994">1994</option> </select><br/> 自我描述：<textarea cols="50" lows="10" name="dis"></textarea><br/> <input type="submit" value="注册"/> </form> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
** 填写之后点击注册按钮，地址会变为tele=1542367892&password=123456&sex1=女&hobby=p&hobby=y&birth=1993&dis=我是一个学生，将数据按照name=value的方式提交
10. 其他常用标签
** b、u、i、s标签
代码：
<html> <head> <title>事例</title> </head> <body> <u>西</u> <b>电</b> <s>学</s> <I>生</I> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下
** pre标签：原样输出
** sub、sup标签
代码：
<html> <head> <title>事例</title> </head> <body> 3<sub>100</sub> 4<sup>200</sup> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
** div、span标签（在css时使用）
代码：
<html> <head> <title>事例</title> </head> <body> <div>这是div1</div> <div>这是div2</div> <div>这是div3</div> <span>这是span1</span> <span>这是span2</span> <span>这是span3</span> </body> </html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
结果如下：
** p标签：段落标签，比br标签多换一行
11. html头标签的使用
-
html由两部分组成：head和body
** 头标签：在head里面的标签就是头标签
** title标签：表示在标签上显示的内容
** meta标签：设置页面相关的内容
<meta name="keyword" content="西安电子科技大学"/>
<meta http-equiv="refresh" content="3;url=地址"/>
三秒之后自动跳转的url后的地址页面
** base标签：设置超链接的基本信息
<base target="_black"/>
所有的超链接都在新窗口打开
** link标签：引入外部文件，在css中使用（用于引入css文件）
12. 框架标签
-
<frameset>rows：按照行划分，
<frameset rows="80,*"/>，表示将页面划分为两行，*表示剩余部分cols：按照列划分
<frameset cols="80,*"/> -
<frame>：具体显示的页面<frame name="lower_left" src="页面路径"/>
-
