HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/KeepStruggling/article/details/82319192

这篇博客介绍了HTML的基础知识，包括HTML的基本结构、标签分类、文本、列表、图像、链接、表格和表单的使用。强调了HTML标签的重要性，以及如何创建链接、表单和表格。还提到了HTML5中新增的表单控件类型。

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

1. HTML概述

超文本标记语言（超文本：功能更强大；标记语言：由标记显示网页各部分）
网页文件是通过添加标记符告知浏览器显示其中内容的文本文件。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程。
网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析

2. HTML的基本使用

2.1 HTML的基本结构

html：根元素，所有其他的元素都应该放在html内；
head：网页头部；
body：网页的主体；
：注释不可以嵌套

<!--这是一个HTML5-->
<!DOCTYPE html>
<!--根元素,lang表示语言-->
<html lang="zh-CN">
    <!--网页头部-->
    <head>
        <!--保存html页面时使用的码表，以及浏览器解析网页时使用的码表-->
        <meta charset="UTF-8">
        <title>标题</title> 
    </head> 
    <!--网页主体-->
    <body body的属性>
      	啦啦啦啦啦~啦
    </body>
</html>

2.2 HTML的标签

2.2.1 HTML标签分类

按是否含主体分
- 有主体的标签，即标签含开头和结尾
- 无主体的标签，即在结尾处直接加标签
有主体的意思是标签内部有封装数据
按是否换行分
- 块标签：每个标签独占一行，会自动换行
- 内联标签：标签本省不会自动换行，所有内联标签都在同一行。

2.2.2 文本标签

常用标签如下：

常用标签名	标签描述	常用属性
h1~h6	六级不同大小的标题（块标签）	align：标题对齐方式（center居中、right 右对齐、left 左对齐）;color：颜色
hr	水平线	align、width（长度）、size（粗细）
font（已过时）	设置字体	color、size、face（字体）等
b	加粗，与strong标签功能相同	/
I	斜体	/
br	换行，无主体标签	/
p	段落，无首段缩进，段落之间有间距	title：鼠标指着时显示一些提示信息

2.2.3 块标签与内联标签

div：块标签，分割页面，可用于文档布局；
span：内联标签，可用作文本的容器，以及为部分文本设置样式属性

2.2.4 列表标签

有序列表（ol-li）

<ol type = "type属性值">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

其中type可以是1、A、I

无序列表（ul-li）

<ul type = "type属性值">
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
</ul>

其中type可以是disc、circle、square

2.2.5 实体字符

使用对应的实体字符，用来显示特殊符号
实体字符的格式：以&开头，以分号结尾

常用特殊字符	对应的实体字符
<	`<`
>	`>`
空格	` `
￥	``¥`

2.2.6 图像标签

用来显示图片
基本语法
```
<img src="文件地址"/>
```
其中，src为图片地址

注意，idea工具浏览html时，如果src使用非该模块的图片时会被禁用访问

除此以外还有其他属性：

**width**：图片宽度；	**height**：图片高度；	**alt**：图片丢失后替代图片的文字说明；	**title**：鼠标指向时显示的提示信息

2.2.7 链接标签

作用：跳转页面、锚点链接、激活程序
常用属性

href 指定要跳转到的页面地址；

title 鼠标指向后显示的文字；

target _self 默认值，在当前的窗体中打开页面，_blank 在新的窗体中打开页面；

2.2.7.1 跳转页面

基本语法

<a href="链接地址">文字内容</a>

2.2.7.2 锚点链接

设置锚点
```
<a name="锚点名">文字内容</a>
```
跳转到锚点位置
```
<a name="#锚点名">文字内容</a>
```

2.2.7.3 激活程序

基本语法

<a href="mailto:邮件地址">文字内容</a>

2.2.8 表格标签

作用：
1. 用于显示大量的数据；
2. 可以进行网页布局

常用标签名：

标签名	作用
table	表格容器，不可见
tr	表示一行
th	列头，文字加粗和居中
td	普通的单元格，默认是左对齐
caption	表格的标题，出现表格的上面
thead	表格头部，不可见
tbody	表格的主体部分，浏览器解析会自动生成
tfoot	表格的脚步，不可见

常用的表格属性
- width：表格宽度
- border：表格的边框粗细
- align：对齐方式
- rowspan：单元跨行
- colspan：单元跨列
- cellspacing：控制单元格间的间隔
- cellpadding：控制单元格边框与内容之间的间隔

对于不规则的列数有两种解决思路

使用rowspan colspan 指定某一个单元格占指定的行数或者列数。
每一行都是一有一个单元格，单元格再嵌套table标签。

2.2.9 注意事项

width属性如果是写成”width=100%“，意味着该标签的宽度跟随其父标签的宽度

3. HTML表单

3.1 表单标签

作用：将浏览器的数据发送给服务器。
标签：<form>
可见性：表单标签在网页上不可见，是用来包含其他表单控件的容器。

3.1.1 form常用属性

常用属性	作用
action	提交给服务器的地址URL
method	提交的方式，两种提交方式：GET或POST

其中：GET与POST在格式上的区别

GET：默认提交方式，提交的数据会在浏览器的地址栏上显示。？分隔地址栏与参数，参数格式键=值，多参数用&分开。提交的数据大小有限制；

POST：提交的数据不会显示在地址栏上，安全性更高。提交的数据没有大小限制。

3.1.2 表单中的控件

<input>元素，包含以下几种常用type类型

表单项	控件代码	属性	备注
text，文本框（默认）	`<input type="text" name="名字">`	type：指定控件的类型 name：传递参数的名字 value：文本框中默认值 readonly：只读 disabled：不可用的 placeholder：用于文本框中的提示文字
password，密码框	`<input type="password">`	同上	输入的字符不可见
radio，单选框	`<input type="radio" name="gender" value="男" checked="checked">`	checked：默认选中一个 value：选中这一项的值	名字相同的单选框是同一组（所以必须有name属性），一组中只能选中一个
ckeckbox，复选框	`<input type="checkbox" name="hobby" value="摔♂跤" checked="checked">`	checked：默认选中一个 value：选中这一项的值	需要有name属性分组
hidden，隐藏表单域	`<input type="hidden" name="id" value="值">`	name：这一项的名字 value：选中这一项的值	表单不可见，一般用于一些不需要用户看到的数据
file，文件域	`<input type="file" name="photo" accept="image/*">`	accept：接收的文件类型
submit，提交按钮	`<input type="submit" value="提交">`	value：按钮上显示的文字	将个表单提交给服务器
reset，重置按钮	`<input type="reset" value="重置">`		还原到开始的状态
button，可点击按钮	`<input type="button" value="按钮">` 或者：看button元素介绍	onclick：点击后会执行的内容	主要用于后期程序开发，为该按钮添加具体功能
image，图片按钮	`<input type="image" src="图片地址">`		与submit功能相同

元素<select>：下拉列表；<option>元素：定义待选择的选项；

<select name="character">
    <option value="JoJo">JoJo</option>
    <option value="dio哒" selected="selected">dio哒</option>
    <option value="GioGio">GioGio</option>
    <option value="花京院">花京院</option>
</select>

JoJo dio哒 GioGio 花京院

其中，列表通常会把首选项默认显示，可用selected属性定义预定义选项。

元素<textarea>：文本域，用于多行输入字段
```
<textarea name="message" row="10",col="30">
    文本字段
