目录
1.html概述
HTML(Hyper Text Markup Language)超文本标记语言。
文本就是文字吧,“超文本”除了文字外还包含图片、链接,甚至音乐、程序元素。超文本更加的丰富。
标记,就是标签。html由大量的标签组成,如:<html></html>
1.1为什么学html?
软件架构分B/S和C/S架构
--B/S:浏览器和服务器模式,比如京东天猫,不用安装,直接在浏览器就能用----》
优势:版本更新便于维护,企业用多,主攻方法
--C/S:客户端和服务器模式,应用:英雄联盟\扣扣,
缺点:软件使用需要安装和卸载,版本更新需要重新安装,不便于维护
B/S架构开发,往往叫web开发,分web前端和web后端。
web前端指浏览器的开发,主要学:html+css+javascrit(不同于美工UI,美工有比较好的美术功底.)
web后端指服务器的咖啡,主要学:java、php、c#这些
1.2html代码怎么写?
--写java代码需要创建.java结尾的文件,写html代码我们只需创建.html和.htm结尾的文件就行,创建aaa.html文件--->看源码 有html head body标签
html--->网页的根部,它的内容不会在浏览器中显示出来。
head--->网页的头部,它的内容不会在浏览器中显示出来。
body--->网页的主体,它的内容会在浏览器中显示出来。
用纯记事本我们是可以写html的,但是没有高亮显示,所以我们不用它,用hbulider
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
DOCTYPE声明文档的解析类型(document.compatMode),为什么有这个类型呢?html这些前端的内容入门简单,但是学精不容易。因为html最终运行到不同的浏览器上,不同浏览器有不同的厂商,这就造成同样的代码在A浏览器效果,但是到B浏览器上就出现问题。不同浏览器运行相同的代码效果不一样,这就是我们所说的浏览器的兼容性问题。所以我们编写一份代码,希望在不同浏览器渲染出来的效果是一样!我们可以在页面添加了<!DOCTYPE html>这个声明,浏览器就会用html5标准去解析和渲染页面,
html5这个标准谁定的呢?---》W3C是世界万维网联盟(World Wide Web Consortium)---》可参考该网站W3C
2.常用标签
2.1头标签head
<!--头-->
<head>
<!--这行代码是告诉浏览器使用哪一种字符编码方式-->
<meta charset="utf-8">
<!--网页标题,显示在网页左上角-->
<title>网页的标签</title>
</head>
2.2段落p
<p>我是段落</p>
2.3注释
<!--我是注释 -->
2.4标题
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
<h1>定义最大标签,<h6>定义最小标签
2.5换行br
hello <br> world
在 HTML 中,<br> 标签没有结束标签。
在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
2.6水平线hr
单标签 --->文本元素的内容,属性和属性值
在 HTML 中,<hr> 标签没有结束标签。
在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />。
在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。
<hr>
<!--color和width都是hr标签的属性,以下三种都可以,写法松散-->
<hr color="red" width="50%">
<hr color='red' width='50%'>
<hr color=red width=50%>
2.7预留格式pre
如以下代码,不加上预留格式,最后在一行显示-->
<pre>
for(int i=0;i<10;i++){
System.out.println(i);
}
</pre>
3.特殊标签
3.1字体
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>m</sub>
<!--font字体标签-->
<font color="red" size="50">字体标签</font>
3.2实体符号
<!--在html中,使用的某些符号正好与html语言冲突,这是要用实体符号-->
<!--实体符号:以&开始,以;结束-->
<!--小于(less than)号:< 大于(greater than)号:>-->
b<a >c
<!--空格(Non-Breaking Space): -->
a b c
<!--实体符号还有很多-->
® × ÷ ¥
4.表格
4.1简单表格table
table表示表格,tr表示一行,td表示一行中的一个格子;
th定义表格的表头,一般是表头中的内容会被加黑;
<!--
border="1px" 设置表格的边框为1像素宽度
width 宽度
height 高度
%为:width="60%"表示整个表格占整个浏览器50%的宽度,
像素:取决电脑的分辨率和宽度,1024*768 屏幕宽度是1024cm,那么对于这个屏幕来说,水平方向上1px就是1cm
align对其方式(居中center,向左,向右)
可以写在table里(整个表格在页面居中),行tr里,也可以写在td格子里
-->
<table border="1px" width="500px" height="300px" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>马里奥</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>桃花公主</td>
<td>女</td>
</tr>
</table>
4.2表格2(单元格的合并)
合并单元格步骤
[1]相邻单元格合并,有行合并和列合并
合并上下两行单元格(row合并):找到要合并的两个格,删除其中一个格(一般去掉后者),再给td添加属性rowspan,
rowspan="合并单元格的个数"。注意:删除下面的单元格
[2]合并左右两列单元格(column合并):同上,添加属性colspan
colspan="合并单元格的个数"。注意:col合并,对删除哪个没有要求
<table border="1" cellspacing="0" width="500px" height="250px">
<tr>
<td></td>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
4.3表格加表头和表脚
一般来说:数据的标题放在thead里面,数据放在tbody里面,表格的注释放在tfoot里面。
注意:thead,tbody,tfoot在table中不是必须的,这样做只是便于操作表格
<table border="1" width="500px" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>家庭住址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">001</td>
<td>张三</td>
<td>重庆</td>
<td>内容1</td>
</tr>
<tr>
<td align="center">002</td>
<td>李四</td>
<td>四川</td>
<td>内容2</td>
</tr>
<tr>
<td align="center">003</td>
<td>王五</td>
<td>北京</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">附注:*为优秀学生</td>
</tr>
</tfoot>
</table>
5.图像image
5.1图像
<!-- 1.img标签就是图片标签
2.src属性是图片的路径
3.width设置宽度,height设置高度(如果只设置宽度,高度会进行等比例缩放)
4.title设置鼠标悬停到图片时显示的信息
5.alt设置图片加载失败时显示的提示信息
6.开始标签和结束标签之间没东西,可以不写结束标签,在开始标签最后加上/
-->
<img src="img/1.png" width="100px" title="我是图片" alt="图片找不到"></img>
<img src="img/1.png" width="100px" title="百度图片" alt="图片找不到"/>
5.1背景颜色和背景图片
背景颜色bgcolor="blue"
背景图片background="img/108.jpg"
6.超链接
6.1超链接a
属性href:hot reference 热引用,href属性后一定是一个资源的地址,就是路径:
绝对路径:网页上的文件或目录在硬盘上的真正路径,如http://www.itcast.cn/images/logo.gif、D:\images\logo.gif
相对路径:相对于当前文件的路径 .当前目录 ..上一目录-->
<!--超链接有一个target属性:
target="_blank" 开启新窗口
target="_self" 当前窗口(默认方式)
target="_top" 顶级窗口
target="_parent" 父窗口
a窗口里有1个窗口b,b窗口里有一个窗口c,如果c窗口中有一个超连接,
该链接的target是top,点击这个超链接c窗口直接到a窗口
该链接的target是parent,点击这个超链接c窗口直接到b窗口
-->
<!--图片超链接:点击图片跳转,还有接着对图片进行修改-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px">
</a>
6.2锚点
作用:页面内的超级链接,迅速定位
<!--锚点的使用-->
<a href="#top1">xxxxxxxxxxx</a>
<a name="top1"></a>
7.列表
7.1无序列表
<ul type="">
<li>中国
<ul type="">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
</ul>
type属性可选值:disc实心圆(默认值)、circle空心圆、square实心方块
7.2有序列表
<ol type="">
<li>中国
<ol type="">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
</li>
<li>美国</li>
</ol>
type属性可选值:1,A,a,I(大写罗马数字),i(小写罗马数字)
8.表单(重点)
8.1什么是表单?
打开百度网盘登录注册页面,我一点注册,这些信息会提交给后台,然后后台系统会把这些数据提交到数据库。这个数据库的表就会多一条记录,所以表单可以用于用户信息的采集--->怎么写呢?表单是一个包含表单元素的区域,表单元素如:文本框、密码框、单选框、多选框、按钮、下拉框、滑块等。具体表单怎么写?
表单的语法结构如下:
<form action="URL" method="" name="">
表单元素
</form>
注意:
(1)<form>标签用于定义HTML表单,为双标签,一个表单中的所有内容都要写在这个<form>和</form>之间。
(2)action属性:用来设置发送请求的路径。表单最终是需要提交数据给服务器的,action这个属性用来指定服务器地址,action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
B/S架构中,从浏览器B端向服务器S端发送数据,叫做请求,英语单词:request
B/S架构中,从服务器S端向浏览器B端返回数据,叫做响应,英语单词:response
http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
(3)method属性规定用于发送表单数据的HTTP方法,其中:
get方式:用户提交的信息会显示在浏览器的地址栏上。
post方式:用户提交的信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。会更安全。method属性不指定时,默认为get。
(4)name属性规定表单的名称。
8.2表单元素
<!--action中路径是假的-->
<form action="http://localhost:8080/xx/register" method="post">
<!--文本框-->
用户名<input type="text" name="username" value=""/><br>
<!--密码框-->
密码<input type="password" name="userpwd" value=""/><br>
<!--确认密码不需要提交给服务器,在浏览器就能判断是否密码一致,怎么判断先不写-->
确认密码<input type="password" /><br>
<!--单选
1.单选,name相同就可以将这两个选择分成一组,只能选一个
2.传给数据库的是name和value,所以要写value
3.在后面添加checked,就默认选择了-->
性别 <input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="0" />女 <br>
<!--复选框
默认选中checked="checked"等价于checked-->
兴趣爱好<input type="checkbox" name="hobbies" value="smoke" checked/>抽烟
<input type="checkbox" name="hobbies" value="drink"/>喝酒
<input type="checkbox" name="hobbies" value="firehair"/>烫头<br>
<!--下拉列表,默认选中selected="selected"等价于selected-->
学历<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select><br>
<!--不加name,只是演示multiple="multiple" 支持多选的 size设置显示条目数量。
按住ctrl键再点击就可以多选了-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<!--文本域textarea 文本域没有value,用户填的就是value
可以增大:行数和列数-->
简介<textarea rows="10" cols="60" name="introduction"></textarea><br>
<input type="submit" value="注册" />
<input type="button" value="按钮" />
<input type="reset" value="清空" />
</form>
提交后,观察浏览器地址
http://localhost:8080/xx/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
[1]提交的是name和value(有name属性的,就会把填写的数据提交给服务器(没有name的,不提交)),但是当value没有写的时候,value的默认值是空字符串"",会将空字符串提交给服务器。
[2]文本块和密码框不需要写value,用户输入什么,value就是什么
[3]submit必须放到form标签内部才有用
[4]一个网页当中可以有多个表单form。
8.3input标签总结
8.3.1总结
<!--
type="text" 文本框
type="password" 密码框(输入密码)
type="checkbox" 复选框
type="radio" 单选按钮
type="submit" 提交表单的按钮
type="button" 普通按钮,不具备提交表单的能力
-->
<!--file控件:文件上传专用。-->
<input type="file" />
<!--隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器。-->
<!--hidden与在地址栏显不显示无关,这是两件事-->
<input type="hidden" name="userid" value="111" />
8.3.2input控件的属性
(1)readonly和disabled
<!-- 只读控件readonly:只能看不能改,数据也会提交给服务器
无效控件disabled:只能看不能改,数据不会提交给服务器
readonly和disabled相同点:都是只读不能修改。
但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)-->
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="110" readonly /><br>
用户姓名<input type="text" name="username" value="zhangsan" disabled /><br>
<input type="submit" value="提交数据" />
</form>
(2)maxlength
<!--maxlength 设置文本框中可输入的字符数量。-->
<input type="text" maxlength="3" />
(3)size
input控件size属性:设置文本框的可视长度
<input type=”text” name=”username” size=”10” />
作业:用表格实现表单
9.div和span
其实最早的网页是采用table进行布局的,但是table不灵活,太死板。现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<!--div也是可以嵌套的,现在看不到效果-->
<div id="div3">
<div>
<div>test</div>
</div>
</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
1.div和span是什么?有什么用?
* div和span都可以称为“图层”(图层:可以理解为多个透明的图片重叠)
* 图层的作用是为了保证页面可以灵活的布局。
* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
3.div和span的区别?
div:块级标签(独自占用一行)
span:行内标签,span不会独自占用一行。-->
10.frame
考试系统
<!--frameset标签与body标签不能同时出现-->
<frameset rows="15%,85%">
<frame name="top" src="top.html"/>
<frameset cols="20%,80%">
<frame name="left" src="left.html"/>
<frame name="right" />
</frameset>
</frameset>