HTML之详解

玛 *

已于 2024-03-05 23:47:12 修改

阅读量462

点赞数 13

分类专栏： HTML 文章标签： html 前端 web3 web app

于 2024-03-05 15:04:55 首次发布

本文链接：https://blog.csdn.net/yeyihexizhu/article/details/136477622

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，基本标签

六类可放在head标签：

1，title标签

title标签的唯一作用是定义网页的标题。

2，meta标签

内容说明在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。

meta标签的两个属性	说明
name
http-equiv	定义网页所使用的编码；定义网页自动刷新跳转。

name常用的属性值	说明
keywords	网页的关键字，可以是多个内容
description	网页的描述
author	网页的作者
copyright	版权信息

<!DOCTYPE html>
<html>
	<head>
		<!--下面代码写全为：meta http-equiv="Content-Type" content="text/html;charset="utf-8"-->
		<meta charset="utf-8">
		<!--网页关键字-->
		<meta name="keywords" content="我的测试网页,前后端开发"/>
		<!--网页描述-->
		<meta name="description" content="我的测试网页是我通向网页制作道路的阳光大道"/>
		<!--本页作者-->
		<meta name="author" content="Satoru Gojo"/>
		<!--版权声明-->
		<meta name="copyright" content="本网站所有内容均为原创,版权所有,禁止转载。否则必将追究法律责任。"/>
		
		<title>我的测试网页</title>
	</head>
	<body>
	</body>
</html>

注意：如果页面打开后是乱码，很可能就是没有加上“<meta charset="utf-8">”这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上这句代码。

网页自动刷新跳转

下面的例子是网页打开6秒后，自动跳转到指定网址：

<meta http-equiv="refresh" content="6;url=https://www.csdn.net"/>

4，style标签

在HTML中，style标签用于定义元素的CSS样式，在HTML中不需要深入研究style标签，在CSS中我们再详细介绍。

    <head>
        <style type="text/css">
			/*这里写CSS的样式*/
		</style>
    </head>

5，script标签

在HTML中，script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。

    <head>
        <script>
			/*这里写JavaScript代码*/
		</script>
    </head>

5，link标签

在HTML中，link标签用于引入外部样式文件（CSS文件）。这也是属于CSS部分的内容，这里不需要深究。

<link type="text/css" rel="stylesheet" href="css/index.css">

6，base标签

这个标签一点意义都没有，可以直接忽略。知道有这么一个标签就行了，看到了直接忽略处理。

二、表单

表单标签	说明
form
input	大多数表单用input标签实现。属于自闭合标签，没有结束符号。
textarea
select
option

<input type="表单" />

form属性值	说明
name	表单名称；一个页面中表单可能不止一个，为了区分表单，使用name属性命名。
method	提交方式; method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个: 一个是get，get在安全性较差另外一个是post，post安全性较好在实际开发中都是使用post。
action	提交地址
target	打开方式
enctype	编码方式

<form name="myForm"></form>
   			
<form method="post"></form>
			
<form action="index.php"></form>
			
<form target="_blank"></form>

input标签的type属性取值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
buttion, submit, reset	buttion 普通按钮 submit 提交按钮 reset 重置按钮
file	文件上传

1,单行文本框

<form method="post">
    姓名：<input type="text" value="Tony" /><br/>
    年龄：<input type="text" maxlength="3" />
</form>

2,密码文本框

<form method="post">
    账号：<input type="text" value="Tony" /><br/>
    密码：<input type="password" value="123456" />
</form>

3,单选框

<form method="post">
    性别：
    <label><input type="radio" name="gender" value="男" checked /> 男</label>
    <label><input type="radio" name="gender" value="女" /> 女</label><br/>
    年龄：
    <label><input type="radio" name="age" value="20岁"  /> 20岁</label>
    <label><input type="radio" name="age" value="30岁"  /> 30岁</label>
    <label><input type="radio" name="age" value="40岁" checked /> 40岁</label>
</form>

4,多选框

<form method="post">
    你喜欢的运动：<br/>
    <input type="checkbox" name="fruit" value="跑步" checked/>跑步
    <input type="checkbox" name="fruit" value="篮球" />篮球
    <input type="checkbox" name="fruit" value="游泳" checked/>游泳
    <input type="checkbox" name="fruit" value="不喜欢运动" />不喜欢运动	
</form>

5,按钮

<form method="post">
    <input type="button" value="按钮" />
    <input type="submit" value="按钮" />
    <input type="reset" value="按钮" />
</form>

6,下拉列表

<form method="post">
    <select>
        <option>HTML</option>
        <option>CSS</option>
	</select>
</form>

7,多项文本框

<form method="post">
    个人简介<br/>
        <textarea row="5" cols="50" >请介绍一下你自己</textarea>
</form>

8,上传文件

<form method="post">
    <input type="file" />
</form>

属性（文本框）	说明
value	设置文本框的默认值，默认情况下文本框显示的文字。
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数。