本文详细介绍了HTML的基础知识，包括HTML的结构、常用的标签、属性及其实例。从单机程序转变为网络程序，讲解了C/S和B/S架构，以及在B/S中浏览器与服务器的交互过程。重点阐述了HTML的常用标签，如标题、段落、图片、超链接、表格、表单等，以及它们在网页展示和用户交互中的作用。此外，还提到了HTML在后端开发中的重要性，特别是对于B/S结构的业务程序开发。
* 网络编程 (Socket + IO)
* 单机程序 -> 网络程序
* C/S ，B/S
* C/S
* 客户端和服务端程序
* 由2个子程序配合完成应用
* QQ客户端 + QQ服务端
* B/S
* 浏览器和web服务器程序
* 由3个子程序配合完成应用
* IE浏览器 + tomcat服务器 + 如淘宝程序，京东程序 (业务程序)
* 交互过程：
淘宝程序 需要部署到 服务器上
浏览器 访问服务器 (部署的淘宝程序)
* java更适合开发B/S结构中的业务程序
* 通过浏览器 使用淘宝时
* 在浏览器上看到的所有淘宝相关的效果(界面)
* 都不是浏览器本身的
* 所以浏览器看到的内容都是从淘宝程序获得的。(之间要经过服务器)
* 淘宝程序会将浏览器需要(请求)的页面 通过服务器 返回(响应)给浏览器
* 淘宝程序响应给浏览器的界面内容，要符合一定的规则特点，浏览器才能识别，才能显示
* 最常见的就是要符合html语法特点
*下面将介绍在java后端应用中需要知道的的html知识
* html
1. html代码写在以.html 或 .htm结尾的文件中
2. html 超文本标记语言
* 标记语言的规则：
1) 使用<>包含一个名字就称为一个标记
<p> p标记
<a> a标记
2) 要求标记成对出现 起始标记 + 结束标记
<p> 起始标记
</p> 结束标记
<p></p>,<a></a> , <b></b> , <c></c>
3) 起始标记和结束标记中间可以编写其他的html内容(文本，标记),称为标记内容
<p>duyi is good</p>
<p> <b> duyi is good </b> </p>
4) 有些标记是不能写内容，称为空标记，可以将起始和结尾合二为一
<img />
5) 在起始标记中，可以设置标记的属性
* 有些标签自己就有一些特征，比如<b> 中的文字会加粗
* 有些标签会通过设置属性具备一些特征，比如<font> 通过属性设置文字的颜色，大小等
* 在起始标记中，按照key="value"形式编写，可以有多个属性使用空格隔开
<font color="blue" size="7">duyi</font>
6) 理论上标签区分大小写
7) 有且只有一个根标记
* 补充：<p> 有时称为标记，标签，元素，组件。
3. html执行
* html文件(内容)可以在浏览器上执行
1) 创建一个文本文件，修改后缀
2) 选中html文件，右键->打开方式->记事本(编码)
也可以使用ide 如：sublime text3
3) 选中html文件，右键->打开方式->浏览器(执行，展示)
----------------
4. html文件的基本结构
1) 有且只有一个根标记<html>
2) 根标记中使用<head>和<body>子标记将html网页内容分成2个大的部分
* 扩展：浏览器展示html内容
* 浏览器根据html文件路径，找到文件，读取文件内容(内部)
浏览器读取的文件内容，可以通过浏览器->右键->查看源代码 查看
* 浏览器读取html内容后，不会马上根据标签效果展示，而是做了一个处理
将某些内容按照正确的结构进行处理
这个处理后的效果，可以通过浏览器->右键->审查元素/元素/检查/按f12->浏览器控制台elements
* 按照处理后的内容在浏览器上展示
5. <head>部分常用的子标签
* <title>百度一下</title> 设置网页选项卡标题
* <meta charset="utf-8" /> 设置网页展示的中文编码
* <style> 编写或引入css代码
* <link /> 引入css代码 / 选项卡图标
* <script> 编写或引入javascript代码
* <base href="a/b/" /> 设置网页中多处请求资源的公共路径。
<a href="1.html"> -> a/b/1.html
<a href="2.html"> -> a/b/2.html
<a href="3.html"> -> a/b/3.html
6. <body>部分的常用子标签
* 不同标签会有不同的状态、效果
* 有些标签自带效果 <b> duyi </b>
* 有些标签通过设置属性体现效果 <font color="" size=""> duyi </font>
1) <body>自身就有一些属性效果效果
a) <body bgcolor="red"> 设置窗口区域的背景颜色
* 属性值暂时就记住使用英文单词
b) <body background="图片路径"> 设置窗口区域的背景图片
* 相对路径
当前HTML文件 ： c:/z/1.html
有一个图片文件 ： c:/z/1.jpg
background="1.jpg"
* 绝对路径
* 完整的图片路径 c:/z/1.jpg
-----
* 本地路径
c:/z/1.jpg
* 网络路径
http://www.baidu.com/p/1.jpg
2) 文字标签
<b> duyi </b> 文字加粗
<font color="red" size="7" face="楷体"> duyi </font>
* 设置文字的颜色，大小，字体
* 标签嵌套实现效果叠加
<i> duyi </i> 文字倾斜
<del> haha </del> 删除文字效果
<u> duyi </u> 下划线效果
<h1><h2>....<h6> 从大到小6级标题
* 独占一行
* 默认加粗
* 自带大小
* <h1 align="left/center/right" > 设置文字在行中的位置
<p> 段落标签
* 独占一行
* 有一定的行间距
* <p align="left/center/right" > 设置文字在行中的位置
代替一个空格距离
< 代替一个<
> 代替一个>
<br/> 代表一个换行效果
<marquee> 移动文字
* <marquee direction="left/right/up/down" scrollamount="10" >
3) 图片标签
<img /> 引入图片
* <img
src="图片路径" 引入图片的路径
width="" height="" 自定义图片展示宽高
alt="文字" 当图片路径错误，无法显示时，提供的一段代替文字
/>
4) 超链接标签
<a> 跳转另一个页面
请求另一个网页
* <a href="网页路径"> 根据网页路径，找到(请求)对应的网页，并将网页内容获得
* <a href="" target="" > 设置请求网页内容展示的位置。
* 默认： _self 展示在当前窗口 (原内容被覆盖，刷新)
* _blank 在一个新的空白窗口展示
* frameName 配合框架集标签，frameName那么就是框架集子窗口的名字
* _parent 配合框架集标签，_parent就是父级窗口
* 扩展： 超链接不仅可以请求另一个网页
还可以发送邮件 href=""
还可以触发javascript应用 href="javascript:mail()"
5) 框架集标签
* <frameset> + <frame>
* <frameset> 将当前窗口横纵分成n个子窗口区域
<frameset rows="100,120,*">
* 当前窗口横向分成3份
* 3个子窗口的高度分别是100,120和剩余
<frameset cols="100,120,*">
* 当前窗口纵向分成3份
* 3个子窗口的宽度分别是100,120和剩余
<frameset rows="" cols="">
* <frame>用来填充每一个子窗口区域 (子窗口)，请求，展示网页内容
* 根据frameset设计的子窗口区域数量，配上对应数量<frame>子窗口
* <frame src="网页路径" /> 请求当前子窗口要展示的网页内容
*注意： 编写html时，<frameset>要替代<body>
*超链接与框架之间的配合使用
<frame name="right" />自定义子窗口名字
---
<a target="right" > 请求到的网页内容，在指定名字的子窗口中展示。
---
<a target="_parent" > 请求到的网页内容在父级窗口展示
* 扩展：
<frame noresize="noresize" /> 设置窗口不能调整大小
<frame frameborder="0/1" /> 设置子窗口间的边框有无
* 扩展：
横纵嵌套使用
<frameset rows="100,*">
<frame />
<frameset cols="200,*">
<frame />
</frame>
</frameset>
</frameset>
6) 列表标签
a) <ul> + <li> 无序列表
<ul> 表示一块列表区域
<li> 是<ul>的子标签，表示一个列表项
一块列表区域可以有多个列表项
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
* 注意： 每一个列表项默认有一个符号
每一个列表项都有一个缩进
* <ul type="" > 设置不同的列表项符号
* disc 实心圆形 (默认)
* none 无符号
* square 实心矩形
* circle 空心圆形
b) <ol> + <li> 有序列表
* <ul type="" > 设置不同的有序符号
* 1 表示数字。
* a 表示小写字母
* A
* i 表示小写罗马数字
* I
c) <dl> + (<dt>,<dd>) 自定义列表
* <dl> 表示一块列表区域
* <dt> 是<dl>的子标签，表示一个自定义列表题目
* <dd> 是<dl>的子标签，表示一个自定义列表项
* 注意： <dt>和<dd>是兄弟关系
7) 表格标签
* 表格效果如同excel效果
* <table> + (<thead>,<tbody>,<tfoot>) + <tr> + (<td>,<th>)
* <table> 表示一块表格区域
* <thead>,<tbody>,<tfoot>将表格区域分成头，内容，尾3部分
* 可以不指定3个区域
* 浏览器在处理时，会自动增加<tbody>区域
* <tr>为表格(子)区域设置数据行区域
* <td>/<th> 为表格行区域设置单元格(内容)区域
* 表格属性
<table width=""> 设置表格区域的宽度
<table border="" > 设置表格区域的边框粗细
* 在为表格区域设置边框时，也会为表格中的单元格区域设置固定为1的边框。
<table cellspacing="0" > 设置单元格之间的留白
* 表格子区域没有属性
* 表格行属性
<tr height=""> 设置行高
<tr align="" > 设置行中所有单元格内容的水平位置(left center right)
<tr valign="" > 设置行中所有单元格内容的垂直位置(top center right)
* 表格单元属性
<td width="" height="" align="" valign="" >
* 扩展：
<th> 也是单元格标签，相比于<td>，有默认加粗和水平居中效果，一般多用于<thead>设置
* 扩展：
单元格合并属性
<td rowspan="3"> 以当前行的当前单元格为基准，向下将3个单元合并成1个单元格
<td colspan="3"> 以当前行的当前单元格为基准，向右将3个单元合并成1个单元格
8) 表单标签
* 在浏览器中会展示一些可输入或可选择或可点击效果：注册
* 表单的作用是发送请求，同时传递表单中输入、选择信息 (类似java调用方法传递参数)
* <form> 表示一个表单区域
* <form actino="save"> 可以设置表单发送的请求
* 包含一组表单标签(组件)，包含标签输入的信息才会随着请求进行传递
* 文本输入框： <input type="text" />
<input name="key" /> form请求时，只有设置了name属性值，输入的内容才能作为参数传递
* 因为请求传递参数时，每一个参数都需要由参数名和参数值组成
* 参数值就是组件输入的值
* 参数名就是name的属性值
<input value="" /> 设置默认值
<input readonly="readonly" /> 设置只读效果(不能改)
<input disabled="disabled" /> 设置禁用效果(不能改)
* 密码输入框：<input type="password" />
* 数字输入框：<input type="number" />
* 单选按钮： <input type="radio" />
* 多个单选按钮设置相同的name属性值，才能真正的单选
* 单选按钮必须设置value属性
* <input type="radio" checked="checked" /> 默认选中
* 扩展：<label> <input ... />男 </label>
* 多选按钮： <input type="checkbox" />
* 下拉列表框：
<select name="province">
<option value="hlj">黑龙江</option>
<option>吉林</option>
<option>辽宁</option>
</select>
* 默认选中哪个选项，请求传参时，就是哪个选项的值
* 可以为option设置value属性，改变传递至。
* <option selected="selected" > 默认选择
* 文本域 ： <textarea></textarea>
* <textarea name="" rows="5" cols="50">
* 文件上传选择框： <input type="file" />
* 隐藏域： <input type="hidden" />
* 按钮：
<input type="submit" value="提交" />
<button type="submit" >提交</button>
* 点击按钮后，会发送<form>指定的请求
<input type="reset" value="重置按钮" />
* 让<form>中的组件回复到初始效果
<input type="button" value="普通按钮" />
* 本身没有任何操作效果，配合js 可以自定义按钮效果
以上便是在后端开发中常用的html知识点，同学们如果觉得有帮助可以给作者点个赞和关注，后续将持续更新java方面更多知识点。
扫一扫
2294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
