JavaWeb--------HTML基础

煜9527

已于 2023-08-15 21:39:52 修改

阅读量7.5k

点赞数

分类专栏：编程文章标签： html 前端

于 2018-03-06 16:52:42 首次发布

本文链接：https://blog.csdn.net/sinat_41655101/article/details/79460487

版权

编程专栏收录该内容

100 篇文章 8 订阅

订阅专栏

一. 概念

二.常用标签

一. 概念

HTML 是用来描述网页的一种语言，指的是超文本标记语言 (Hyper Text Markup Language)。
“超文本”：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

“标记”：是一套标记标签 (markup tag)，HTML使用标记标签来描述网页，大多数都是成对出现。HTML不是编程语言。

打开某个网页只需要单击右键，然后选择“查看源文件”就会打开一个包含页面 HTML 代码的窗口。

HTML的语法和规范：HTML文件的后缀是 .html或.htm，建议使用 .html 。HTML忽略字母大小写，建议编写时候使用小写。HTML超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

HTML 元素：指的是从开始标签（start tag）到结束标签（end tag）的所有代码。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素），HTML 文档由嵌套的 HTML 元素构成。HTML元素又分为块元素和内联元素，块元素（如：<h1>,<p>,<div>,<span>,<ul>,<ol>,<table>）在浏览器中显示时通常会以新行来开始和结束；内联元素（如：<b>,<td>,<a>,<h1>,<img>,<h1>,<h1>,）在浏览器中显示的时候通常不会以新行开始。

HTML 属性：HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

<!DOCTYPE> 声明帮助浏览器正确地显示网页，它不属于超文本标记语言结构的范围。Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面，这就是 <!DOCTYPE> 的用处。常用的 DOCTYPE 声明参考 http://www.w3school.com.cn/tags/tag_doctype.asp链接。

二.常用标签

<! -- -->，注释
<html> </html>，在一个HTML文档中只能出现一次，定义整个HTML文档，将整个HTML文档的所有内容包括其中。
<head></head>，HTML文档的头部

<body></body>，HTML文档的主体部分

2.1 头部常用标签

<title></title>，定义文档的标题。仅可在 HEAD 元素内使用。位于 title 开闭标签之内的文本，都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。对于 Web 页，“Internet Explorer”会被自动追加到标题后。而在 HTML 应用程序(HTA)中，仅会显示指定的标题。

<base> </base>，标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

2.2 主体部分常用标签

<hr /> 画分隔线

<br /> 换行。 <br /> 与<br> 很相似。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

<h1> <h1/>～<h6> <h6/>，标题。数字越小在浏览器中显示的大小越大，当数字大于6时，把它看成6来处理。

<a href = ““> 链接是通过 <a href > 标签进行定义的，其中target属性，设置点击链接操作之后新窗口在哪打开。其中，a标签，也叫anchor（锚点）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接标签</title>
	</head>
	<body>
		<a href="../列表标签/02_有序列表.html" target="_blank">点我有惊喜！</a>
	</body>
</html>

<p> 段落

<font></font> 字体。<size></size> 字体大小，1到7，大于7时按7处理。不建议使用，用style代替。

style属性，使用style属性改变背景颜色（bgcolor作用），style属性淘汰了旧的"bgcolor"属性；使用style属性设置颜色、字体和尺寸，style属性淘汰了旧的<font>标签；style属性设置文本对齐方式，style属性淘汰了align属性。

<html>
<body style = "background-color:yellow">
<h1 stye = "background-color:red>This is a Heading</h1>
<p style = "background-color:green>This is a Paragraph</p>
<h2 style = "font-family:verdana">A Heading</h2>
<p style = "font-family:arial;color:red;font-size:20px;">A Paragraph</p>
<h3 style = "text-align:center;">A Heading</h3>
<p>The heading above is aligned to the center of the page</p>
</body>
</html>

<b></b>字体加粗

<i></i>斜体字

<image></image> 图片标签，src=""是图片的路径，../ 是向上一级目录。alt，图片无法正常显示时候的提示信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		<img src="../../img/logo2.png" width="150px" height="30px" alt="logo图片"/>
	</body>
</html>

<ul>无序列表标签

<li>每一行的具体值</li>

</ul>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul type="square">
			<li>CSDN</li>
			<li>百度</li>
			<li>京东</li>
		</ul>
	</body>
</html>

运行结果：

<ol>有序列表标签

<li>每一行的具体值</li>

</ol>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol start="4" reversed="reversed" type="a">
			<li>CSDN</li>
			<li>百度</li>
			<li>京东</li>
		</ol>
	</body>
</html>

运行结果：

<table>表格标签

<tr>

</tr>

</table>

