HTML基础

已于 2023-09-13 14:23:30 修改
阅读量146 收藏 1
点赞数 1
分类专栏： 前端技术基础 文章标签： html 前端 java
于 2022-09-20 23:58:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiuCJ_20000/article/details/126964098
版权

标题## HTML & CSS

1.1 HTML的基本概述

HTML是由Web的发明者 [Tim Berners-Lee](https://baike.baidu.com/item/Tim Berners-Lee/1836386?fromModule=lemma_inlink)和同事 Daniel W. Connolly于1990年创立的一种[标记语言]。HTML通过标记式的指令(标签），将影像、声音、图片、文字动画、影视等内容显示出来。HTML文件编写完成之后，我们只需要通过浏览器解析该文件即可。

HTML : Hpyer Text Mark Language 超文本标记语言

  • 超文本 （图片、视频、音频、超链接等等…）
  • 标记 (特殊的符号)
  • 语言 (浏览器能识别的标记)

网页的组成：

HTML(结构)+CSS(样式)+JS(行为)

标签：描述HTML文件的必要部分。通过<标签名称>来描述标签。

  • 标签分为两种：
    • 第一种是单标签：<meta>
    • 第二种是双标签：<h2></h2> <font></font>
  • HTML文档的结构
<!-- 这表示HTML的版本，当前版本为HTML5的版本 -->
<!DOCTYPE html>
<!-- html表示一个网页的根标签  -->
<html lang="en"> 
	<!-- head表示网页头信息 -->
	<head>
		<!-- meta表示网页的元信息   charset="utf-8"  表示网页的编码格式   -->
		<link href="xx,css">
        <script src="xxx.js"> </script>
		<meta charset="utf-8">
		<!-- title表示网页标题 -->
		<title>这是网页标题</title>
	</head>
	<!-- body表示网页的正文  -->
	<body>
		
	</body>
</html>
<!-- 标签的属性  语法格式：  属性名="属性值" -->
<!-- 围堵标签、单标签 -->

解读：

  • <!DOCTYPE html>:声明文档的类型，告诉浏览器，这个文档是一个HTML类型的文档，那么浏览器在解析该文档时候，需要使用统一 的标准去解析该文档，这种标准就是w3c标准。

什么是w3c标准：

结构上：（标签规范对页面的搜索权重有很大关系，写的越规范网站在搜索排名越靠前）
        标签闭合、标签小写、不乱嵌套
表现、行为上：
        使用外链的css和js脚本，提高页面渲染效率。
        少使用行内样式，类名要做到见名知意
  • <html lang="en">:告诉搜索引擎，当前html文件使用的语言是什么。lang就是language的缩写。en：指的是英文。它只是告诉搜索引擎当前html文件的语言类型，并不是指定html文件内部的预约类型，如果我们在html文件里面定义中文也是可以的。
  • head标签：head标签用于定义html网页的头部，head是一个父标签，里面可以定义很多子标签，head标签中可以引用js和css以及对页面文档的标题等各种属性，并且head头部的数据是不会展示给用户。
  • <meta>: 定义HTML文档的各种元数据信息。charset：定义网页的编码格式。
  • <title>:描述网页的标题。
  • <body>:网页的主体部分。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body标签表示网页的主体部分，也就是用户可以看到的内容。

1.2 HTML的基本标签

按照类型划分，标签可以分为单标签和双标签。按照层级来划分，标签可以分为并列标签还有嵌套标签。

并列标签： <head></head><body></body>

嵌套标签：<body><h1></h1></body>

排版标签

  • 可用于实现简单的页面布局

  • 注释标签：

  • 换行标签：< br>

  • 段落标签：< p>文本文字</ p>

    • 特点：段与段之间有空行
    • 属性：align对齐方式(left、center、right)

  • 水平线标签:< hr/>

    • 属性:
      • ​ width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
      • ​ size: 水平线的粗细 (像素表示，例如：10px)
      • ​ color:水平线的颜色
      • ​ align:水平线的对齐方式

颜色的表示方式：

  • 第一种方式：用表示颜色的英文单词，例，red green blue
  • 第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405

文字标签

font标签处理网页中文字的显示方式

属性名代码描述
size< font size=“7”></ font>用于设置字体的大小，最小1号，最大7号
color< font color=“#f00”></ font>用于设置字体的颜色
face< font face=“宋体”></ font>用于设置字体的样式

文本标签

使用标签实现标签的样式处理

标签代码描述
b< b></ b>粗体标签
strong< strong></ strong>加粗
em< em></ em>强调字体
i< i></ i>斜体
u< u></ u>下划线
sub< sub></ sub>下标标签
sup< sup></ sup>上标标签
del< del></ del>删除线
1.2.1 双标签
文本格式化标签

<h1></h1>：设置字号的标签或者称为标题标签。最多可以到<h6></h6>。<h1></h1>字号是最大的。字号会随着数字的增大而变小。

<em></em>:设置字体倾斜的标签。标签<i></i>也可以描述斜体。

<del></del>:设置删除线标签。

<u></u>:设置下划线标签。

<font color="" size=""></font>：文字标签，可以通过这个标签定义文字的颜色和大小。color:描述文字的颜色。size:描述文字的大小，px为单位的大小。在html里面这个标签已经过时，如果我们想定义文字的格式，可以通过后面的css样式去实现。

<p></p>：段落标签。可以将p标签中的文字包含并形成一个段落。

<small></small>：设置小字号的文本。

<sup></sup>:上标字。

<sub><sub>:下标字。

<pre></pre>:用来表示预格式化的文本，标签

包围的内容一般会保留空格和换行符，该标签经常用来表示计算机源代码。

<address></address>：地址标签

<abbr></abbr>：当鼠标悬停在该标签的文本上的时候，会自动显示title属性里面的内容。

<bdo></bdo>：指定文本的排列顺序。rtl：从右向左排列；ltr:从左向右排列。

<blockquote></blockquote>：长引用标签，该标签包围的文本会被单独分离出来，并且文本左右两边会进行缩进。

<q></q>：用来表示短引用，该标签包围的文本周围一般会被打上引号。

以上标签的代码具体如下：

<!DOCTYPE html> <!-- html版本-html5 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本常用的双标签</title>
</head>
<body>
    <h1> hx(1-6) 字号标签/标题标签 </h1>
    <em> en 斜体标签 </em> ------ <i>i斜体标签</i><br>
    <del> del 删除线标签 </del><br>
    <font size="" colo="blue" face="仿宋">font 字体标签 属性：size(1-7)\face\colo</font><br>
    <p align="center"> p 段落标签 属性：align（对齐方式：left\center\right) </p>
    <small> small 设置小字号文本</small><br>
    上标字<sup> sup 上标字</sup> <br>
    下标字<sub> sub 下标字 </sub>

    <pre>
        pre 预格式化的文本：
            1.pre包围的内容一般会保留空格和换行
            2.该标签经常用来表示计算机源码
    </pre>

    <address>
        address 地址标签<br>地址1<br>地址2<br>
    </address>

    <abbr title="title显示提示性息"> abbr 鼠标悬停提示信息（title） </abbr><br>

    bdo 指定文本排列顺序：<br>
    <bdo dir="rtl"> rtl从右到左right to left </bdo><br>
    <bdo dir="ltr"> ltr从左到右left to right </bdo>

    <blockquote> blockquote 长引用标签，标签内的文本会被单独分离出来，并且文本左右两边会被进行缩进</blockquote>
    <q> q 短引用标签：文本周围会被打上引号</q>

