HTML基础标签

╰半夏微凉° 2024-02-18 23:46 17阅读 0赞

**目录**

一.标签

1.单标签

2.双标签

二.列表

1.无序列表

2.有序列表

3.自定义列表

4.音乐标签

5.滚动

三.顶部mete

1.关键字

2.网页描述

3.网页重定向

4.链接外部样式表

5.icon图标

四.表格（展示数据）table

1.属性：

2.头和单元格合并

3.表格标题、边框颜色、内容垂直对齐

五.表单（收集信息）form（对java来说这个很重要）

表单的组成

◆文本输入框

◆密码输入框

◆单选框

◆下拉列表

◆多选框

◆多行文本框

◆ 文件上传控件

◆文件提交按钮

--------------------

## 一.标签 ##

### **1.单标签** ###

注释标签 ctrl+/  
换行标签 br  
水平线标签 hr

###    **2.双标签** ###

标题标签:h1-h6 取值到h6  
文本标签: font ( 颜色 大小)  
加粗标签:strong  
倾斜标签:em  
删除线标签:del  
下划线标签:ins  
图片标签:img src=”路径 ” alt=”替换文本 ” title=” 提示文本”  
超链接:a href=”路径 ” title=’’提示文本 ’’ target=” ”  
target=”\_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）  
Target=”\_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）  
锚链接:1.先定义一个锚点:p id=”sd”2.超链接到锚点:a href=”\#sd”  
空链：不知道链接到那个页面的时候，用空链a href=”\#”  
超链接优化写法：base target=”\_blank” 让所有的超链接都在新窗口打开（写在head里）  
**3.特殊字符**  
![这里写图片描述][70]

## 二.列表 ##

### **1.无序列表** ###

ul  
li /li 列表项  
/ul  
type=”square” 小方块  
Type=”disc” 实心小圆圈  
Type=”circle” 空心小圆圈

###    **2.有序列表** ###

ol  
li /li 列表项  
/ol  
type=”1,a,A,i,I” type的值可以为1,a,A,i,I  
start=”3” 决定了开始的位置。

###    **3.自定义列表** ###

dl  
dt /dt 小标题  
dd /dd 解释标题  
/dl

###    **4.音乐标签** ###

embed src=”” hidden=”true/false”

###    **5.滚动** ###

![这里写图片描述][70 1]

## 三.顶部mete ##

### **1.关键字** ###

mete name=”keywords” content=”内容”

###    **2.网页描述** ###

mete name=”description” content=”内容”

###    **3.网页重定向** ###

mete http-equiv=”refresh” content=”秒数；新网址”

###    **4.链接外部样式表** ###

link rel=”stylesheet” href=” ”

###    **5.icon图标** ###

link rel=”icon” href=” “

## 四.表格（展示数据）table ##

table 表格  
tr 行  
td/td 列  
/tr  
/table

###    **1.属性：** ###

Border=”1” 边框  
Width=”500” 宽度  
Height=”300” 高  
cellspacing=”2” 单元格与单元格的距离  
cellpadding=”2” 内容距边框的距离  
align=”left | right | center”  
如果直接给表格用align=”center” 表格居中  
如果给tr或者td使用 ，tr或者td内容居中。  
bgcolor=”red” 背景颜色。

###    **2.头和单元格合并** ###

表头 caption  
colspan=”2” 合并同一行上的单元格  
rowspan=”2” 合并同一列上的单元格

###    **3.表格标题、边框颜色、内容垂直对齐** ###

表格标题 用法和td一样  
标题的文字自动加粗水平居中对齐  
边框颜色bordercolor=”red”  
内容垂直对齐方式td Valign=”top | middle | bottom”

## 五.表单（收集信息）form（对java来说这个很重要） ##

## 表单的组成 ##

◆**提示信息(昵称，名字。。。。)**  
◆**表单控件**  
◆**表单域**  
form action=”” method=””  
属性：action:处理信息  
Method=”get | post”  
Get通过地址栏提供（传输）信息，安全性差。  
Post 通过1.php来处理信息，安全性高。

##    ◆**文本输入框** ##

用户名：input type=”text” maxlength=”6” readonly=”readonly” disabled=”disabled” name=”username”  
maxlength=”6” 限制输入字符长度  
readonly=”readonly” 将输入框设置为只读状态（不能编辑）  
disabled=”disabled” 输入框未激活状态  
name=”username” 输入框的名称  
value=”大前端” 将输入框的内容传给处理文件

###    ◆**密码输入框** ###

密码:inpu type=”password” name=”’pwd”

###    ◆**单选框** ###

inpu type=”radio” name=”pwd” checked=”checked”  
只有将name的值设置相同的时候，才能实现单选效果。  
checked=”checked” 设置默认选择项。

###    **◆下拉列表** ###

select  
option下拉列表选项/option  
/select  
属性：  
Multiple=”multiple” 将下拉列表设置为多选项  
Selected=”selected” 设置默认选中项目  
optgroup对下拉列表进行分组/optgroup  
Label=”” 分组名称。

###    **◆多选框** ###

inpu type=”checkbox” checked=”checked” 喝酒

###    **◆多行文本框** ###

textarea cols=”130” rows=”10”  
Cols 控制输入字符的长度。  
Rows 控制输入的行数

###    **◆ 文件上传控件** ###

input type =”fire”

###    **◆文件提交按钮** ###

input type=”submit”

**◆普通按钮(不能提交信息，配合JS使用)**  
input type=”button”  
**◆图片按钮(实现信息提交功能)**  
input type=”image”  
**◆重置按钮（将信息重置到默认状态）**  
input type=”reset”  
**◆表单信息分组**  
fieldset 对表单信息分组  
legend /legend 表单信息分组名称  
/fieldset  
html5补充表单控件  
![这里写图片描述][70 2]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a630d1f9ae8340ea9d3ed70a2933d9bb.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f388c3d16ef1485aa4c89297e494a561.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ad61264b1b1042dba21e91b2f5f9d1ac.png