案例，表格标签的跨行，代码如下：cellspacing边框与边框之间的距离 cellpadding边框与内容之间的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格的跨行跨列操作</title>
	</head>
	<body>
		<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
			<tr>
				<td colspan="2" align="center" width="250px" height="50px">
					<img src="../../img/1.jpg" height="100%" width="100%"/>
				</td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">
					<table border="1px" align="center" width="100%" height="100%">
						<tr>
							<td>11</td>
							<td>12</td>
							<td>13</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
							<td>23</td>
						</tr>
						<tr>
							<td>31</td>
							<td>32</td>
							<td>33</td>
						</tr>
					</table>
				</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				
			</tr>
			
		</table>
	</body>
</html>

运行结果：

<form> </form> 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。在浏览器中显示的部分直接文字，而要提交到服务端的部分必须使用value来定义；而多个radion单选框如果要组合使用必须name 一样；如果自己对输入框给一个默认值radio 和 checkbox用checked属性，而select 用selected 属性。给出具体案例，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签属性介绍</title>
	</head>
	<body>
		<form action="#" method="get">
			隐藏字段:<input type="hidden" name="id" value="" /><br />
			用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="请输入用户名"/><br />
			密码：<input type="password" name="password" required="required"/><br />
			确认密码：<input type="password" name="repassword"/><br />
			性别：<input type="radio" name="sex" value="男"/>男
			<input type="radio" name="sex" value="女" checked="checked"/>女<br />
			爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
			<input type="checkbox" name="hobby" value="打电动"/>打电动
			<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
			头像：<input type="file" name="file"/><br />
			籍贯：<select name="province">
				<option>--请选择--</option>
				<option value="北京">北京</option>
				<option value="上海" selected="selected">上海</option>
				<option value="广州">广州</option>
			</select><br />
			自我介绍：
				<textarea name="zwjs">
					
				</textarea><br />
			提交按钮：<input type="submit" value="注册"/><br />
			普通按钮：<input type="button" value="zhuce"/><br />
			重置按钮：<input type="reset" />
		</form>
	</body>
</html>

运行结果：

get 和 post 的区别：

Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：

1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。其中，Get是Form的默认方法。Get 方式需要使用 Request.QueryString 来获取变量的值；而 Post 方式通过 Request.Form 来访问提交的内容。

2、Get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接，置于 action 属性所指程序的 url 后，如http://www.mdm.com/test.asp?name=asd&password=sad，数据都会直接显示在 url 上，就像用户点击一个链接一样；Post 方法通过 HTTP post 机制，将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端交由 action 属性能所指的程序处理，该程序会通过标准输入(stdin)方式，将表单的数据读出并加以处理。

3、Get方式提交数据，不安全。比如一个登陆页面，通过 Get 方式提交数据时，用户名和密码将出现在 URL 上，如果页面可以被缓存或者其他人可以访问客户这台机器，就可以从历史记录获得该用户的帐号和密码，所以表单提交建议使用 Post 方法；Post 方法提交的表单页面常见的问题是，该页面如果刷新的时候，会弹出一个对话框。

4、Get传输的数据量小，一般限制在 2 KB 左右，但是执行效率却比 Post 方法好，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。

5、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。使用Post传输的数据，可以通过设置编码的方式正确转化中文；而Get传输的数据却没有变化。在以后的程序中，我们一定要注意这一点。

建议：出于安全性考虑，建议最好使用 Post 提交数据；除非你肯定你提交的数据可以一次性提交，否则请尽量用 Post 方法。

<frameset> </frameset>，HTML框架结构标签。注意：<frameset>和<body>两者不能共存。

<frame> </frame>，框架标签。

<frameset cols="25%,*">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

案例，实现一个网站系统的后台显示页面。其中，第二个<frameset>中又分开了两个<frame>，相当于将这个<frameset>整体作为第一个<frameset>中的一个<frame>项。其中<frame name="right">与下文中的target="right"，两个right一致。实现代码，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示页面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>

top.html代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font size="7">欢迎XXXX进入后台管理系统</font>
	</body>
</html>

left.html代码为：其中target="right"与上文中的<frame name="right">，两个right一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br /><br />
		<a href="#">品牌管理</a><br /><br />
		<a href="#">商品管理</a><br /><br />
		<a href="#">分类管理</a>
	</body>
</html>

right.html代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息、
	</body>
</html>

运行结果:

分析：

完整的HTML标签列表（按字母排序）：http://www.w3school.com.cn/tags/index.asp 链接

完整的HTML标签列表（按功能排序）：http://www.w3school.com.cn/tags/html_ref_byfunc.asp 链接

------------------------------------------------ 我是低调的分隔线 ----------------------------------------------------

吾欲之南海，一瓶一钵足矣...

煜9527

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb--------HTML基础

一. 概念HTML 是用来描述网页的一种语言，指的是超文本标记语言 (Hyper Text Markup Language)。“超文本”：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“标记”：是一套标记标签 (markup tag)，HTML使用标记标签来描述网页，大多数都是成对出现。HTML不是编程语言。打开某个网页只需要单击右键，然后选择“查看源文件”就会打开...
复制链接

扫一扫