</body>
</html>

图片标签

在页面指定位置处中引入一幅图片， < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt图片不存在、提示信息
title鼠标移到图片上显示的文字
  • 图片标签

标签使用格式：

<!--   格式 :<img 属性/> (单标签)   -->
<img src="图片路径" width="" height="" border="1px"
	 alt="图片不存在提示" title="悬停显示信息"/>

src:描述图片的路径。路径分为两种：一种是绝对路径，还有一种是相对路径。

title:鼠标悬停在图片上，现实的值。

alt:如果图片不存在，就显示alt的值。

width:设置图片的宽度。

height:设置图片的高度。

绝对路径：带有完整盘符名称+文件夹名称+文件名称的路径。

<!-- 发现通过vscode或某编译器打开的浏览器不能加载绝对路径图片，但使用相对路径时，图片正常显示并且从计算机你放的盘，进入这个绝对路径打开html文件时，图片可以正常加载;
在webstorm中，它帮你虚拟了一个服务器（可以认为在此虚拟服务器外的文件相当于在另一个电脑里），因此你点击webstorm右上角的浏览器图标打开网页时，网页路径是localhost:xxxx而你的图片也显示不出来；-->
<img src="C:\Users\kriss\Pictures\Saved Pictures\test.jpg" alt="美女" title="mm">

