【前端模块】HTML5标签

最新推荐文章于 2024-07-12 09:35:17 发布

_之桐_

最新推荐文章于 2024-07-12 09:35:17 发布

阅读量289

点赞数 1

分类专栏： —— 前端模块—— 文章标签： html web java

本文链接：https://blog.csdn.net/xt199711/article/details/105711293

版权

—— 前端模块—— 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、文件标签

文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签。用于指定html文件
title：标题标签
body：体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

二、文本标签

和文本有关的标签

注释：
h1 to h6：标题标签

h1 to h6:字体大小递减
p：段落标签
br：换行标签
hr：展示一条水平线

属性：
- color：颜色
- width：宽度
- size：高度
- align：对齐方式
  - center：区中
  - left：左对齐
  - right：右对齐
b：字体加粗
i：字体斜体
font：字体标签

属性
- color：颜色
- size：大小
- face：字体
属性定义

color
- 英文单词：red，yellow，blue
- rgb(值1，值2，值3)：指的范围在0-255，如：rgb(0,0,255)
- #值1值2值3：值的范围：00-FF之间，如：#0000FF
width
- 数值：width=‘20’，数值的单位，默认是px（像素）
- 数值%：占比相对于父元素的比例

三、图片标签

展示一张图片

四、列表标签

有序列表

ol：

li：

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

无序列表

ul：

li：

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

五、连接标签

a：定义一个超链接

属性
- href：指定访问资源的URL（统一资源定位）
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开

六、表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离，若指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
caption：表格标题
thead：表示表格的头部分
tbody：表格的体部分
tfoot：表格的脚部分

七、表单标签

用于采集用户输入的数据，用于与服务器进行交互

form：用于定义表单的，可以定义一个范围，范围代表采集数据的范围

属性
- action：指定提交数据的URL，跳转位置
- method：指定提交方式
  
  分类：一共7种，主要使用两种
  1. get：
    1. 请求参数会在地址栏中显式。会封装到请求行中
    2. 请求参数大小是有限制的
    3. 不太安全
  2. post
    1. 请求参数不会在地址栏中显式。会封装到请求行中
    2. 请求参数大小没有限制的
    3. 较为安全
表单中的数据想要被提交，就必须指定其name属性
```
<form action="#" method="get">
	用户名：<input name="username" type="text">
</form>
```

表单项标签：

input：可以通过type属性值，改变元素展示的样式

type

text：文本输入框，默认值

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动提空提示信息
password：密码输入框
radio：单选框（在默认值上加上checked）

注意：
1. 要想让多个实现框实现单选效果，则多个单元框的name属性必须一致
2. 一般会给每一个单元框提供value属性，指定其被选中后的值
3. checked属性，可以指定默认值
checkbox：复选框（在默认值上加上checked）

注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性们可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮
1. submit：提交按钮，可以提交表单
2. button：普通按钮
3. image：图片提交按钮
  
  src属性置顶图片位置
date/datetime-local：日期/日期时间
email：email的简单检验
label：指定输入项的文字描述信息

注意：label的for属性的一般会和input的ID属性值对应，若对应，则点击label区域，会让让input输入框获取焦点

select：下拉列表

子元素：option，指定列表项

textarea：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行

八、简单案例

<body>
<form action="#" method="get">
    <label for="username">用户名</label>:<input name="username" type="text" placeholder="请输入用户名" id="username"/><br>
    <label for="username">密码</label>:<input name="password" type="password" placeholder="请输入密码"><br>
    性别：<input name="sex" type="radio" value="male" checked>男
    <input name="sex" type="radio" value="female">女
    <br>
    爱好：<input name="hobby" type="checkbox" value="shopping">购物
    <input type="checkbox" name="hobby" value="java" checked>Java
    <input type="checkbox" name="hobby" value="game" checked>游戏
    <br>
    图片：<input type="file" name="pic">
    <br>
    生日:<input type="date" name="birthday">
    <br>
    邮箱：<input type="email" name="email">
    <br>
    省份：<select name="province">
    <option>---请选择一个省份--</option>
    <option>浙江</option>
    <option>上海</option>
    <option>江苏</option>
    </select>
    <br>
    自我描述： <br>
    <textarea cols="50" rows="5" name="dec" placeholder="请输入自我描述"></textarea>
    <input type="submit" value="login">
    <input type="button" value="button">
    <input type="image" src="../images/collection_icon.jpg">

</form>
</body>