大一上HTML的重点梳理（应该？）

AAA酒厂掺水销售员

已于 2023-03-30 23:14:17 修改

阅读量117

点赞数

分类专栏：上课笔记文章标签： html 前端

于 2023-03-29 01:28:05 首次发布

本文链接：https://blog.csdn.net/Emma_Black/article/details/129780630

版权

大一上HTML的重点梳理（应该？）

一、关于HTML
二、关于form表单
三、关于table标签
四、关于其他的需要记住的

一、关于HTML

1.HTML 定义
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言（最开始我都理解错了…毕竟接触的一个就是c语言），而是一种标记语言 (markup language)

2.关于标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、关于表单（form表单）

2.1表单的作用

HTML 表单可以用于搜集不同类型的用户输入。

为什么我们在称呼表单时会习惯性称为form表单？
因为其是定义HTML表单的元素，只要用HTML制作表单就免不了使用它，就像c语言的“form循环”一样（个人觉得，无参考依据，你杠就是你对）。

表单元素实例

<!DOCTYPE html>
<html lang="en">
<haead>
<meta charset="utf-8">
</haead>
<body>
    <form name="表单名称" method="表单提交方式" action="处理表单的文件">这是表单元素form</form>
</body>
</html>

效果如图

2.2、表单标签

表单标签大致有以下几个：input 、 textarea、 select。
他们必须要包含在form标签内！

2.2.1关于form表单属性

input标签他可以有多种属性
在这里插入图片描述

其输入格式如图`（每个属性的中文意思都在“”里）

    <form name="表单名称" method="表单提交方式" action="这里的字可以显现在网页上">这是表单元素form</form>

2.2.1.1 实践


```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<div align="center">
<h2>某绿色文学城</h2>
<form action="1.html" >
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<!--checked默认 没有加Name的时候可以多选-->
请你选择性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender"> 女
</p>
<p>
    
    请添加您偏向的书籍类型：<br ><!--<br>可以换行!!-->
    <input type="checkbox" value="言情" name="books">言情
    <input type="checkbox" value="耽美" name="books">耽美
    <input type="checkbox" value="衍生言情" name="books">衍生言情
    <input type="checkbox" value="二次元言情" name="books">二次元言情
    <input type="checkbox" value="纯爱" name="books">纯爱
    <input type="checkbox" value="百合" name="books">百合
    <input type="checkbox" value="正剧" name="books">正剧
    <input type="checkbox" value="男频" name="books">男频
    <input type="checkbox" value="女频" name="books">女频
    </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮"><br>
<input type="file">
<--注意<p>标签的闭合！！！（应该是叫这个？）反正要注意p标签就像注意c语言的括号一样！-->
</p>
</form>
</div>
</body>
</html>

2.2.2关于input标签

在2.2.1的代码中，我们可以看到其中使用了input标签。那么input标签在其中起到了什么作用呢？

2.2.2.1input标签的type属性使用类型

元素中的type属性是最常见的属性之一，它有着多种使用类型。如下图所示

类型	作用
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

在这里，我们随机选用一个类型进行演示。
在这里插入图片描述

下面是代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML表单</title>
</head>
<body>
    <form>
        <p>这是随机抽取的input标签的type属性的使用类型</p>
        
        <input type="text" name="这是随机抽取的input标签的type属性的使用类型">
    </form>
</body>
</html>

type的其他使用类型均可以像此类使用

2.2.2.2input标签的action属性使用类型

input标签的action属性是在提交表单时执行的动作。见第一个代码块。

2.2.2.2input标签的method属性使用类型

methond规定在提交表单时所用的 HTTP 方法，他一共有两种使用类型：GET、POST。
其代码块如下图，

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML表单</title>
</head>
<body>
    <form>
        <form action="action_page.php" method="GET">
    </form>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8

最低0.47元/天解锁文章

AAA酒厂掺水销售员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
大一上HTML的重点梳理（应该？）

大一上HTML的重点梳理（应该？一、关于HTML二、关于form表单三、关于其他的需要记住的。
复制链接

扫一扫

专栏目录