相对路径：如果图片和HTML在同一个目录下面,在src里面直接写文件的名称：

<img src="AudiA7.jpg" alt="奥迪A7" title="AudiA7" >

在这里插入图片描述

相对路径：如果图片位于HTML的下一级目录，在src里面写文件夹/文件名称：

<img src="images/AudiA7.jpg" alt="奥迪A7" title="AudiA7">

在这里插入图片描述

相对路径：如果图片位于HTML的上一级目录，在src里面我们使用…/回到上一级目录：

<img src="../img/BMW-THE7.jpg" alt="宝马7系" title="BMW-THE7">

在这里插入图片描述

  • 超链接标签
  • 在页面中使用链接标签跳转到另一页面
    • 标签： < a href=“”> 【xxxxxx】 < /a>
    • 属性：href:跳转页面的地址(跳转到外网需要添加协议)
  • 设置跳转页面时的页面打开方式，target属性
    • _blank在新窗口中打开
    • _self在原空口中打开
  • 指向同一页面中指定位置
    • 定义位置：
      • < p id=“名称”> < /p>
      • < a name=“位置名称”> < /a>
    • 指向： < a href=“#名称”> < /a>
    • < a href=“#top”> 回到顶部 < /a >

超链接的使用格式：

<a href="" target="">文本内容</a>

href:跳转到的目标地址。

target:描述新网页的打开方式。 _self:在当前窗口打开新网页。 _blank:在新的窗口中打开网页。

<a href="https://www.qq.com" target="_blank">[超链接]</a>

除了可以跳转到外部的网络站点，我们还可以在项目内部进行页面的跳转。

<a href="html-demo1.html" target="_blank">[跳转到]</a>

此外，a标签还有下载的功能

<a href="SecureCRT6.rar">[下载资源]</a>

在这里插入图片描述

通过a标签还可以实现锚链接的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <pre>
        属性：href:跳转页面的地址(跳转到外网需要添加协议)
        属性target:_blank在新窗口中打开、_self在原空口中打开
    </pre>
    <a href="https://www.taobao.com" target="_self">淘宝</a> <br>
    <pre>
        指向同一页面中指定位置
        定义位置： < a name="名称">  < /a>
                < p id="p/id"> p-id产生的位置 < /p>
        指向： < a href="#名称">  < /a>
       </pre>
    <!-- 定义一个锚链接 -->
    <a href="#p/id">[跳至tail位置] </a>
    <!--定义锚链接的标记点-->
    <a name="top">顶部位置</a>
        <img src="凯迪拉克.jpg"/>
    <a name="middle">中间部位</a>
        <img src="凯迪拉克.jpg"/>
    <p id="p/id"> p-id产生的位置 </p>
        <img src="凯迪拉克.jpg"/>
    <p id="tail">尾部</p>
        <img src="凯迪拉克.jpg"/>
    <!-- 定义一个锚链接 -->
    <a href="#top">【跳至top】</a>  <!-- 注意加#号!! -->
