JavaWeb（1）-HTML

最新推荐文章于 2024-09-15 22:12:53 发布

陌生人的L

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量121

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/weixin_45525015/article/details/104155256

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML相关

简介

HyperText Markup Language，超文本标记语言，网页语言
后缀 .html .htm
所有操作通过标签实现

规范

1.一个HTML文件开始标签和结束的标签<html></html>
2.HTML包含两部分内容
（1）<head></head>设置相关信息
（2）<body></body>显示在页面上的内容
3.html的标签有开始标签也要有结束标签
4.代码不区分大小写
5.有些标签没有结束标签，在标签内结束
如换行<br/> <hr/>

常用标签

1.文字标签

修改文字的式样<font></font>
属性：size（取值范围1-7，超过7就默认是7）、
color（两种表示方式：英文单词、十六进制表示RGB）

2.注释标签

页面上不显示

3.标题标签

<h1></h1><h2></h2>...<h6></h6>
大小依次变小，自动换行

4.水平线标签

<hr/>
属性size（粗细，1-7）、color

5.特殊字符

进行转译< < > > 空格   & &

6.列表标签

<dl></dl>
在dl里面 <dt></dt>：上层内容
在dl里面 <dd></dd>：下层内容

<dl>部门
	<dt>人事部</dt>
	<dt>财务部</dt>
	<dt>设计部</dt>
</dl>

7.有序列表

范围 <ol></ol>
属性 type 排序方式 1（默认），a，i
在ol标签里 <li></li>

<ol type="i">
	<li>人事部</li>
	<li>财务部</li>
	<li>设计部</li>
</ol>

8.特殊符号

<ul></ul>
属性设置：空心圆，实心圆，方框
ul里边写li

<ul type="circle">
	<li>人事部</li>
	<li>财务部</li>
	<li>设计部</li>
</ul>

9.图像标签

<img src="a.jpg" width="200" heigh="300"/>

src：图片的路径
width：图片的宽度
height：图片的高度
alt ：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容（有些浏览器不显示）
路径介绍
1.绝对路径 c:\abc\a.jpg
2.相对路径
一个文件相对于另外一个文件的位置
三种写法
（1）html文件和图片在一个路径下，直接写文件名称

<img src="a.jpg" width="200" heigh="300"/>

（2）在html文件中使用img文件夹下的a.jpg，1.html和img在一个路径下

<img src="img\a.jpg" width="200" heigh="300"/>

（3）图片在html所在目录的上层目录
html文件所在目录与图片是一个目录
…/ 表示上一层目录

<img src="../a.jpg" width="200" heigh="300"/>

10.超链接标签

（1）链接资源

<a herf="a.html" target="_blank">这是一个超链接</a>
<a herf="#">这是一个不跳转的超链接</a>

href：链接资源的地址
target：设置打开方式，默认在当前页打开（_blank新窗口打开 _self当前页打开）
（2）定位资源
想要定位资源：定义位置

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

11.表格标签

例：两行两列

<table border="1" bordercolor="blue" cellspacing="0" >
<caption>信息</caption>
	<tr>
		<td colspan="3">合并单元格</td>
	</tr>
	<tr>
		<td>姓名</td>
		<td>性别</td>
	</tr>
</table>

table的属性
border="1"表格线
bordercolor="blue"表格线颜色
cellspacing="0"单元格之间的距离
tr、td设置显示方式：居中靠左靠右，align：left right center
th同td使用，默认设置加粗，居中
表格标题<caption></caption>
合并单元格：rowspan跨行，colspan跨列

12.表单标签

表单范围<form></form>
输入项：可以输入内容或者选择内容的部分

<form method="get">
普通输入项<input type="text" name="simple"/>
密码输入项<input type="password" name="pwd"/>
单选输入项<input type="radio" name="sex" value="male" checked="checked"/>男<input type="radio" name="sex" value="female"/>女
复选输入项<input type="checkbox" name="city" value="jilin" checked="checked"/>吉林<input type="checkbox" name="city" value="beijing"/>北京
文件输入项<input type="file"/ name="file">
下拉输入项<select name="birth">
				<option value="1990" selected="selected">1990</option>
				<option value="1980">1980</option>
				<option value="1970">1970</option>
			</select>
文本域<textarea name="text" cols="10" rows="10"></textarea>
隐藏项<input type="hidden" name="hide"/>
提交按钮<input type="submit" value="提交"/>
使用图片提交<input type="image" src="a.jpg" />
重置按钮<input type="reset"/>
普通按钮<input type="button" value="普通按钮"/>
</form>

单选输入项、复选输入项必须要有name，且name必须相同，必须要有value值
所有输入项必须要有name属性
form的属性：
（1）提交按钮默认提交到当前页面，指定提交地址，在form的属性action设置
（2）method属性通常两种get,post
get请求会携带提交的数据，post不会携带（在请求体中）
get请求安全级别较低，post较高
get请求数据大小的限制，post没有限制
（3）enctype属性，一般情况下不需要设置，文件上传时要设置
普通按钮与js一起使用

13.其他标签

b 加粗 u 下划线 i 斜体 s 删除线
pre 原样输出
sub 下标 sup 上标
p 段落标签，比br标签多一行
div 自动换行 span 不自动换行

14.html的头标签的使用

head 中：
title：在标签上显示的内容
meta：设置页面的一些相关内容

<head>
<title>定时跳转页面</title>
<meta http-equiv="refresh" contant="3;url=a.html" />
</head>

base标签：设置超链接的基本设置
可以统一设置超链接的打开方式

<base target="_blank" />

link标签：引入外部文件，可以引入css文件

15.框架标签

frameset
rows：按照行进行划分
cols：按照列进行划分

<frameset rows="80,*">
<frameset cols="80,*">

frame：具体显示的页面

<frame name="lower_left" src="a.html">

使用框架标签不能写在body里，需要把body去掉

<frameset rows="80,*">
	<frame name="top" src="a.html">
	<frameset cols="80,*">
		<frame name="bottpm_left" src="b.html">
		<frame name="bottom_right" src="c.html">
	</frameset>
</frameset>