HTML知识点总结最终篇-CSDN博客

本文链接：https://blog.csdn.net/m0_74359055/article/details/131794401

本文介绍了HTML中的绝对路径和相对路径的概念，详细讲解了如何使用HTML的<img>标签插入图像，包括src、alt和title属性。接着，讨论了HTML表格的结构、属性和单元格合并。此外，还详细阐述了HTML表单的基本元素，如文本框、密码框、按钮等，以及表单的用途、语法和提交方式。

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

绝对路径和相对路径

1.绝对路径

绝对路径是一种固定的路径，在引用相同文件时，路径都是一样的。

2.相对路径

当不同的网页要引用相同的一个文件时，路径不一样，所以称相对路径。

🚨需要注意：

HTML图像标签

图像标签是由 <img>来定义的。它是一个空标签，所以没有闭合标签。

格式为：

<img src="图片路径" alt="text">

img标签属性有以下四点：

src属性：可以指定图片地址的来源。
width和height，能设置图片的高和宽，单位为px、%（css替代使用）。
alt属性：用来给图片定义一个可以替换的文本，当图片加载不出来时，它会告诉读者失去的信息。
title属性：当鼠标指向图片时，显示文字内容。

例：

<img src="../图片.jpg" alt="名字" title="james">

HTML表格标签

1.表格结构

<caption> 定义表格标题
<thead> 定义表格的头部
<tbody> 表格的主题
<tfoot> 表格的脚注

定义行和列的标签：

<tr> 定义表格的一行
<td> 定义表格的单元格
<th>定义表头单元格

2.表格属性

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

3.合并单元格

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

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

例：

<body>
    <table border="1" cellspacing="0" cellpadding="5" width="600" height="200" align="center">
        <caption>
            <h2>班级信息统计表</h2>
            <p>制表日期：7/23</p>
        </caption>
        <div id="aa1">
        <thead> 
            <tr bgcolor="yellowgreen">
                <th>姓名</th>
                <th>班级</th>
                <th>电话</th>
                <th>家庭住址</th>
                <th>邮箱</th>
                <th>专业</th>
            </tr>
            <tr>
                <td>周杰伦</td>
                <td>1班</td>
                <td>110</td>
                <td>上海</td>
                <td>110@qq.com</td>
                <td>大数据</td>
            </tr>
            <tr>
                <td>詹姆斯</td>
                <td>2班</td>
                <td>120</td>
                <td>美国</td>
                <td>120@qq.com</td>
                <td>大数据</td>
            </tr>
            <tr>
                <td>陈奕迅</td>
                <td>3班</td>
                <td>119</td>
                <td>北京</td>
                <td>119@qq.com</td>
                <td rowspan="2">大数据</td>
            </tr>
            <tr>
                <td>林俊杰</td>
                <td>4班</td>
                <td>111</td>
                <td>上海</td>
                <td>111@qq.com</td>
                
            </tr>
            <tr bgcolor="pink">
                <td align="center" colspan="6">以下为新同学</td>
            </tr>
            <tr>
                <td>林俊杰</td>
                <td>4班</td>
                <td>111</td>
                <td>上海</td>
                <td>111@qq.com</td>
                <td >大数据</td>
            </tr>
            <tr>
                <td>林俊杰</td>
                <td>4班</td>
                <td>111</td>
                <td>上海</td>
                <td>111@qq.com</td>
                <td >大数据</td>
            </tr>
            <tr>
                <td colspan="3" rowspan="3">总人数</td>
                <td colspan="3" rowspan="3">6人</td>
            </tr>
        </thead>
    </div>
    </table>

</body>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3joAE87g-1689678520043)(C:\Users\l\Desktop\HTML笔记\HTML笔记.assets\班级信息统计表-1689592130219-4-1689592132315-6.png)]

HTML基础表单元素

1.表单用途

表单可以用来收集用户的信息。

表示文档中的一个区域，这个区域包含交互插件，可以把用户信息发送到web服务器。

表单有三个基本组成部分：

表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域：有文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：有提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2.表单基本语法

我们可以用 form 标签来创建表单：

<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form

form表单属性：

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

get和post的区别：

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

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

3.表单的控件元素

input 是用来定义控件的。