</body>
</html>
1.2.2 单标签

水平线标签： <hr>

换行标签：<br>

html元数据标签：<meta>

引入外部的css样式：<link>

图片标签: <img>

HTML里面的注释：<!--注释的内容-->

1.2.3 常用的特殊字符
特殊字符描述字符的代码
空格&nbsp;
>大于号&gt;
<小于号&lt;
©版权号&copy;
￥人民币符号&yen;
&连接号&amp;
>=大于等于&ge;
<=小于等于&le;
®注册号&reg;
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>特殊字符</title>
</head>
<body>
   <h1>Hello</h1>
   <hr>
   <p>大家好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今天学习HTML</p>
   5&nbsp;&nbsp;&ge;&nbsp;&nbsp;4  <br>
   5&nbsp;&nbsp;&le;&nbsp;&nbsp;6  <br>
   <hr>
   5&nbsp;&nbsp;&gt;&nbsp;&nbsp;4  <br>
   5&nbsp;&nbsp;&lt;&nbsp;&nbsp;6  <br>
   <hr>
   版权符号: &copy;  <br>
   注册号: &reg;
   </body>
</html>

1.3 列表与表格

1.3.1 列表

列表标签

无序列表：使用一组无序的符号定义， < ul> < li> < /ul> Ctrl+Alt+L

属性值描述用法举例
circle空心圆< ul type=“circle”>< /ul>
disc实心圆< ul type=“disc”>< /ul>
square黑色方块< ul type=“square”>< /ul>

有序列表：使用一组有序的符号定义， < ol>

  • < /ol>

属性值描述用法举例
1数字类型< ul type=“1”>< /ul>
A大写字母类型< ul type=“A” >< /ul>
a小写字母类型< ul type=“a”>< /ul>
I大写古罗马< ul type=“I”>< /ul>
i小写古罗马< ul type=“i”>< /ul>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul type="">
        ul 无序列表标签,属性:type(写在ul/li里都可以)<br>
        li 列标签
        <li type="circle">circle 空心圆</li>
        <li type="disc">disc 实心圆</li>
        <li type="square">square 黑色方块</li>
    </ul>

    <!-- 有序列表 -->
    <ol type="" start="3">
        ol 有序列表,属性type,start(开始值) <br>
        li 列标签
        <li> 默认有序标志是数字</li>
        <li type="1" > 1 表示数字类型 </li>
        <li type="A" > A 表示大写字母类型 </li>
        <li type="a"> a 表示小写字母类型 </li>
        <li type="I"> I 大写古罗马 </li>
        <li type="i"> i 小写古罗马 </li>
    </ol>

    <!-- 有序列表、无序列表嵌套 -->
    <ol type="1" start="1">
        <li> Linux</li>
        <li> Mysql</li>
        <li> Java
            <ul>
                <li type="disc"> JDBC</li>
                <li typr="circle"> I/O流</li>
                <li type="square"> 线程</li>
                <li> 默认无序标志:circle </li>
            </ul>
        </li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        dl 自定义列表<br>
        dt 一级列<br>
        dd 二级列
        <dt> 女明星</dt>
        <dd>范冰冰</dd>
        <dd>张柏芝</dd>
        <dt>男明星</dt>
        <dd>吴亦凡</dd>
        <dd>李易峰</dd>
    </dl>
</body>
</html>
  • type:描述的有序列表的类型。默认值为1。
    • type=“1” 指的是列表的类型是数字类型( 1 2 3 4 5…)
    • type=“a” 指的是列表的类型是小写的字母(a b c d e…)
    • type=“A” 指的是列表的类型是大写的字母(A B C D E …)
    • type=“i” 指的是列表的类型是小写的古罗马数字
    • type=“I” 指的是列表的类型是大写的古罗马数字
  • start: 描述列表的符号从几开始。
  • li标签是自动换行的，不需要我们使用br标签手动换行

