HTML之JavaEE工程师应懂的技术

小白de成长之路

已于 2022-07-23 16:58:00 修改

阅读量549

点赞数

分类专栏：前端相关文章标签： java javaweb html 前端 JavaEE

于 2019-08-28 19:04:43 首次发布

本文链接：https://blog.youkuaiyun.com/Java__EE/article/details/100122127

版权

前端相关专栏收录该内容

2 篇文章

订阅专栏

一、HTML语言介绍

HTML: (HyperText Markup Language) 超文本标记语言，是网页开发的三大语言之一。

"超文本"就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
"标记"就是指页面编写方式采用的是标签形式将需要的内容包括起来。例如<p>这是内容</p>
平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码

二、动态网页和静态网页

网页根据内容是否改变分为：静态页面、动态页面
静态网页

静态网页，随着html代码的生成，页面的内容和显示效果就确定了，以后基本上不会发生变化了，数据都是固定写死的，页面不会对数据库进行访问。
静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
动态网页
而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术所生成的网页，都是动态网页。

三、常用标签

1.HTML文件的格式：

<html>    
	<head>        
		<title>这里写标题</title>    
	</head>    
	<body>
		这里里写各种标签及内容
	</body> 
</html

以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：

整个页面的根标签，由头和体组成。
头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

2、基本标签

2.1标题标签：

<h1>一级标签，共分为6级从h1到h6，h1字体最大，h6字体最小</h1>

2.2字体标签：

<font size="6" color="red">文字大小为6, 颜色为红色</font>
注意：该标签已过期

2.3段落标签

<p>我是段落1, 独自成为一段,段前段后各保留一个空行，但是首行没有缩进</p>

2.4换行标签

<br /> 或者<br >

2.5字体加粗、倾斜、下划线标签

<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>

注意：它们之间可以嵌套。

2.6水平线标签

<hr size="水平线的粗细" color="水平线的颜色" />

3、图片标签

<img src="img/1.jpg" width="300" height="300"/>        
<img src="img/1.jpg" alt="图片加载失败,才能看到我的文字!"/>

4、列表标签

ol是有序列表 type属性的值有1 A a I i ，start属性代表从几开始
ul是无序列表 type属性的值有disc空心圆、circle实心圆、suqare实心正方形，没有start属性

<ol type="1">    
 	<li>1</li>     
 	<li>2</li>     
 	<li>3</li>     
	<li>4</li> 
</ol>

<ul>
     <li>空心圆disc</li>
     <li>实心圆circle</li>     
     <li>实心正方形suqare</li>     
     <li>type的三个属性值</li>
</ul>

5、超链接标签

<!‐‐本地服务器‐‐> 
<a href="bendi.html" target="_blank">target属性值为_blank则在另一个页面或者标签页面内显示，值为_self则在本页面显示</a>
<!‐‐跳转到其它的服务器‐‐> 
<a href="http://www.baidu.cn" title="鼠标移上来显示的内容">百度一下，你就知道</a> 
<a href="mailto: xxxxxxx@163.com">给我发邮件</a>

6、表格标签

表单常用的标签
标签名作用
table 表格容器
tr 一行
th 表格的列标题：加粗，居中
td 一列
caption 表格的标题
thead 不显示任何的内容，在逻辑上将表格分成不同的部分，表示表格的头部(了解)
tbody 表示表格的主体，无论我们的代码中有没有tbody，在浏览器中都是存在的(了解)
tfoot 表示表格的脚部(了解)
表单常用的属性
属性名作用
width 表格宽度
border 表格外边框粗细
align 可以用在td，tr，table
rowspan 跨几行
colspan 跨几列
cellspacing 设置单元格之间的间隔
cellpadding 设置单元格边框与文字之间距离

<table border="2" width="500" align="center" cellspacing="0" cellpadding="8">
     <!‐‐标题‐‐>     
     <caption>学生成绩表</caption>     
     <!‐‐表格头部‐‐>     
     <thead>     
     <tr>         
     	<!‐‐表格的列标题‐‐>      
        <th>编号</th>        
        <th>姓名</th>         
        <th>性别</th>        
        <th>成绩</th>     
     </tr>     
     </thead>     
     <!‐‐表格主体‐‐>     
     <tbody>     
     <!‐‐内容居中对齐
    <tr align="center">         
    	<td>100</td>         
    	<td>潘金莲</td>         
    	<td>女</td>         
    	<td>80</td>     
    </tr>     
    <tr align="center">         
    	<td>200</td>         
   		<td>武大狼</td>         
    	<td>男</td>         
    	<!‐‐跨2行‐‐>        
    	<td rowspan="2">90</td>     
    </tr>     
    <tr align="center">        
    	 <td>300</td>         
    	 <td align="center">红太狼</td>         
    	 <td>女</td>     
    </tr>     
    </tbody>     
    <!‐‐表格脚部‐‐>    
     <tfoot>     
     <tr align="center">        
     	<td>总成绩</td>         
     	<!‐‐跨3列‐‐>         
     	<td colspan="3">900</td>     
     </tr>     
     </tfoot> 
     </table>

7、表单标签

7.1form表单标签