控件名称	type属性值	描述
文本框	text(默认值	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮。(性别等)
复选框	checkbox	定义复选框。(爱好等)
提交按钮	submit	定义提交按钮。
重置按钮	reset	定义重置按钮（重置所有的表单值为默认值）。
普通按钮	button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
图片提交按钮	image	定义图像作为提交按钮。
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性。accept属性的值: image/* 接受所有的图像文件。 1.image/png 表示只接受图片文件的png文件。2. audio/* 接受所有的声音文件。 3.video/* 接受所有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple”

例：

<body>
    <form action="https://www.jd.com" method="post">
        <input type="哈哈哈" >
        <input type="submit"><br>

        <input type="text"><br>
        <input type="password">
        <input type="submit" value="请输入密码"><br>
        <label><input type="radio" value="1" name="q">已完成</label>
        <label><input type="radio" value="2" name="q">未完成</label><br>
        爱好：<input type="checkbox" id="1"><label for="1">打游戏</label> <input type="checkbox">打篮球 <input type="checkbox">跑步<br>
        <input type="reset">
        <input type="submit" value="确认">
        <input type="button" value="提交"><br>
        <input type="file" accept="image/*"><br>
        <input type="image" src="../乔丹.jpg" width="100">
        <textarea style="height:150px;width:150px;"></textarea><br>

效果如下：
在这里插入图片描述

4.其他的表单控件

<textarea> 可以定义文本域。

缩放设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;

例：

<textarea style="height:150px;width:150px;"></textarea>

效果如下：
在这里插入图片描述

在这里插入图片描述

2.<label> :如果 <label> 里有文本，就会触发，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

方法一：

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

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

例：

爱好：<input type="checkbox" id="1"><label for="1">打游戏

方法二：

1.将input元素包含在lable标签中

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

建议用方法二

例：

<label><input type="radio" value="1" name="q">已完成</label>
        <label><input type="radio" value="2" name="q">未完成</label>

3.<select> 、<option>

<select> 下拉选项列表

<option> 下拉列表中的选项（一个条目）。

size来定义列表中的列表项，在select中设置

multiple定义是否可以多选

4.<optgroup> :定义选项组

给列表项分组并且命名；

🚨注意：必须使用该标签的label属性才可以命名

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

例：

商品分类:<select>
            <optgroup label="电子产品">
                <option value="1">手机</option>
                <option value="2">电脑</option>
                <option value="3">手表</option>
            </optgroup>
            <optgroup label="生活用品">
                <option value="4">牙刷</option>
                <option value="5">毛巾</option>
                <option value="6">洗头膏</option>
            </optgroup>
</select>

效果如下：
在这里插入图片描述

5.<button> ：定义一个点击按钮

在 <button> 中可以放置内容，如文本和图像。这是与 <input> 按钮的不同之处。

🚨：始终为 <button> 规定type值。

type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致

6**.表单元素属性**

属性	值	描述
readonly	readonly	readonly 属性规定输入字段是只读的。
maxlength	number	属性规定 `<input>` 元素中允许的最大字符数。
disabled	disabled	disabled 属性规定应该禁用的 `<input>` 元素。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 `<input>` 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
selected	selected	下拉框的默认选中

5.HTML列表标签

1.无序列表

用 <ul> 定义无序列表。

如要给列表的小图标换样式，要用type：disc(默认值)、circle、square。

例：

<h3>标题 </h3>
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul

2.有序列表

用 <ol> 定义有序列表

列表图标更换样式，使用属性tupe值：1、a、A、i、I。

start属性：定义列表开始序号

value属性：定义单个列表项的序号。🚨设置之后,该列表项之后的值都随之变化

<h3>商品类型：</h3>
<ol>
<li>类型1</li>
<li>类型2</li>
<li>类型3</li>
</ol>

3.自定义列表

以 <dl> 标签开始。自定义列表以 <td> 开始。每个自定义列表项的定义以 <dd> 开始。

提示: 列表项内部可以使用段落、换行符、图片

<dl>
<dt>标题</dt>
<dd>描述1</dd>
……
</dl>

4.嵌套列表

有序列表和无序列表可以相互嵌套使用.

例：

<h4>嵌套列表：</h4>
<ul>
<li>奶茶</li>
<li>可乐
<ul>
<li>百事可乐</li>
<li>可口可乐</li>
</ul>
</li>
<li>牛奶</li>
</ul>

在这里插入图片描述

6.HTML内嵌框架

iframe语法：

<iframe src="URL"></iframe>

可以指向不同的网页

Iframe-设置高和宽用：height和width

Iframe - 移除边框: frameborder定义是否存在边框。可以设置属性值0来移除边框。

Iframe - 框架命名: name自定义框架名

HTML字符实体

字符	实体编号	实体名称	描述
	`&#160`	`&nbsp`	非间断空格（non-breaking space）

HTML知识点总结最终篇

目录

绝对路径和相对路径

1.绝对路径

2.相对路径

HTML图像标签

HTML表格标签

1.表格结构

2.表格属性

3.合并单元格

HTML基础表单元素

1.表单用途

2.表单基本语法

3.表单的控件元素

4.其他的表单控件

5.HTML列表标签

6.HTML内嵌框架

HTML字符实体