默认的项目编号是实心的圆圈。ul标签也有一个type属性。

  • type=“circle” 项目符号是空心的圆圈
  • type=“square” 项目符号是正方形

容器标签

使用CSS+DIV是现下流行的一种布局方式

  • 块级标签 (1、独占一行2、可以设置宽度和高度)
  • 行内标签 (1、宽高取决于内容宽高 2、不可以设置宽度和高度)
  • 行内块标签 (1、宽高取决于内容宽高 2、可以设置宽度和高度)
标签代码描述
div< div></ div>行级块标签，独占一行，换行
span< span></ span>行内块标签，所有内容都在同一行
1.3.2 表格

表格标签

标签代码描述
table< table></ table>表格标签
tr< tr></ tr>表格行标签
td< td></ td>表格单元格标签
th< th></ th>标题单元格标签（表头）
caption< caption></ caption>标题标签
thead< thead></ thead>表格头部标签
tbody< tbody></ tbody>表格正文标签
tfooter< tfooter></ tfooter>表格尾部部标签
表格属性含义
width表格宽度
height表格高度
align （center、left、right）对齐方式
border表格边框
cellspacing单元格间距
cellpadding单元格内边距
bgColor表格背景颜色
rowspan跨行合并
colspan跨列合并
  • 表格中的行标签 tr或者th(指的表头)
    • align: 描述单元格中文字的对齐方式。
  • 表格中的单元格标签 td
  • 表格中单元格标签可以换成th，单元格中的内容会加粗显示，一般用于表头制作。
<caption> caption 标题标签</caption>
    <thead><p><strong><del>  thead 表格头部标签 </del></strong></p></thead>
    <!--表格格式-->  <!-- table 表格标签 -->
    <table border="1"  width="400px" height="100px" cellpadding="1" cellspacing="0">
        <tbody> tbody 表格正文标签</tbody>
        <tr align="center"><!-- tr 表格行标签 -->
            <th> th 单元格标签</th> <!-- td/th(th加粗内容作为表头) -->
            <td> td 单元格标签</td>
            <th>th 表示表头会加粗</th>
        </tr>
        <tr align="center"> <!-- align 对齐方式 -->
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <tfooter> tfooter 表格尾巴标签</tfooter>

我们可以绘制细线表头，让表格的样式更加美观。设置单元格的间距，并设置整个表的背景颜色，再设置每行的背景颜色为白色。这样覆盖之后的颜色就是表格边框的颜色(单元格间距的颜色)。

<!-- bgcolor 背景颜色的设置 -->
    <table border="1" bgcolor="#7fff00"  width="400px" height="100px" cellpadding="1" cellspacing="0">
        <tr align="center" bgcolor="white">
            <th> th 单元格标签</th>
            <td> td 单元格标签</td>
            <th>th 表示表头会加粗</th>
        </tr>
        <tr align="center" bgcolor="white"> <!-- align 对齐方式 -->
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

我们也可以合并单元格，合并之前，我们需要知道是跨行合并还是跨列合并。

<!-- 合并单元格 --> rowspan:跨行 colspan:跨列  align:对齐方式
<table border="1px" width="400px" height="200px" align="center" cellpadding="1" cellspacing="0">
    <tr align="center">
        <td>姓名</td>
        <td>年龄</td>
        <td colspan="2">人员信息</td>
        <!-- <td>人品</td>  -->
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>28</td>
        <td>中国·上海</td>
        <td rowspan="2">很好</td>
    </tr>
    <tr align="center">
        <td colspan="2" rowspan="2">李四</td>
        <!--<td>29</td> -->
        <td>中国·贵阳</td>
        <!--<td>很好</td>-->
    </tr>
    <tr align="center">
        <!--<td colspan="2">王五</td> -->
        <!--<td>30</td> -->
        <td>日本·东京</td>
        <td>极差</td>
    </tr>
</table>

