初学Java Web之HTML标签

HTML是对大小写不敏感的超文本标记性语言

文章目录

目录

前言

一、标签介绍

1. 语法

二、常用标签

1. font标签

2. 特殊字符

3. 标题标签-双标签

 4. ！超链接标签

5. 列表标签

6. img标签-图片标签

7. 表格标签

8.内置网页界面标签-iframe-双标签

9. 表单

10、div、span、p标签

---

---

---

前言

Java web是针对网页的，可以进行数据可视化，进行更好的展示于我们大家

一、标签介绍

algin 属性是定义位置，right右对齐 le'f't左对齐 middle 中间

1. 语法

(1). 标签不可以交叉嵌套

错误 ：<div><span>语法</div></span>

正确: <div><span>语法></span></div>

(2) 双标签要正确闭合

错误 ：<div>语法

正确: <div>语法></div>

(3) 单标签语法规范

错误 ：<br>  换行

正确:: <br />

(4) 属性要有值，值的内容要加""

(5) 注释不能嵌套

二、常用标签

1. font标签

​
<!--浏览器空白部分-->
        <!--color属性设置字体颜色，
        face属性设置字体样式
        size 属性设置字体大小，1-7（最大）浏览器默认三-->
<font color="#8a2be2" size="6" face="篆体">年后世界</font>

​

2. 特殊字符

3. 标题标签-双标签

h1（max） - h6 (min)【可以嵌套font标签更改字体样式】

<font color="#8a2be2" size="6" face="篆体">年后世界</font>
<h1><font color="#a52a2a"size="6">一级标签</font></h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
<h7>7</h7>

 4. ！超链接标签

a标签增加 href 属性，表跳转的网站链接 target = “目的地” 打开超链接的目的地跳转在哪

<!--
target= “-self”属性，表示打开的网站在当前页面
 target = “_blank”  是新页面
-->
<a href="https:\\www.bilibili.com" target="_blank"><font color="red"size="10">B站</font></a>
<a href="https://blog.csdn.net/jmgufss?spm=1011.2266.3001.5343" target="_self">B站</a>

5. 列表标签

分为有序列表，无序列表，自定义列表

<ul> </ ul>  无序列表

<ol> </ol> 有序列表

<ul type=""> <!-- ul代表无序列表,<li>代表列表中的每一项，ol 有序列表，前面有索引-->
    <li>
        你是我的世界
    </li>
    <li>
        我是你的一切
    </li>
</ul>

disc:默认。实心圆。	type属性
circle:一个空的圈子
square实心正方形。

6. img标签-图片标签

向网页中镶嵌图片【width 设置图片宽度 height 高度 border= “” 给图片加上边框 alt = "文本" 标签表示，如果没有找到图片 则用文本替代】

src 相对路径

.     表示当前文件所在的目录

..     表示当前文件上一级目录

文件名  表示当前目录下的文件

绝对路径

格式 http://ip:port/工程名/资源路径

<img src="img01.webp" border="2" width="128" height="72" alt="图片招不到">

7. 表格标签

【<table></table>标签代表整体表格 width代表整个表格的宽度 height 代表高度】

【<tr> </tr> 代表一行 】row

【<td > < /td>代表一个单元格】

【border 加边框】

【<th></th>代表表头（居中，加粗<b></b>）】

【cellspaceing 标签框边距】

<td>标签中 colspan = “x“ 跨列结合x个

rowspan = ”x” 跨行x个

<table align="middle" border="1" cellspacing="1" width="500" height = "300">
    <tr>
        <td colspan="2">1</td>
        <td>3</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">6</td>
        <td>7</td>
        <td rowspan="2">8</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>e>

8.内置网页界面标签-iframe-双标签

<iframe src =""> </ frame>

【sec 表示开始小网页显示的内容链接】

【width height】

【name = “” 给开辟出来的小网页起一个名字】

<iframe src="https:\\www.bilibili.com" width="300"
        height="300" name = "webx"></iframe>
<ul>
    <li> <a href="http:\\www.baidu.com" target="webx">百度</a></li>
    <li> <a href="https://blog.csdn.net/jmgufss?spm=1010.2135.3001.5343"
            target="webx">个人主页</a></li>
</ul>

9. 表单

<form> </ form>表单在HTML中收集用户的所有信息发送到服务器

1. action 表示数据发送的地址

2. method 表示发送的方式GET/POST

POST

1. 相较于GET安全，

2. 浏览器url = action

3. 没有数据长度的限制

GET

1. 不安全

2. 浏览器url= actio？name=vlaue&

3. 有数据长度的限制

数据没有提交服务器的三种情况

1. 没有name 属性

2. 单选 复选 下拉选择框select 中option都要有value属性 方便发送服务器

3. 表单项不在form表单内

<input  type = “”/>是输出框标签，

input 标签基本属性

value	表单默认值
name	表单元素的名字，也可分组
width	设置元素的宽度
height	设置元素的高度
maxlength	表示最多输入几个字符
style	设置css样式

type属性

type =“text”	创建单行文本输入框
type = “passwo”	创建单行密码输入框
type = “radio”	创建单选按钮（需要name继续分组）
type = “checkbox”	创建复选框
type = “button”	普通按钮value标签为按钮上的名字
type = “sumbit”	提交按钮
type = “reset”	重置按钮 value 可以更改数据
type = “imge”	图像按钮 点击会向服务器提交name值
type = “file”	文件域，在本地磁盘上提交文件
type = “hidden”“	隐藏域，为程序
type = ”url“	用与填写url字段
type = ”tel“	用与输入电话号码
type = ”email“	用与输入邮箱 不合规的格式会提示
type = ”color“	颜色选择器
type = "number	数字输入 mix min 限制 最大输入/最小的数值，step 为合法的数字间隔

type = ”date“ 用于输入日期控件 min限制最早时间 mix 设置最晚时间

<input type="date" min="2021-05-12" max="2022-08-05">

type = “month” value 默认值

<input type="month" value="2021-05">

type = “datetime”  日期加时间选择器

10、div、span、p标签

div标签 默认单独空一行

span     默认取决内容的长度一行输出

p           默认上方或下方空一行(如果有则不空)

<div>太阳</div>
    <div>阳光</div>
    <div>月亮</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p标签1</p>
    <p>p标签2</p>