Java Web html-优快云博客

本文详细介绍了HTML的基本语法和常用标签，包括文本格式化、图像插入、链接创建等，并深入讲解了表单、表格及框架的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：超文本标记语言，网页语言

超文本：超出文本的范畴，使用html可以轻松实现这样的操作

标记：html所有的操作都是通过标记实现的，标记就是标签格式：<标签名称>

后缀名为html或者htm

html的规范

1、一个html文件开始和结束的标签

开始：<标签> 结束：</标签>

2、html包含两部分内容

（1） <head>、设置相关信息 </head>

（2） <body>、显示在页面上的内容都写在body里面 </body>

3、html的标签有开始标签，也要有结束标签，必须成对出现

4、html的代码不区分大小写的

5、有些标签，只有开始标签，没有结束标签，在标签内结束

比如换行 <br/> 一条直线 <hr/>

6、标签可以嵌套使用

html的操作思想：网页的数据有很多，为了区分开来，必须用标签把相关数据封装起来，然后通过修改里面的属性值进行区分。

html中常用的标签

1、文字标签：修改文字的样式

属性：

size：文字的大小取值范围 1-7 超出了7，默认还是7

color：文字的颜色可以用英文单词表示，也可以用#ffff 16进制表示，用工具可以查。 RGB

2、注释标签： 这是2 个-

3、标题标签：

<h1> </h2>………<h6></h6> h1到h6依次变小，并且会自动换行

4、水平线标签： <hr/>

属性：和文字标签的属性一样表示

size：水平线的粗细

color：颜色

5、特殊字符：需要转换

< < > > 空格：  &：& 注册符®：&reg 版权符©：&copy

6、列表标签

<dl></dl>：表示列表的范围

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

<dd></dd>：下层内容

比如想要显示：你好啊

哈哈哈

大笨蛋

代码：<dl>

</dl>

（1）有序列表

<ol></ol>：有序列表的范围

属性 type：排序方式 1(默认)、a、i

在ol标签里面 <li></li>

显示 1.哈哈哈

2.大笨蛋

代码 <ol type =“1”>

</ol>

（2）无序列表

属性：type：circle（空心圆）、实心圆disc（默认）、实心方块square

在ul标签里面 <li></li>

7、图像标签必须掌握

属性

src：图片的路径

width：图片的宽度

height：图片的高度

alt：图片上显示的文字鼠标要移动到图片上，停留一会才会显示（很少用，兼容性差）

8、路径的介绍

分类：

绝对路径：C:/dog.png

相对路径：一个文件相对于另外一个文件的位置

比如 images/2.png

（1） html文件和图片在一个路径下，可以直接写文件名称

（2）上层目录的话：../ 上上层就是../../

9、超链接标签重点

（1）链接资源

<a href =“链接到资源的路径” target_black/self> 显示在页面上的内容 </a>

属性

href：链接的资源的地址

target：设置打开的方式，默认在当前页打开

_blank：在新窗口打开

_self：在当前页打开

当超链接不需要到任何的地址，在href后面加一个#。

（2）定位资源

首先要定义一个位置比如

10、表格标签重点

（1）<table></table>：表示表格的范围

属性：

border：表格线 “”或者‘’

bordercolor：表格线的颜色

cellspacing：间隙如果为0，即没有间隙

width：表格的宽度

height：表格的高度

（2）在table里面：<tr></tr> 表示行数，有几行就写几个

属性

设置显示方式 align：left/center/right

（3）在tr里面：<td></td> 表示单元格的数量，有几个就写几个。

如果单元格不需要要加个空格；

<th></th>也可以使用，居中加粗

比如 <tr>

<td>昵称 <input type ="text" name ="username"></td> 显示的效果为昵称一个文本框
</tr>

属性

设置显示方式 align：left/center/right

（4）表格的标题：<caption></caption>

（5）合并单元格哪个单元格跨的就在那个单元格进行属性设置

rowspan：跨行跨了多少行

colspan：跨列跨了多少列

11、表单标签：提交数据到服务器的过程可以使用表单标签（最重要的）

（1）<form></form>：定义一个表单的范围

属性：

acion：提交到的地址，默认提交到当前页面

method：表单的提交方式，常用的：get和post，默认get

如method=“post”

get和post的区别

A、get请求地址栏会携带提交的数据，post不会携带（请求体里面）

B、get请求安全级别较低，post较高

C、get请求有数据大小的限制，post没有限制

enctype：文件上传时候需要的属性

（2）输入项：可以输入内容或者选择内容的部分

在每个输入项里面必须有name 属性，选项框必须有value属性

大部分的输入项：<input type =“输入项的类型”/>

（1）普通的输入项的类型，如输入账号：text

（2）密码输入项的类型：password

（3）单选框的类型：radio 属性：name 属性值必须相同

如<input type =“radio” name =“sex”/>女 <input type =“radio” name =“sex”/>男

单选和多选框实现默认选中的属性：checked =“checked”

（4）多选输入项的类型：checkbox属性：name 属性值必须相同

（5）文件输入项，在上传时用到：file

（6）下拉输入项，不是在input标签里面

<select name=“”> <option value =“”></option> </select> 比如年月日3个下拉框，这个就是复制3个

比如 <select name =“生日”>

</select>年

</select>月

下拉输入项实现默认选中的属性：selected =“selected”

（7）文本域

（8）隐藏项，不会显示在页面上，但是存在于html代码里面

（9）提交按钮

使用图片提交

（10）重置按钮：表示回到输入项的初始状态

（11）普通按钮

12、其他常用标签的使用

b：加粗

s：删除线

u：下划线

i：斜体

pre：原样输出

sub：下标数学运算用的比如An n就是下标

sup：上标幂次方

div：自动换行

span：在同一行显示

P：段落标签，比br标签多一行

13、html头标签

html由head和body组成

在head里面的标签就是头标签

<title>：表示在标签上显示的内容

定时跳转到相关页面

<base>：统一设置超链接的打开方式

属性target：设置打开的方式。

_blank：在新窗口打开

_self：在当前页打开

13、框架标签：（基本不用）

属性 rows：按照行进行划分

<frameset rows =“80,*”> 分成2行，第一行为80，其他的为*

Cols：按照列划分

<frameset cols =“80,*”> 分成2列，第一列为80，其他的为*

<frame>：具体显示的页面

使用框架标签的时候，不能写在body里面，要把body去掉

转载于:https://www.cnblogs.com/zengjiao/p/6893035.html