最后效果如下:

在这里插入图片描述

1.4 HTML5中的媒体元素

  • 视频元素的标签vedio
<body>
   <video controls src="G:\录课视频\linux操作系统\视频\66.shell编程_for循环.mp4"></video>
</body>
  • 音频元素
<audio controls src="F:\BaiduNetdiskDownload\音乐\周杰伦歌曲14张专辑\周杰伦音乐\周杰伦歌曲14张专辑\七里香\七里香.mp3"></audio>

1.5 表单

标签代码描述
form< form></ form>表单
input< input>输入框
select< select></ select>下拉列表
optgroup下拉列的组
option< option></ option>下拉列表项
textarea< textarea></ textarea>文本域
fieldset< fieldset></ fieldset>属性集合
legend< legend></ legend>属性描述
属性含义
action表单提交的后端程序的地址 #
method表单的请求方法get（显示提交）、post（隐式提交，安全性）默认get请求
enctype表单提交的数据格式
application/x-www-form-urlencoded 将表单的数据以 key=value的形式提交
multipart/form-data 将表单以二进制流的形式提交
type属性含义
text文本输入框
password密码输入框
radio单选框
checkbox复选框
date日期选择框
time时间选择框
datetime-local日期时间选择框
number数字输入框
email邮箱输入框
file文件上传域
hidde隐藏域
image图片提交按钮
submit提交按钮
reset重置按钮
button普通按钮

其他属性

属性含义
name表示输入框的名称(未来指的就是提交到后端程序的中的key)
value表示输入框中的值
checked表示默认选中(一般用在单选和复选上)
readonly只读
disabled不可用
placeholder输入框提示信息
maxlength最大输入字符
size输入框的宽度 (单位：字符)
max最大值(一般用在数字输入框上)
min最小值(一般用在数字输入框上)
selected表示默认选中(一般用在select下拉列表中)
rows表示文本域的高度(一般用在textarea下拉列表中)
cols表示文本域的宽度(一般用在textarea下拉列表中)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--form 表单标签 -->
    <form action="#" method="">
        <pre>
        action: 表示表单中的数据提交到哪里去。
        method:表单的提交方式
        get(表单数据的显式提交，提交的数据会在浏览器地址栏上显示，安全性较差)
        post(表单数据的隐式提交，提交的数据不会显示出来，安全性较好)
        </pre>

        input 输入框标签 <input type="text" name="" placeholder="输入用户名"
                           maxlength="6"  value="">
        <pre>
            input:输入框标签
            type="text": 控件的类型是文本输入框类型。
            name:控件的名称
            placeholder：文本输入框的提示信息
            maxlength:输入框文本的最大长度
            value：给输入框设置值
            readonly:输入框里面的值只能只读，不能修改。
        </pre>
        input 密码框<input type="password" name="password" placeholder="请输入密码！"><br>
    </form>

    <form action="#" method="">
        <!-- type="radio" 单选按钮     checked：默认选中
        注意：单选按钮的控件名称必须是一样的。-->
        radio 单选按钮<input type="radio" name="xz" value="value1" checked>男
        <input type="radio" name="xz" value="value2" >女 <br>

        checkbox 多选按钮<br>
        <input type="checkbox" name="hobby" value="V1" chencked>  checkbox1 <br>
        <input type="checkbox" name="hobby" value="V2" >  checkbox2 <br>
        <input type="checkbox" name="hobby" value="V3" chencked>  checkbox3 <br>

        submit 提交按钮<input type="submit" value="提交"> <br>
        reset 重置按钮<input type="reset" value="更新重置"> <br>
    </form>

    <form action="#" method="">
        select 下拉框标签<br>
        optgroup： 下拉选项的组 <br>
        option:下拉框选项   value：对应的值<br>
        <select name="xx">
            <optgroup label="组1">
                <option value="11">选项1</option>
                <option value="12">选项2</option>
            </optgroup>
            <optgroup label="组2">
                <option value="21">选项A</option>
                <option value="22">选项B</option>
            </optgroup>
        </select>>
    </form>
