# HTML基础笔记总结

@Magotan

已于 2023-07-17 19:10:23 修改

阅读量107

点赞数 2

文章标签： html 笔记前端

于 2023-07-12 17:51:04 首次发布

本文链接：https://blog.csdn.net/zp12345670/article/details/131687315

版权

本文介绍了HTML中的基本元素，包括选择框、meta标签的作用，如字符集设定、页面描述和关键字设置，以及重定向和页面刷新。此外，讨论了常见的HTML标签，如块级和行内标签，并讲解了长度单位，如px、em和相对单位。还详细阐述了超链接的用法和HTML表格的结构与属性，包括合并单元格的方法。最后，提到了HTML表单元素的属性，如autocomplete、required和各种input属性。

摘要由CSDN通过智能技术生成

1、选择框

<input type="checkbox">

checked 默认勾选

2、头部文件meta的作用

1、指定字符集

<meta charset="utf-8"

meta指定的字符集必须与声明的匹配，否则浏览器会出现乱码的现象

2、页面描述

<meta name="description" content="具体描述....">

name：名字

content：内容。只要设置Description页面描述，那么百度搜索结

果，就能够显示这些语。

3、关键字

<meta name="Keywords" content="网易，邮箱，游戏，新闻......">

就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率.

content中的内容能多写就多写

4、重定向

<meta http-equiv="refresh" content="3,http://www.baidu.com">   3s后跳转页面
<meta http-equiv="refresh" content="30"> 30s刷新当前页面

5、页面刷新

<meta http-equiv="refresh" content="3">

6、定义网页作者

<meta name="author" content="Jimbo">

3、常见的几种标签

常见的块级标签

display:block

独占一行，可以设置宽高

标签描述
h1~h6 标题标签
div 常用块级容器
hr 水平分隔线
ol 有序列表
ul 无序列表
li 列表项
dl 自定义列表
dt 自定义列表项
dd 定义描述
table 表格
p 段落
form 交互表单
常见的行内块级标签

display:inline-block

排列在一行，可以设置宽高

img 图片标签
常见的行内级标签

display:inline

排列在一行，不可以设置宽高

标签	描述
h1~h6	标题标签
div	常用块级容器
hr	水平分隔线
ol	有序列表
ul	无序列表
li	列表项
dl	自定义列表
dt	自定义列表项
dd	定义描述
table	表格
p	段落
form	交互表单

标签	描述
span	常用内联容器，定义文本内区块
a	锚点，超链接
b	加粗
strong	加粗强调
i	斜体
em	斜体强调
del	文档中已被删除的文本
br	强制换行
u	下划线
textarea	多行文本输入框
input	输入框
select	下拉列表
sub	下标
sup	上标
small	小字体文本

4、HTML与CSS中的长度单位

1、绝对长度单位

px 像素单位

in 英寸单位 1in=96px

cm 厘米单位 1cm == 37.8px

mm 毫米单位 1mm == 0.1cm == 3.78px

2、相对长度单位

em 相当于当前父级元素字体大小的单位，在没有CSS中没有任何规定时，1em=16px

rem 相当于根元素（html）的字体大小的单位，常用

html{
      font-size: 5.7px;
     }

3、可视区百分比长度单位

vw：包括滚动条；%：不包括滚动条

vw 可视区宽度单位 100vw=可视窗口的宽度

vh 可视区高度单位 100vh=可视窗口的高度

vmin 表示vw与vh中较小的单位

vmax 表示vw与vh中较大的单位注：webkit内核的浏览器支持vmin，但不支持vmax。

html{
      font-size: 4.9vw;
     }

5、超链接

<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a>

超链接用法:

链接本地文档，href=“本地文档的路径”；
友情链接，href=“友情链接网站的网址”，必须加上http或https；
图片链接，超链接的标签内容是图片；
建立电子邮箱的链接，href=“mailto:邮箱地址”；
链接本页面的某个位置；
设置锚点 <a name="锚点名">内容</a>
链接指向锚点 <a href="#锚点名">跳转到某点</a>

6、HTML表格标签

6.1 表格结构

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：

<caption>：用于定义表格标题。
<thead>：用于定义表格的头部。一般包含列名、行号等表头信息。
<tbody>：用于定义表格的主体。一般包含数据内容。
<tfoot>：用于定义表格的脚注。

定义行和列的标签：

