-
【从零开始的Java开发】2-8-1 HTML入门：标签、表格、表单
HTML简介
HTML，即Hyper Text Markup Language，超文本标记语言。
HTML文件结构：
第一个html文件<html> <head> <title>first.htmltitle> head> <body> 这是第一个页面 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
长成这样：
常用标签
字体标签
<font>...font>- 1
作用：规定文本的字体、字体尺寸（1-7，1最小，7最大）、字体颜色
如：<html> <head> <title>first.htmltitle> head> <body> <font size="7" face="隶书" color="red" > 这是第一个页面 font> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
颜色表示：RGB、十六进制、标签。
具体后面会细讲。段落标签p
<p>...p>- 1
作用：定义一个段落
如：<html> <head> <title>first.htmltitle> head> <body> <p>Java是一门面向对象的编程语言p> <p>Java是一门面向对象的编程语言p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
注意：- 段落内依据所在容器的宽度自动换行
- 浏览器会自动地在段落的前后添加空行
和
注释标签
- 1
作用：注释。
标题标签h
<h?>...h?>- 1
?处是数字，1-6，1最大，6最小。
作用：定义标题头的六个不同文字大小，依次显示重要性的递减。
注意：尽量靠近在html中的
标签，越近越好，以便让搜索引擎最快的领略主题。如：
<body> <h1> h1h1> <h2> h2h2> <h3> h3h3> <h4> h4h4> <h5> h5h5> <h6> h6h6> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
一般：- h1：大标题
- h2：副标题
- h3：栏目标题
图片标签img
<img src="***"/>- 1
作用：来浏览器显示图片。
常用属性：src，alt，height，width如：
<body> logo:<img src="1.jpg" alt="not find" /> body>- 1
- 2
- 3
若图片不存在，则显示
not find
若存在则显示图片：
还可以设置宽度和高度（不常用）：<body> logo:<img src="img/1.jpg" alt="not find" width="100px" height="100px" /> body>- 1
- 2
- 3
不过一般在css里面写高度和宽度。超级链接标签a
a标签：
...
作用：使用超级链接与网络上的另一个文件相连
注意：超链接可以是一个字，一个词，或一组词，也可以是图像：我们可以点击这些内容来跳转到新的文档或当前文档的某个部分。如：
<body> <a href="welcome.html">打开新页面a> body>- 1
- 2
- 3
<body> <h1>我的新页面h1> <a href="first.html"> 单击此处返回首页a> body>- 1
- 2
- 3
- 4
注意：打开一个网址需要加上http://A标签的target属性：
标签 格式 _blank 在新打开、未命名的窗口打开链接 _parent 在父窗口打开链接 _self 在当前窗口打开 _top _top目标将会清除所有被包含的frame框架 如：
<body> <a href="welcome.html" target="_blank">打开新页面a> body>- 1
- 2
- 3
点击后会产生新窗口。锚点标签
<a name="ziti">---a>- 1
作用：同一个文档中创建指向该锚（位置）的链接
注意：锚点必须先定义，再使用
用法：如：
<body> <p><a href="#num-1">锚点1p> <p><a href="#num-2">锚点2p> <p><a href="#num-3">锚点3p> <a name="num-1"> <p>num-1一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> a> <a name="num-2"> <p>num-2一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> a> <a name="num-3"> <p>num-3一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话 p> a> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
效果就是点哪里就跳转到哪里。
再另一个html文件上写：
<body> <h1>我的新页面h1> <p><a href="first.html#num-3"> first页面的锚点3a>p> body>- 1
- 2
- 3
- 4
则会跳转到first这个页面的num-3的锚点。
列表
无序列表
<ul><li>...li>ul>- 1
此列项目使用粗体圆点进行标记：
- 就
- 是
- 这
- 个
注意：列表内部可以使用段落、换行符、图片、链接以及其他列表等。
如：
<body> <ul> <li>ali> <li>bli> <li>cli> ul> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
显示：
- a
- b
- c
有序列表
<ol><li>...li>ol>- 1
- 就
- 是
- 这
- 个
如：
<body> <ol> <li>ali> <li>bli> <li>cli> ol> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
显示：
- a
- b
- c
阶段小结
表格
相关标签
table表格的开始和结束caption表格的大标题tr行的添加th列/单元格（意思一样）的标题td列/单元格border边框width宽度
如：
<body> <table border="1px" width="600px"> <caption>用户信息表caption> <tr> <th>姓名th> <th>密码th> <th>邮箱th> tr> <tr> <td>小明td> <td>123456td> <td>123456@youxiang.comtd> tr> <tr> <td>小红td> <td>111111td> <td>小红@youxiang.comtd> tr> table> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
显示：
合并行列
colspan列的合并rowspan行的合并
合并原则：向上、向左合并。
- 若是行的合并，则在要合并的第一行写代码
- 列：选最左的一列
语法：
colspan="?"？是数字，合并几个数字就是几（包括自己）如：
<body> <table border="1" width="600"> <caption>商品库存表caption> <tr> <th>商品类别th> <th>商品名称th> <th>单位th> <th>数量th> tr> <tr> <td rowspan="2">家电类td> <td>冰箱td> <td>台td> <td>123td> tr> <tr> <td>电视td> <td>台td> <td>456td> tr> <tr> <td>辅料td> <td>插线板td> <td>个td> <td>111td> tr> <tr> <td colspan="4">备注:td> tr> table> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
分组设置表格格式的标签
captiontheadtbodytfood
以上四个标签描述的范围：
如：<body> <table border="1" width="600"> <caption>商品库存表caption> <thead> <tr> <th>商品类别th> <th>商品名称th> <th>单位th> <th>数量th> tr> thead> <tbody> <tr> <td rowspan="2">家电类td> <td>冰箱td> <td>台td> <td>123td> tr> <tr> <td>电视td> <td>台td> <td>456td> tr> <tr> <td>辅料td> <td>插线板td> <td>个td> <td>111td> tr> tbody> <tfoot> <tr> <td colspan="4">备注:td> tr> tfoot> table> body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
这是用标签描述表格的范围：哪里是标题、哪里是页眉…等等，不会对显示有什么改变（caption会有改变）。相当于自己定义一个范围，之后用它。
相关属性
注意：Firefox、Chome、Safari仅支持colgroup元素的span和width。
属性 值 描述 align right
left
center
justify
char定义在列组合中内容的水平对齐方式 char character 规定根据哪个字符来对齐列组中的内容 charoff number 规定第一个对齐的字符偏移量 span number 规定列组应该横跨的列数 valign top
middle
bottom
baseline定义在列组合中内容的垂直对齐方式 width pixels
%规定列组合的宽度 如：按照数字的小数点对齐。
char表示自定义。属性char和charoff也是表示自定义——不过现在很多浏览器都不支持了。
相关代码改成：<td align="char" char=".">123.0td> ... <td align="char" char=".">456.00td> ... <td align="char" char=".">111.00000td>- 1
- 2
- 3
- 4
- 5
其他标签
属性名称 属性值 作用 border 1 设置边框 width npx,n%（相对于浏览器的宽度） 表格宽度 bgcolor 颜色值 表格背景 align left、center、right 表格在文档中的对齐方式 cellpadding npx 内容和边框之间的间距 cellspacing npx 单元格之间的间距 关于显示边框：
属性名称 属性值 作用 frame void 不显示外边框 frame border 四周都显示 frame above 显示上部的外边框 frame below 显示下部的外边框 frame hsides 显示上下的外边框 frame lhs 显示左部的外边框 frame rhs 显示右部的外边框 frame vsides 显示左右的外边框 关于单元格间距：
属性名称 属性值 作用 rules none 内边框将不被显示 rules rows 内边框将在行之间显示 rules cols 内边框在列之间显示 rules all 内边框将被显示 align left、center、right 三种水平对齐方式 valign bottom、middle、top 三种垂直对齐方式 表单
表单主要控件和实例
表单：用于收集用户信息，进行人机交互操作。
包含元素：文本框、单选按钮、列表框、图片框、复选框等。这些元素统称“控件”示例：
控件的常用属性：
代码实现：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单title> head> <body> <form action="" method=""> <label>请输入姓名：label> <input type="text" name="" id=""><br> <label>请输入密码：label> <input type="password" name="" id=""><br> <label>请重复输入密码：label> <input type="password" name="" id=""><br> <label>性别：label> <input type="radio" name="xb" id="" value="1"><label>男label> <input type="radio" name="xb" id="" value="0"><label>女label><br> <label>兴趣爱好：label> <input type="checkbox" name="" id="" value="1"><label>游泳label> <input type="checkbox" name="" id="" value="2"><label>看书label> <input type="checkbox" name="" id="" value="3"><label>爬山label> <input type="checkbox" name="" id="" value="4"><label>思考label><br> <label>生日：label> <select> <option value="1995">1995option> <option value="1996">1996option> <option value="1997" selected="selected">1997option> <option value="1998">1998option> select> <label>年label> <select> <option value="1" selected="selected">01option> <option value="2">02option> <option value="3">03option> select> <label>月label> <select> <option value="01" selected="selected">01option> <option value="2">02option> <option value="3">03option> select> <label>日label><br> <label>头像label><img src="img/1.jpg"> <select> <option value="1">1option> <option value="2">2option> <option value="3">3option> select><br> <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
显示：
表单其他控件
主要包括：
- 普通列表框（非下拉列表框）
- 隐藏域
- 上传控件
- 多行文本框
ps：
多行文本框一般用于论坛回帖、发帖。
单行文本框一般用于用户数据的收集。普通列表框
<select size="10"> <option value="1">1option> <option value="2">2option> <option value="3">3option> <option value="3">3option> <option value="3">3option> <option value="3">3option> <option value="3">3option> <option value="3">3option> <option value="3">3option> <option value="3">3option> select>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
显示：
隐藏域
000<input type="hidden">00000- 1
蓝色选中的这一块就是隐藏域——它不显示。
主要的作用是：信息传递。
上传
<input type="file"><input type="button" value="上传">- 1
多行文本框<body> <textarea rows="5" cols="30">请输入：textarea> body>- 1
- 2
- 3
-
相关阅读:
从零开始搭建仿抖音短视频APP-后端开发消息业务模块（1）
3.1版本【HarmonyOS 第一课】正式上线！参与学习赢官方好礼＞＞
Android Glide判断图像资源是否缓存onlyRetrieveFromCache，使用缓存数据，Kotlin
移位操作搞定两数之商
word文档
《UML和模式应用（原书第3版）》2024新修订译本部分截图
MySQL数据库分库分表
Linux命令大全
SpriteAtlas
使用 Azure 静态 Web 应用服务免费部署 Hexo 博客
- 原文地址：https://blog.csdn.net/karshey/article/details/126306474