</body>
</html>
  • 文本域

我们可以在文本域里面输入大段的文字。

自我简介: <textarea rows="20" cols="30"></textarea>
  • 文件域

我们可以使用文件域实现文件上传。

上传图片: <input type="file" name="img"> <br>
  • 隐藏域

隐藏域无法在页面上显示的，用户无法感知到隐藏域的存在，一般用于开发人员进行数据传递。

隐藏域: <input type="hidden" name="userId" value="1001"> <br>
  • 提交按钮

提交按钮可以进行表单的提交。

 <input type="submit" value="提交">
  • 普通按钮

本质上这个按钮没有任何作用，如果我们想给这个按钮赋予一些功能，需要使用js代码来实现。

<input type="button" value="按钮">

reset 重置按钮

在HTML5中又新增了一些表单控件，并且这些表单还自带数据校验功能。

<pre>
    email 邮箱：<input type="email" name="email">
    url 网址：<input type="url" name="url">
    date 日期<input type="date" name="date">
    time 时间<input type="time" name="time">
    month 月份<input type="month" name="month">
    week 星期<input type="week" name="week">
    tel 手机号码<input type="tel" name="tel">
</pre>
Element

https://element.eleme.cn/#/zh-CN

框架标签

标签代码描述
frameset< frameset></ frameset>框架标签
frame< frame></ frameset>页面标签
属性含义
rows将框架集按照上下分配
cols将框架集按照左右分配
noresize页面不能重置大小

注意：不能与boby标签一起使用

iframe标签

标签代码描述
iframe< iframe></ iframe>框架标签
属性含义
srciframe默认页面地址
nameiframe的标识
width宽度
height高度
王维诗里的代码i
关注
专栏目录
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8782
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
html对齐
small__children的博客
03-12 1212
html使用align属性控制对齐 align：content 通过改变属性的值，进行不同的对齐方式
全网最全HTML基础
a1085653724的博客
04-20 5133
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
头歌-HTML基础
somewon的博客
03-06 1万+
四川师范大学 头歌 web应用开发
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
HTML基础知识点大全
m0_69674158的博客
05-04 6926
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
HTML基础知识总结
ss810540895的博客
05-05 8680
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
html基础语法总结
花狗Fdog的博客
12-17 5609
文章目录一.HTML是什么？二.HTML文档结构三.元素1.按单/双标记划分2.按块状/行内元素划分3.块状元素和行内元素的互相转换四.重点1.图像链接2.导航菜单①列表②超链接3.表单4.表格 一.HTML是什么？        HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，Web 浏览器读取HTML 文档，并以网页的形式显示..
HTML基础模板
qq_61690596的博客
07-18 2079
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4776
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML的块级元素与行内元素
m0_65178842的博客
09-06 593
块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
HTML 列表
qq_40107571的博客
09-06 464
HTML 列表
HTML、CSS实现树状图
p_s_p的博客
09-09 491
【代码】HTML、CSS实现树状图。
零基础上手WebGIS+智慧校园实例（长期更新#1）【html by js】
Asuna666w的博客
09-06 547
明天马上更新WebGIS的 1. 开发准备，2. 地图显示，3. 地图参数，4. 实时路况，5. 地图孔件6. 地图事件，7. 基于经纬度绘制点，8. 交互式绘制点，9， 实战作业-灵活的点标注之后代码+资料全部发到github里，希望大家能关注一下咱的Github。
【HTML】Html标签
最新发布
千里之行，始于足下
09-12 868
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
HTML基础入门与开发环境选择
HTML基础知识详解 在IT开发领域中，HTML（HyperText Markup Language）扮演着核心角色，它是网页制作的基础。本文将深入探讨JavaWeb开发中的两种主要模式——C/S（客户端/服务器）和B/S（浏览器/服务器），以及HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值