<tr>：用于定义表格的一行。
<td>：用于定义表格的单元格。
<th>：用于定义表头单元格。

6.2 表格属性

属性名	含义	常用属性值	默认值
border	设置表格的边框	像素值	0，无边框
cellspacing	设置单元格与单元格之间的空白边距	像素值	2px
cellpadding	设置单元格内容与单元格边框之间的空白边距	像素值	1px
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格的在网页中的水平对齐方式

6.3合并单元格

跨行合并：rowspan；跨列合并：colspan。

合并的顺序：从上到下，自左到右。

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" height="500px" cellspacing="8" width="700px" align="center">
        <caption>
            <h2>课程表</h2>
        </caption>
        <thead align="center">
            <tr>
                <td>项目</td>
                <td colspan="5">上课</td>
                <td colspan="2">休息</td>
            </tr>
            <tr bgcolor="pink">
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>英语</td>
                <td>物理</td>
                <td>计算机</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>地理</td>
                <td>化学</td>
                <td>历史</td>
                <td>计算机</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>历史</td>
                <td>计算机</td>
                <td>物理</td>
                <td>化学</td>
                
                
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>地理</td>
                <td>化学</td>
                <td>历史</td>
                <td>计算机</td>
                
                
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>数学</td>
                <td>数学</td>
                <td>地理</td>
                <td>化学</td>
                <td>历史</td>
                <td>计算机</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>地理</td>
                <td>化学</td>
                <td>历史</td>
                <td>计算机</td>
            </tr>
        </thead>
    </table>
</body>
</html>

运行结果：

在这里插入图片描述

7、HTML中的表单元素

7.1表单的基本语法

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框

（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form> 标签来创建表单:

form表单属性：

<form action="表单内容提交网址" method="表单提交方法">
        表单元素....
    </form>

action 用于指定提交表单数据的请求URL。
method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

get和post的区别：

get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。
post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。

注：实际开发中，页面布局一般和table使用。

8、form表单属性

1、form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示：autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意:autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, tel,

email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：

2、form novalidate属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

无需验证提交的表单数据

3、input placeholder属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

4、input required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的标签：text, search, url, tel, email, password, date

pickers, number, checkbox, radio 以及 file。

5、input step属性（步长）

step 属性为输入域规定合法的数字间隔。

如果 step=“3”，则合法的数是 -3,0,3,6 等

提示：step 属性可以与 max 和 min 属性创建一个区域值.

**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month,

time 和 week.

6、input autofocus属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，自动地获得焦点。

7、input form 属性

form 属性规定输入域所属的一个或多个表单。

提示:如需引用一个以上的表单，请使用空格分隔的列表。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

8、input formaction属性

formaction 属性用于描述表单提交的URL地址.（提交地址）

formaction 属性会覆盖元素中的action属性.

注意: formaction 属性用于 type=“submit” 和 type=“image”.

9、input formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了元素的 method 属性**（get 、post）**

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。

10、input formnovalidate属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了元素在表单提交时无需被验证。

formnovalidate 属性会覆盖元素的novalidate属性.

注意: formnovalidate 属性与 type=“submit” 一起使用

11、input list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

12、input multiple 属性（可多选）

multiple 属性是一个 boolean 属性.

multiple 属性规定元素中可选择多个值。

注意: multiple 属性适用于以下类型的标签： file

13、input pattern 属性

pattern 属性描述了一个正则表达式用于验证元素的值。

注意:pattern 属性适用于以下类型的标签: text, search, url, tel, email, 和 password.

提示：是用来全局 title 属性描述了模式.

提示：在我们的 JavaScript 教程中学习到有关正则表达式的内容

14、input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意**😗* min、max 和 step 属性适用于以下类型的标签：date pickers、number 以及 range。

元素最小值与最大值设置:

15、其他表单控件

1、 <textarea> ：定义文本域 **(**一个多行的输入控件)

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和

width 属性。

缩放设置：

禁止缩放：resize: none;

水平缩放：resize: horizontal;

垂直缩放：resize: vertical;

水平垂直缩放：resize: both;

2、<label> :定义了<input> 元素的标签，一般为输入标题

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点

击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表

单控件上。

方式一：

for属性,让标签和指点的input元素建立关联,多数使用在单选或复选

给单选或复选后面的文字加入label标签,for属性值是input的id值

方式二：

将input元素包含在lable标签中

如果将input放置在label标签之间,那么for属性就可以不用