</textarea>
```
其中：row：指定行数；col：指定列数
元素<button>：可点击按钮，用于后期程序开发，为该按钮添加具体事件
```
<button type = "button" onclick="alert('hello')">
    按钮
</button>
```
其中：onclick：点击后会执行的内容

元素<datalist>：为<input>规定预定义选项列表（HTML5新特性）

用户会在输入数据时看到预定义选项下拉列表
元素<input>的list属性必须引用<datalist>的id属性

<form>
    <input list ="browsers">
    <datalist id = "browsers"></option>
        <option value = "IE"></option>
        <option value = "safari"></option>
        <option value = "chrome"></option>    
    </datalist>
</form>

3.1.3 表单的常用属性

action属性：定义在提交表格时执行的动作。（指定表单提交的服务器地址）
- 向服务器提交表单通常用submit，且通常会被提交到web服务器上的网页；
- 可以用action属性指定服务器脚本来处理被提交的表单。eg：<form action ="acttton_page.php">
method属性：规定提交表单时所用的HTTP方法（GET或者POST）
name属性：**每个输入的字段必须设置一个name属性才能正确提交。**去除name属性后仍能正常显示，但不能被提交
元素<fieldset>：组合表单中的数据，可将表单中的内容封装在一起
- <legend>作为<fieldset>定义标题；
- <fieldset>使用style属性可改变整个圈内的文字等属性，而在<legend>使用style属性，仅修改<legend>元素内部的内容

注意事项（重要）

每个输入的表单项必须设置一个name属性才能正确提交！
提交的是表单中每个表单项的value值！
所以分为下面两种情况：
- 表单项可以输入数据时，必须有name属性，但可以没有value属性，此时提交的就是输入的数据；value属性可以设置，那么value的值就是默认值；
- 表单项不可输入数据时（如单选框），必须有value属性，此时提交的就是value属性值；可以没有name属性，不过可根据需求或标签要求增加name属性
checked属性：选上时checked=“checked”。如果通过其他方法给checked属性赋值，则：true是勾选，false是没勾选

3.1.4 HTML5中新增的type类型

值	描述
color	定义拾色器
date	定义日期字段（带有calendar 控件）
datetime-local	定义日期字段（带有calendar 和time 控件）
month	定义日期字段的月（带有calendar 控件）
week	定义日期字段的周（带有calendar 控件）
time	定义日期字段的时、分、秒（带有time 控件）
email	定义用于e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有spinner 控件的数字字段
range	定义带有slider 控件的数字字段
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
tel	定义用于电话号码的文本字段，在手机上操作会出现输入数字的键盘。
url	定义用于URL 的文本字段，在手机上操作会出现输入网址的键盘。