<form> 表单标签，表单标签在浏览器上没有任何显示。

作用: 收集浏览器用户进行输入的数据, 并把数据发送到服务器端
属性:
action：表示用户输入的内容, 被发送到服务器端的路径
method：表单数据发送方式。常用的取值：GET、POST

7.2form表单标签

<input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。

文本输入框:
属性type=“text” | value=“文本框的默认值” | placeholder=“输入框预期值的提示信息” | name：发送给服务器的名称
密码输入框:
属性type=“password” | placeholder=“输入框预期值的提示信息” | name：发送给服务器的名称
单选按钮:
属性type=“radio” | name=“定义名字”,同名的单选按钮可以保证单选 | checked=“checked” 默认选中属性, 需要注意: 属性很特别,属性名和属性值一样,固定写法
复选按钮:
属性type=“checkbox” | checked=“checked” 默认选中属性
文件域:
属性type=“file” | 文件上传服务器
按钮:
A普通按钮:
A 属性 type=“button” | value=“按钮上显示文本”
A用于配合后面的技术JavaScript

B重置按钮:
B属性 type=“reset”

C提交按钮: 表单数据发送到服务器
C提交按钮: 属性 type=“submit”
C图片按钮: 属性 type=“image”
文本域<textarea> 文本域。多行的文本输入控件。
cols属性：文本域的列数
rows属性：文本域的行数
下拉菜单<select> 下拉列表。可以进行单选或多选。需要使用子标签指定列表项
属性name：发送给服务器的名称 | multiple属性：不写默认单选，取值为“multiple”表示多选。
size属性：多选时，可见选项的数目。
–<option> 子标签：属于下拉列表中的一个选项（一个条目）。
– 属性selected ：勾选当前列表项 | value ：发送给服务器的选项值

<form action="#" method="get">
<!-- 文本输入框 -->
    用户名:<input type="text" value="" placeholder="请输入用户名" name="user"/> <br/>
<!-- 密码输入框 -->
    密　码:<input type="password" placeholder="请输入密码" name="pass"/> <br/>
<!-- 单选按钮 -->
    性　别:<input type="radio" name="gender" checked="checked"/>男
    	  <input type="radio" name="gender" />女 <br/>
<!-- 复选按钮 -->
    爱　好:<input type="checkbox" checked="checked"/ name="hobby">抽烟
    	  <input type="checkbox" name="hobby"/>喝酒
    	  <input type="checkbox" name="hobby"/>打牌 <br />
<!-- 文件域 -->		
    上传头像:<input type="file" /> <br />
<!-- 普通按钮 -->
    <input type="button" value="点我提交"/>
<!-- 重置按钮 -->
    <input type="reset" />
<!-- 提交按钮 -->
    <input type="submit" />
    <input type="image" src="img/btn.jpg"/>
<!-- 多行文本域 -->
    <textarea name="area" cols="50" rows="8"></textarea>
    <input type="submit" />
<!-- 下拉列表 -->
    <select name="city" multiple="multiple" size="5">
        <!-- 列表项 -->
        <option value ="beijing">北京</option>
        <option value ="shanghai">上海</option>
        <option value ="guangzhou">广州</option>
        <option value ="shenzhen">深圳</option>
        <option value ="hangzhou">杭州</option>
        <option value ="tianjin">天津</option>
    </select>

    <input type="submit" />
</form>

补充：

（1）服务器提交方式GET和POST区别

GET:
表单提交的参数,放在浏览器地址栏, 暴露敏感数据; 浏览器的地址栏数据有限的,不适合提交过大的数据
?user=tom&pass=123&gender=女&hobby=抽烟&hobby=喝酒
数据的格式 k=v 多个键值对使用 & 分割
服务器获取提交的数据,依靠是键
POST:
表单提交的参数,不会显示在地址栏上; 不会暴露敏感信息; 没有数据大小的限制

（2）HTTP协议区别:

GET: 参数放在请求行
POST: 参数放在请求体

8、div块级元素和span内联标签

div 元素是块级元素，浏览器会在其前后显示折行。它是可用于组合其他 HTML 元素的容器。常与 CSS 一同使用，可用于对大的内容块设置样式属性。常见的用途是文档布局。
span 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

9、框架集

frameset：称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割
rows: 指定视窗分割为几行, 进行每行空间占比的分配
cols: 指定视窗分割为几列, 进行每列空间占比的分配
frame: 则只是设定某一个框窗内的参数属性, 用来指定一个html网页
name: 设定这个框窗的名称

将页面分成几部分的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台框架集</title>
	</head>
<!-- 分为三部分，分别是：上半部分，左下部分、右下部分 -->
	<frameset border="1" rows="80,*">
		<frame src="top.html" name="top" />
		<frameset border="1" cols="20%,*">
			<frame src="left.html" name="left" />
			<frame src="right.html" name="right" />
		</frameset>
	</frameset>
	
</html>

上部分页面代码：

		我是top.html

左下部分页面代码：

		<a href="1.html" target="right">页面1</a> <br />
		<a href="http://www.baidu.com" target="right">target的属性值为right，右下部分的页面的name的属性值为right，所以点击后百度页面显示在右下页面中</a>

右下部分页面代码：