3.HTML
3.1.web概念
- 万维网(www)三要素
- url：统一资源定位符，根据url定位到所需要的资源
- http：应用层传输协议，描述资源在网络中如何传输
- html：超文本标记语言，标记资源的格式
- 使用某种语言开发基于互联网的项目的统称，这里用Java。
- 软件架构：C/S(客户端/服务端)、B/S(浏览器/服务端)
3.2.B/S架构
- 资源分类：
- 静态资源：使用静态网页开发技术发布的资源，所有用户访问得到的结果是一样的。如HTML，CSS，JavaScript。
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面元素，展示一些动态效果
- 动态资源：使用动态网页开发技术发布的资源，不同用户访问得到的结果是不同的。如jsp、servlet。
如果用户请求的是动态资源，服务器会执行动态资源，并将动态资源转换为静态资源，再发送给客户端。浏览器只能解析静态资源。
- 静态资源：使用静态网页开发技术发布的资源，所有用户访问得到的结果是一样的。如HTML，CSS，JavaScript。
3.3.HTML
3.3.1.概念
- HTML：Hyper Text Markup Language，超文本标记语言
- 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
- 标记语言：由标签构成的语言，不是编程语言
3.3.2.语法
- html文档后缀名 .html 或者 .htm
- 标签分类：
- 围堵标签：有开始标签和结束标签。如 <html>、</html>
- 自闭合标签：开始标签和结束标签在一起。如 <br/>
- 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你
注：
- 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- html的标签不区分大小写，但是建议使用小写。
3.3.3.标签
- 文件标签
- html：html文档的根标签
- head：头标签
- title：标题标签
- body：体标签
- <!DOCTYPE html> : html5中定义该文档是html文档
- 文本标签
- <h1> to <h6> 标题标签(h1标签仅能在一个html页面出现一次)
- <p>、</p> 段落标签
- <br>或<br/> 换行(自闭合标签)
- <hr> 显示一条水平线分割线，有一些属性可以改变其样式
- noshade:颜色是否有阴影(纯色)
- color：颜色
- width：宽度(不带单位时默认px)
- size：高度(厚度,不同于height,不带单位时默认px )
- align：对其方式
- center：居中
- left：左对齐
- right：右对齐
- <b>、</b> 字体加粗
- <i>、</i> 字体斜体
- <font>、</font> 字体标签，有一些属性可以改变其样式
- <center>：文本居中
- color：颜色
- size：大小
- face：字体
- 注释：<!– 注释内容–>
- 图片标签
- <img> 输入图片路径即可展示，设置src属性添加图片路径才可以添加
- src：指定图片的位置
- alt：替换文本属性，alt 属性用来为图像定义一串预备的可替换的文本。图片加载失败的时候会显示。
<!--展示一张图片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"> <!-- 相对路径 1.当前目录 ./ 如 src = "./image/1.jpg" 2.上一级目录 ../ 如 src = "../image/1.jpg" 3.上上级目录 ../../ 如 src = "../../image/1.jpg" 绝对路径 url值：如https://www.baidu.com/ --> <img src="./image/jiangwai_1.jpg" alt="加载错误"> <img src="../image/jiangwai_1.jpg" alt="图片加载失败"> <img src="https://www.baidu.com/img/dong_8f1d47bcb77d74a1e029d8cbb3b33854.gif">
- <img> 输入图片路径即可展示，设置src属性添加图片路径才可以添加
- 列表标签
- 有序列表：<ol> <li> </li> </ol>
- type：规定在列表中使用的标记类型(1,A,a,I,i)。
- start：规定有序列表的起始值
- reversed：规定列表顺序为降序。(9,8,7…)
<ol type="A" start="10" reversed> <!-- 下面这样写也可以 --> <!-- <ol type="A" start="10" reversed="reversed"> --> <li>1</li> <li>2</li> <li>3</li> </ol> - 无序列表：<ul> <li> </li> </ul>
- type:
- disc：默认值。实心圆。
- circle：空心圆。
- square ：实心方块。
<ul type="circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> - type:
- 有序列表：<ol> <li> </li> </ol>
- 链接标签
- <a>、</a> 必须对href属性设置网址才能点击访问
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在新的空白页打开
- _parent：在父窗口打开
- _top：在顶级窗口打开
- <a>、</a> 必须对href属性设置网址才能点击访问
- 块标签：
- <span>、</span>：文本信息在一行展示，称为行内标签或内联标签
- <div>、</div>：每一个div占满一整行，称为块级标签
- 语义化标签：
- <header>、<header>：HTML5中为了提高程序可读性，用于页面头
- <footer>、<footer>：HTML5中为了提高程序可读性，用于页面尾
- 表格标签：
- <table>、</table>：定义表格
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
- <caption>、</caption>：定义表格标题
- <tr>、</tr>：定义行，包含一个或多个 <th> 或 <td> 元素。
- align：水平对齐方式
- bgcolor：背景色
- valign：规定表格行中内容的垂直对齐方式。
- top：顶部对齐
- middle：居中
- bottom：底部对齐
- <td>、</td>：定义单元格
- colspan：横跨列数
- rowspan：横跨行数
- align：水平对齐方式
- bgcolor：背景色
- valign：规定表格行中内容的垂直对齐方式。
- top：顶部对齐
- middle：居中
- bottom：底部对齐
- <th>、</th>：定义表头单元格
- <thead>、</thead>：表示表格的头部分，增强可读性
- <tbody>、</tbody>：表示表格的体部分，增强可读性
- <tfoot>、</tfoot>：表示表格的尾部分，增强可读性
<table border="1px" bgcolor="red" cellpadding="30" cellspacing="100"> <tr> <td rowspan="2">>11</td> <td colspan="2">>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> </table> - <table>、</table>：定义表格
- 页面嵌套标签
- <iframe>、</iframe>：页面嵌套标签
<a href="https://www.taobao.com" target="taobao">淘宝</a> <iframe name="baidu"></iframe> - 表单标签：3.3.5节介绍
3.3.4.Example
- 在没有CSS布局工具的情况下，使用table完成布局需求
1. 确定使用table来完成布局
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
<table>
<tr>
<td> </td>
</tr>
</table>
4. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45" >
<td>
<a href="">首页</a>
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 轮播图 -->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 黑马精选-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑马精选
<hr color="#ffd700" >
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 国内游 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游 -->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第10行 -->
<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="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
3.3.5.表单标签
-
<form>、</form>将登录功能的代码包裹，用<input>标签实现文本输入框，多用于与服务器端的交互。可以在页面内调用浏览器发起一个请求
- url在form表单中形成方式：action属性 + 参数拼接而来的，表单标签在下边介绍。
<!-- url主体部分：<action：https://www.baidu.com/s> url参数部分： 一个表单元素，name属性相当于key，value属性相当于其本身value值， 对于表单元素，不写value也会默认含有value(有时没有默认值就是我们输入的值) 下面是form表单的例子 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://www.baidu.com/s" method="get"> <!-- input方式实现form表单 --> <!-- input里如果有value属性，那么无论输入什么也会默认value值，如果没有，那么就是输入的值 --> <input name="wd"> <!-- 这里输入框里默认是123，可以修改后提交 --> <input name="wd" value="123"> <!-- select方式实现form表单 --> <select name="wd"> <option value="java">java</option> <!-- 这里如果不添加value值，option文本内容会自动充当value值，即点击提交后搜索c,地址栏会显示url拼接出来的值 --> <option>c</option>--> <!-- 这里选择c++以后点击提交，仍然是搜索123,地址栏会显示url拼接出来的值 --> <option value="123">c++</option> </select>--> <!-- textarea方式实现form表单 --> <textarea name="wd"></textarea> <!-- 用于提交的按钮 --> <input type="submit"> </form> </body> </html> -
表单标签的特点就是自带value值属性，输入的内容提交上去就是value值。可以在服务器中接收
- name属性：表单标签要想提交，一定要添加name属性作为key值提交
- action属性：指定提交数据的URL的主体部分，url的参数部分由表单元素(input，textarea，select)提供
- method属性：指定提交方式，常用以下两种
- get：
- 请求参数会在地址栏中显示，拼接在url中。会封装到请求行中(HTTP协议)。
- 请求参数大小是有限制的，url的参数部分最多拼接1kb。
- 不太安全。
- get主要用来获取数据。
- post：
- 请求参数不会再地址栏中显示。但是打开浏览器开发者模式可以看到。会封装在请求体中(HTTP协议)。
- 请求参数的大小没有限制。
- 较为安全。
- post主要用来提交数据。
表单中的数据要想被提交，必须指定name属性
- get：
-
input元素：可以通过type属性值，改变元素展示的样式(这里的value属性是展示在页面上的默认值)
- type：
- text：文本输入框，默认值
- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
- password：密码输入框
- radio:单选框
- 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked属性，可以指定默认值
- checkbox：复选框
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked属性，可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- reset：定义重置按钮，重置为默认值
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮
- src属性指定图片的路径
- type：
-
<select>、</select>: 下拉列表
- select子元素：option，指定列表项
- selected=“selected”，默认显示的选项
- multiple：multiple =“multiple“ 允许多选(按住shift可以复选)
- size：下拉框内可见数目
<select multiple="multiple" size="1" > <option value=“aaa">aaa</option> <option value=“bbb">bbb</option> <option value=“ccc" selected="selected">ccc</option> <!--默认显示该选项--> <option value=“ddd">ddd</option> </select> - select子元素：option，指定列表项
-
<textarea>、</textarea>：文本域，定义多行的文本输入控件。
- cols：指定列数，每一行有多少个字符
- rows：指定行数，每一列有多少个字符
- maxlength：最大可以输入多少字符内容
- placeholder：提示信息，使用placeholder属性的时候，标签要紧闭合
- readonly：只读，不允许输入
<textarea placeholder="请输入..." rows="5" cols="100" maxlength="50" readonly="readonly"></textarea> <!-- 因为标签没有紧闭合，标签内有空格或换行字符，导致没有placeholder属性的提示信息 --> <textarea placeholder="请输入..." rows="5" cols="100" maxlength="50" readonly="readonly"> </textarea><label>、</label>标签包裹某项：指定输入项的文字描述信息，其for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/181064.html
