HTML
Web概念概述
* JavaWeb:
* 使用Java语言开发基于互联网的项目
* 软件架构:
* C/S:Client / Server 客户端 / 服务器端
* 在用户本地有一个客户端程序,在远程有一个服务器端程序
* 如:QQ,迅雷…
* 优点:提升用户体验
* 缺点:开发、维护、安装、部署麻烦
* B/S:Browser / Server 浏览器 / 服务器端
* 只需要一个浏览器,用户通过不同的网址(URL),可以访问不同的服务器端程序
* 优点:开发、维护、部署简单,只需要修改服务器端即可
* 缺点:如果应用过大,用户的体验可能会受到影响,会有卡顿;对硬件要求高
* B/S架构详细解释
* 资源分类:
* 静态资源:
* 使用静态网页开发技术发布的资源
* 特点:
* 所有用户访问,得到的结果是一样的
* 如:文本、图片、视频、音频、HTML、CSS、JavaScript
* 如果用户请求的静态资源,那么服务器会直接将静态资源发送给浏览器。
浏览器中内置了静态资源的解析引擎,可以展示静态资源
* 动态资源:(重点)
* 使用动态网页技术发布的资源
* 特点:
* 不同用户访问的结果可能不同
* 如:JSP/Servlet、PHP、ASP、.NET
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
* 所以,我们要学习动态资源就必须先学习静态资源!
* 静态资源:(三剑客)
* HTML:用于搭建基础网页,用于展示页面的内容
* CSS:用于美化页面,布局页面
* JavaScript:控制页面的元素,让页面有动态的效果
HTML
* 概念:
* Hyper Text Markup Language 超文本标记语言,是最基础的网页开发语言
* 超文本:
* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
* 标记语言:
* 由标签构成的语言,如:HTML、XML,标记语言不是编程语言,没有逻辑性
* <标签名称>
* 快速入门:
* 语法:
* html文档的后缀名为 .html 或 .htm
* 标签分为
* 围堵标签:有开始标签和结束标签。如
* 自闭和标签:开始标签和结束标签在一起。如
* 标签可以嵌套
* 标签正确嵌套,不能你中有我,我中有你
* 错误:
* 正确:
* 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可以)引起来。
* HTML的标签不区分大小写,建议使用小写
<html> <head> <title>titletitle> <head> <body> <font color = "red">HelloWorldfont><br/> <font color = "green">HelloWorldfont> body> html>
* 标签:
* 文件标签:构成HTML最基本的标签
* :html文档的根标签
* :头标签,用于指定html文档的一些属性,引入外部的资源
*
* :体标签
* :html5中定义该文档是html文档
* 文本标签:和文本有关的标签
* 注释:,用来解释代码,不会在浏览器上展示
* to
:标题标签,字号加大字体加粗
* h1~h6字体大小逐渐递减
* :段落标签,自动换行,行间隔更大
*
:换行标签
*
:水平线标签,显示一条水平分割线,可通过html属性改变颜色和粗细等
* 属性:
* color :颜色
* width :宽度
* size :高度
* align :对齐方式
* center :居中
* left :左对齐
* right :右对齐
* :字体加粗标签
* :斜体标签
* :字体标签
* 属性:
* color :颜色
* size :大小
* face :字体
*
* 属性定义:
* color:
* 英文单词:red,green,blue
* rgb(值1,值2,值3),值的范围:0~255。 如:rgb(0,0,255)
* #值1值2值3,值的范围:00~FF。 如:#FF00FF
* width:
* 数值:width='20',数值的单位默认是 px(像素)
* 百分数:width=20%,占比为相对父元素的比例
* 特殊字符:
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签title>
head>
<body>
白日依山尽,<br/>
黄河入海流。<br><br>
黑马旅游网<br>
<h1>黑马旅游网h1>
<h2>黑马旅游网h2>
<h3>黑马旅游网h3>
<h4>黑马旅游网h4>
<h5>黑马旅游网h5>
<h6>黑马旅游网h6>
<p>
1.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<p>
2.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<p>
3.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<hr color="red" width="200" size="100" align="left">
欲穷千里目<br>
<b>
欲穷千里目<br>
b>
更上一层楼<br>
<i>
更上一层楼
i>
<hr>
<hr>
<br><br><br>
<font color=#FF00FF size="5" face="楷体">白日依山尽font>
<br><br><br>
<hr color="red" width="50%" size="10" align="left">
<center>德玛西亚center>
<br><br>
body>
html>
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签title>
head>
<body>
白日依山尽,<br/>
黄河入海流。<br><br>
黑马旅游网<br>
<h1>黑马旅游网h1>
<h2>黑马旅游网h2>
<h3>黑马旅游网h3>
<h4>黑马旅游网h4>
<h5>黑马旅游网h5>
<h6>黑马旅游网h6>
<p>
1.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<p>
2.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<p>
3.黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
p>
<hr color="red" width="200" size="100" align="left">
欲穷千里目<br>
<b>
欲穷千里目<br>
b>
更上一层楼<br>
<i>
更上一层楼
i>
<hr>
<hr>
<br><br><br>
<font color=#FF00FF size="5" face="楷体">白日依山尽font>
<br><br><br>
<hr color="red" width="50%" size="10" align="left">
<center>德玛西亚center>
<br><br>
body>
html>
Test1
* 图片标签:
* :展示图片
* 属性:
* src :指定图片的位置(URL)
* alt :图片加载失败后图像的替代文本
* height :规定图像的高度
* width :规定图像的宽度
* 相对路径:
* ./ :当前路径
* ../ :上一级路径
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签title>
head>
<body>
<img src="./image/banner_1.jpg" align="right" alt="兵马俑" width="500px" height="500px"/>
<img src="./image/jiangxuan_4.jpg"/>
<img src="../image/jiangxuan_4.jpg"/>
body>
html>
* 列表标签:
* 有序列表:
* :
* type :规定列表的序号类型,建议用样式代替
* start :规定列表序号的起始点,建议用样式代替
* :
* 无序列表
* :
* type :规定列表项目符号的类型
* :
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
早上起床干的事情
<ol type="A" start="4">
<li>睁眼li>
<li>看手机li>
<li>穿衣服li>
<li>洗漱li>
ol>
早上起床干的事情
<ul type="circle">
<li>睁眼li>
<li>看手机li>
<li>穿衣服li>
<li>洗漱li>
ul>
body>
html>
* 链接标签:
* :定义一个超链接
* 属性:
* href :指定访问资源的URL(统一资源定位符)
* target :打开页面的情况
* _self :本页面跳转(默认值)
* _blank :新建页面跳转
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接title>
head>
<body>
<a href="http://www.baidu.com">点我a><br>
<a href="http://www.baidu.com" target="_self">点我a><br>
<a href="http://www.baidu.com" target="">点我a><br>
<a href="mailto:1850552346.@qq.com" target="_blank">联系我a>
<a target="_blank" href="http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=2534506313,1688529724&os=1097436471,408122739&simid=3354786982,133358663&pn=0&rn=1&di=179520&ln=1563&fr=&fmq=1587446798618_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&hs=2&objurl=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined">
<img src="./image/footer_service.png" alt="">a>
body>
html>
* div 和 span: * 语义化标签:提高程序的可读性 * 表格标签: * 案例演示:旅游网站页面 * 表单标签: * 表单项:
*
* :行内标签(内联标签),文本信息默认在一行内展示
*
* :定义文档或者文档的一部分区域的页脚。可以定义多个
* :定义HTML表格
* 属性:
* align :规定表格相对周围元素的对齐方式
* bgcolor :规定表格的背景颜色
* border :规定表格是否拥有边框
* cellpadding :规定单元格边缘与其内容之间的空白
* cellspacing :规定单元格之间的空白,如果指定为0,则单元格的线会合为一条
*
* :定义表头
* :定义表格行
* 属性:
* align :定义表格行的内容的对齐方式
* bgcolor :规定表格行的背景颜色
* :定义表格单元
* 属性:
* colspan :合并列
* rowspan :合并行
* :定义表格中的表头内容
* :定义表格中的主体内容
* :定义表格中的表注内容(脚注)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table border="1" width="50%" cellspacing="0" cellpadding="5" bgcolor="#faebd7" align="center">
<caption>学生信息表caption>
<tr align="center">
<th rowspan="2">编号th>
<th>姓名th>
<th>成绩th>
tr>
<tr bgcolor="blue">
<td>张三td>
<td>70td>
tr>
<tr>
<td rowspan="2">2td>
<td>李四td>
<td>70td>
tr>
<tr>
<td colspan="2">平均分td>
tr>
table>
<hr>
<br><br><br>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="2">1th>
<th>1th>
<th>1th>
tr>
<tr>
<th>1th>
<th>1th>
tr>
<tr>
<th>1th>
<th>1th>
<th>1th>
tr>
table>
body>
html>
* 确定使用 table来完成布局
* 如果某一行只有一个单元格,则使用
* 如果某一行有多个单元格,则使用表格嵌套
*
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网title>
head>
<body>
<table width="100%" align="center">
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
td>
tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" width="0%" alt="">
td>
<td>
<img src="image/search.png" alt="">
td>
<td>
<img src="image/hotel_tel.png" alt="">
td>
tr>
table>
td>
tr>
<tr>
<td height="45">
<table bgcolor="#ffe4c4" width="100%" align="center">
<tr>
<td>
<a href="">首页a>
td>
<td>
<a href="">门票a>
td>
<td>
<a href="">酒店a>
td>
<td>
<a href="">香港车票a>
td>
<td>
<a href="">出境游a>
td>
<td>
<a href="">国内游a>
td>
<td>
<a href="">港澳游a>
td>
<td>
<a href="">抱团定制a>
td>
<td>
<a href="">全国自由行a>
td>
<td>
<a href="">收藏排行榜a>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
td>
tr>
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
精选
<hr color="#ffe4c4">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffe4c4">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="" height="100%">
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_7.jpg.jpg" alt="">
境外游
<hr color="#ffe4c4">
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color="red">¥899font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚 5天4晚自由行 (春节销售+亲子+蜜月+自由行)p>
<font color=" red">¥899font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/footer_service.png" width="100%" alt="">
td>
tr>
<tr>
<td align="center" bgcolor="#ffebcd" height="40">
<font>
版权所有Copyright© 2006-2018, All Rights Reserved 苏ICP备16007882
font>
td>
tr>
table>
body>
html>
Test2
* 表单:
* 概念:用于采集用户输入的数据并和服务器进行交互。
* 标签::用于定义表单,可以定义一个范围,代表采集用户数据的范围
* 属性:
* action :指定提交数据的URL,当前页面为#号
* method :指定提交方式
* get :默认值,会将表单数据以键值对的形式附加到地址栏的URL中,不太安全,对请求参数的长度有限制
* post :以HTTP post 事务的形式发送表单数据,不会在地址栏中显示,较为安全,对请求参数的长度没有限制
* 表单项中的数据要想被提交,必须指定name属性DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签title>
head>
<body>
<form action="#" method="get">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
form>
body>
html>
* :接收输入值
* 属性:
* type:规定要显示的元素的类型,默认为text
* radio:单选框
* 注意:要想要多个单选框实现单选,则必须将name属性定义相同,指定value值后并选中会提交value值
* checkbox:复选框
* 注意:要指定value值,checked表示默认被选中
* submit:提交按钮
* button:可点击的普通按钮
* image:指定图片作为提交按钮
* password:密码输入区
* hidden:隐藏域
* file:选择本地文件,提交到服务器端
* date:日期
* color:取色器
* number:数字
* placeholder:简短的提示信息,点击后会自动清空
* name:提交后会成为键值对中的键名
* :指定输入项的文字描述信息,一般其for属性会和 中的name值一致,点击后能使输入框获取焦点
* :下拉列表
* :具体的列表项
* :文本输入域
* 属性:
* cols:指定列数
* rows:指定行数DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签title>
head>
<body>
<form action="#" method="get">
<label for="username">用户名:label>
<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女 <br>
爱好:<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球
<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="fun">泡妞<br>
图片:<input type="file"><br>
取色器:<input type="color" name="color"><br>
生日:<input type="date" name="birthday1"><br>
生日:<input type="datetime-local" name="birthday2"><br>
邮箱:<input type="email" name="email"><br>
年龄:<input type="number" name="age"><br>
省份:<select name="province">
<option value="" selected>--请选择--option>
<option value="b">北京option>
<option value="c">上海option>
<option value="d">广州option>
select><br><br>
自我描述:<textarea name="introduction" id="" cols="20" rows="3">textarea><br>
隐藏域:<input type="hidden" name="id" value="aaa"><br>
<input type="submit" value="登录"><br>
<input type="button" value="一个按钮"><br>
<input type="image" src="../img/regbtn.jpg">
form>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500" cellpadding="3" cellspacing="0">
<caption>注册区caption>
<tr>
<td><label for="username">用户名label>td>
<td><input type="text" name="username" id="username">td>
tr>
<tr>
<td><label for="password">密码label>td>
<td><input type="password" name="password" id="password">td>
tr>
<tr>
<td><label for="email">邮箱label>td>
<td><input type="email" name="email" id="email">td>
tr>
<tr>
<td><label for="name">名字label>td>
<td><input type="text" name="name" id="name">td>
tr>
<tr>
<td><label for="tel">手机号label>td>
<td><input type="tel" name="tel" id="tel">td>
tr>
<tr>
<td><label>性别label>td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
td>
tr>
<tr>
<td><label for="birthday">出生日期label>td>
<td><input type="date" name="birthday" id="birthday">td>
tr>
<tr>
<td><label for="checkCode">验证码label>td>
<td><input type="text" name="checkCode" id="checkCode">
<img src="../img/verify_code.jpg" alt="">td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册" >td>
tr>
table>
form>
body>
html>
Test3
相关