浅了解一下HTML

axbhealj

已于 2023-03-13 09:18:04 修改

阅读量102

点赞数 1

分类专栏：前端文章标签： html 前端

于 2023-03-07 20:50:14 首次发布

本文链接：https://blog.youkuaiyun.com/axbhealj/article/details/129391039

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML的基本概念，如网页的构成、HTML的全称及作用。重点讲解了HTML表单，包括form元素的属性如action和method，以及input元素的各种类型，如text、password和file等。还提到了select元素（下拉列表）和textarea（文本域）。最后，文章讨论了HTML框架标签iframe，展示了如何在同一个窗口中显示多个页面及其优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML

1.1 HTML概念

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

1.2 什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)
超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记:标签，不同的标签实现不同的功能
语言:人与计算机的交互工具

1.3 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

1.4 HTML书写规范

HTML标签是以尖括号包围的关键字例如<a> <img>
HTML标签通常是成对出现的，有开始就有结束
HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
属性放在开标签内
HTML标签不区分大小写,建议全小写
HTML标签支持合理的嵌套

二、HTML表单标签

html表单用于收集不同类型的用户输入数据

2.1 form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理

method:请求方式：get 和post

get:

地址栏,请求参数都在地址后拼接 path?name=张三&password=23456

不安全

效率高

get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：

地址栏：请求参数单独处理。

安全可靠些

效率低

post请求大小理论上无限；一般用于插入、删除、修改等操作

enctype:表示是表单提交的类型

默认值：application/x-www-form-urlencoded 普通表单

multipart/form-data 多部分表单(一般用于文件上传)

2.2 input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性值	描述	代码
text	单行文体框	< input type="text"/> 默认的
password	密码框	< input type="password"/>
radio	单选按钮	< input type="radio"/>
checkbox	复选框	< input type="checkbox"/>
date	日期框	< input type="date"/>
time	时间框	< input type="time"/>
datetime	日期和时间框	< input type="datetime"/>
email	电子邮件输入	< input type="email"/>
file	文件上传	< input type="file"/>
hidden	隐藏域	< input type="hidden"/>
submit	表单提交按钮	< input type="submit"/>
button	普通按钮	< input type="button"/>
reset	重置按钮	< input type="reset"/>

input标签中属性

- value 输入框的值

- name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

2.3 select 元素(下拉列表)

单选下拉列表：< select>< /select>

默认选中属性：selected="selected"

ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可

<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>

多选下拉列表属性： < select></ select>

多选列表：multiple="multiple"

<select multiple="multiple">
    <option></option>
</select>

2.4 textarea元素(文本域)

多行文本框： < textarea cols="列" rows="行">< /textarea>

三、HTML框架标签

- 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

- 使用框架的缺点：

- 开发人员必须同时跟踪更多的HTML文档

- 很难打印整张页面

3.1iframe

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>

<a href="demo2.html" target="myframe">页面2</a>
<a href="demo3.html" target="myframe">页面3</a>
<a href="demo4.html" target="myframe">页面4</a>

<!-- 
    iframe 内联框架标签
        src: 资源路径.当前页面加载,会自动从src指定的路径出加载出页面.该页面就出现在
             该框架内
        name: 定义该框架标签的名字
        width/height: 
 -->
<iframe src="demo1.html" name="myframe" width="600px" height="600px"></iframe>
</body>
</html>