前端之HTML篇(二)——HTML标签详解

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量1.6k 收藏 6
点赞数 2
分类专栏： 前端 文章标签： 前端 html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57021623/article/details/127142003
版权

1.开发工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i0Loiw6q-1664687111412)(Typora_image/0002.png)]

1.1VSCode的使用

1.双击打开软件

2.新建文件（Ctrl + N）

3.保存（Ctrl + S）,注意移动要保存的.html文件

4.Ctrl + 加号键， Ctrl - 建号键 可以放大缩小视图

5.生成页面骨架结构

​ 输入 ! 按下 Tab 键(或回车)，

6.利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open In Default Brower”

插件作用
Chinese(Simplified)Language Park for VS Code中文(简体)语言包
Open in Browser右击选择浏览器打开html文件
Auto Rename Tag自动重命名配对的HTML/XML标签

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    写代码是一件非常快乐的事情 happy
</body>
</html>
<!DOCTYPE html>

1.2 文档声明标签

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是：当前页面采用的是HTML5版本来显示网页。

注意：
在这里插入图片描述

1.3.lang语言种类

用来定义当前文档显示的语言。

1.en定义语言为英语

2.zh-CN定义语言为中文

简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文。

这个属性对浏览器和搜索引擎(百度，谷歌等)还是有作用的。

1.4.字符集

字符集(Charactor set)是多个字符的集合，以便计算机能够识别和存储各种文字。
在这里插入图片描述

<meta charset="UTF-8" />

charset 常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”,不要写成“utf8”或"UTF8".

2.HTML常用标签(上)

2.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

2.2 标题标签(重要)

在这里插入图片描述

2.3 段落标签(重要)

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>
单词音标翻译
paragraph[ˈpærəɡrɑːf]段落; 段;

标签语义：可以把HTML文档分割为若干个段落。

特点：

1.文本在一个段落中会根据浏览器的大小自动换行

2.段落和段落之间保有空隙。

2.4 换行标签(重要)

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就需要使用换行标签

<br />

单词break的缩写，意为打断，换行。

标签语义：强制换行

特点：

<br />是个单标签
<br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

2.5.文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

| 语义 | 标签 | 说明 | | ------ | ---------------------------- | ---------------------------------- | | 加粗 | 或者 | 更推荐使用标签，语义更强烈 | | 倾斜 | 或者 | 更推荐使用标签，语义更强烈 | | 删除线 | 或者 | 更推荐使用标签，语义更强烈 | | 下划线 | 或者 | 更推荐使用标签，语义更强烈 |

2.6 div和span标签

在这里插入图片描述

特点：

1.<div>标签用来布局，但是现在一行只能放一个</div>         大盒子
2.<span>标签用来布局，一行可以多个</span>                小盒子

2.7 图像标签

在这里插入图片描述

图像标签的其他属性：

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

图像标签属性注意点：
在这里插入图片描述

2.8 路径

1.目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片等。

2.根目录：打开目录文件夹的第一层就是根目录

3.VSCode打开目录文件夹，文件 — > 打开文件夹，选择目录文件夹，后期非常方便管理文件。

4.路径

相对路径：以引用文件所在位置为参考基础，而建立的目录路径。简单来说，图片相对于HTML页面的位置

在这里插入图片描述

示例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlgCnY8p-1664687111413)(Typora_image/078.png)]

绝对路径：是指目录下的绝对位置，直接到达目标的位置，通常是从盘符开始的路径。

例如：E:\frontend\HTML\1.jpg

    <img src="https://i0.hdslb.com/bfs/archive/887fb6df09bcd19f590f2eb4c36b4d4f3c559e5d.png" />

2.9 超链接标签

在HTML标签中，标签用于定义超链接，作用是从一个页面链接接到另一个页面

1.链接的语法规范

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词音标词意
anchor[ˈæŋkə®]锚; 给以安全感的人(或物); 精神支柱; 顶梁柱;
target[ˈtɑːɡɪt]目标; 指标; (攻击的)目标，对象; 靶; 靶子;

两个属性的作用如下：

属性作用
href用于指定链接的url路径，(必须属性)， 当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中_self为默认值(当前窗口打开页面)，__blank为在新窗口的打开方式

2.链接的分类

2.1外部链接:例如

2.2内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如首页

    <a href="gongsijianjie.html" target="_blank">公司简介</a>

2.3空链接:如果当时没有确定的链接目标

<a href="#">首页</a>

2.4下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

<h5>下载链接：地址链接的是文件 .exe 或者是 zip 等压缩包形式</h5>
    <a href="1.7z">下载文件</a>
    <a href="../access/3.7z">下载链接</a>

2.5网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<a href="images/2.jpg"><img src="1.jpg"</a>
<a href="E:\musicdownload\水手 - 郑智化.mp3">音乐</a>

2.6锚点链接：点我们点击链接，可以快速定位到页面中的某个位置

2.6.1在链接文本的href属性中，设置属性值为 #名字 的形式，如

<a href="#two">第二集</a>

2.6.2找到目标位置标签，里面添加一个id属性 = 刚才的名字，如

<h3 id="two">第二集介绍</h3>

2.10 注释标签

如果需要在HTML文档中添加一些便于阅读和理解但又不需要在页面中的注释文字，就需要使用注释标签。

<!-- 我想喝手磨咖啡 -->    快捷键：ctrl + /

一句话：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的，是为了更好的解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

2.11 特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SK0xjtUF-1664687111415)(Typora_image/0003.png)]

重点记忆的是

大于号&gt
小于号&lt
空格&nbsp

3.HTML标签(下)

3.1表格标签

表格是实际开发中非常常用的标签：

3.1.1.表格的主要作用

表格是主要用于显示、展示数据，因为它可以让数据显示的非常的规范，可读性非常好，特别的后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

3.1.2.表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在这里插入图片描述

字母td指表格数据(table data),即数据单元格的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvTW08LH-1664687111416)(Typora_image/001.png)]
示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FpOXLOy0-1664687111420)(Typora_image/002.png)]

3.1.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lYHpIZCj-1664687111421)(Typora_image/003.png)]
示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjSMJOI3-1664687111424)(Typora_image/004.png)]

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

3.1.4表格属性

表格标签这部分属性是我们实际开发不常用，后面通过CSS来设置。

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或""规定表格的单元是否拥有边框，默认为"",表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认为2像素
width像素值或百分比规定表格的宽度。

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dm6JRjYp-1664687111425)(Typora_image/005.png)]
示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHdXSnkm-1664687111427)(Typora_image/006.png)]

案例展示

<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="200">
        <tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
        <tr><td>1</td><td>鬼吹灯</td><td><img src="https://img0.baidu.com/it/u=3088610651,3841531735&fm=253&fmt=auto&app=138&f=JPEG?w=466&h=500" width="20" height="20"></td><td>345</td><td>123</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>2</td><td>盗墓笔记</td><td><img src="https://img0.baidu.com/it/u=3088610651,3841531735&fm=253&fmt=auto&app=138&f=JPEG?w=466&h=500" width="20" height="20"></td><td>124</td><td>675432</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>3</td><td>西游记</td><td><img src="https://img2.baidu.com/it/u=3235800866,1488932521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=519" width="20" height="20"></td><td>212</td><td>7654</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>4</td><td>东游记</td><td><img src="https://img2.baidu.com/it/u=3235800866,1488932521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=519" width="20" height="20"></td><td>23</td><td>75645</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>5</td><td>甄嬛传</td><td><img src="https://img0.baidu.com/it/u=3088610651,3841531735&fm=253&fmt=auto&app=138&f=JPEG?w=466&h=500" width="20" height="20"></td><td>121</td><td>7676</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>6</td><td>水浒传</td><td><img src="https://img2.baidu.com/it/u=3235800866,1488932521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=519" width="20" height="20"></td><td>576576</td><td>12334</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        <tr><td>7</td><td>鬼吹灯</td><td><img src="https://img2.baidu.com/it/u=3235800866,1488932521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=519" width="20" height="20"></td><td>234</td><td>7686</td><td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a href="https://image.baidu.com/" >图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td></tr>
        
    </table>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apCVqwCQ-1664687111428)(Typora_image/007.png)]

3.1.5表格的结构标签

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cau4JAkl-1664687111429)(Typora_image/008.png)]
在这里插入图片描述

3.1.6合并单元格

特殊情况下，可以把多个单元格合并为一个单元格

合并单元格的方式：

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

目标单元格：

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码
在这里插入图片描述

3.删除多余的单元格

实例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qTCVe3Xq-1664687111430)(Typora_image/009.png)]
示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGxqBX44-1664687111432)(Typora_image/010.png)]

演示如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y7ag8nyF-1664687111433)(Typora_image/011.png)]
示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SE0bkubo-1664687111434)(Typora_image/012.png)]

3.1.7表格总结

表格学习整体可以分为三大部分：

1.表格的相关标签

table标签

tr 行标签

td 单元格标签

th 表头单元格标签，用于第一行的居中、加粗显示

thead 表格头部区域标签

tbody 表格主体区域标签

2.表格的相关属性

aligh border cellpadding cellspacing width

3.合并单元格

跨列标签用colspan ,跨行标签rowspan.

3.2列表标签

表格标签是用来显示数据的，那么列表标签就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

无序列表，各个之间无顺序

有序列表，各个之间有顺序

自定义列表，上面是对下面的说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0bTgRVS-1664687111436)(Typora_image/013.jpg)]

3.2.1无序列表

在这里插入图片描述

3.2.2有序列表

在这里插入图片描述

3.2.3自定义列表(重点)

在这里插入图片描述

3.2.4列表总结

在这里插入图片描述

3.3表单标签

3.3.1 为什么需要表单

使用表单目的是为了收集用户信息

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单

3.3.2 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-am0xxjFL-1664687111437)(Typora_image/014.jpg)]

3.3.3 表单域

在这里插入图片描述

<form action="url地址" method="提交方式" name="表单域名词"

常用属性：

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式，其取值为get或post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域

注意两点：

1.在我们写表单元素之前，应该有个表单域就把他们进行包含。

2.表单域是form标签

3.3.4表单控件(表单元素)

在这里插入图片描述

<input type="属性值" />

注意两点：
在这里插入图片描述

type属性的属性值及其描述如下：

属性值描述
button定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox定义复选框
file定义输入字段和"浏览"按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮。
reset定义重置按钮，重置按钮会清除表单中的所有数据
submit定义提交按钮，提交按钮会把表单数据发送到服务器中。
text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。
<body>
    <form action="demo.php" method="POST" name="name1">
        <input type="button"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
        <input type="hidden"><br>
        <input type="image"><br>
        <input type="password"><br>
        <input type="radio"><br>
        <input type="reset"><br>
        <input type="submit"><br>
        <input type="text"><br>
    </form>    
</body>

示例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDLeZs1P-1664687111439)(Typora_image/015.png)]

其中，radio是单选按钮，checkbox是多选框

<body>
    <form>
        性别：男<input type="radio"> 女<input type="radio"> # 要实现多选一，要在input里加name属性
        爱好：唱歌<input type="checkbox"> 旅行<input type="checkbox"> 象棋<input type="checkbox">
    </form>
</body>

<body>
    <form>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">  
              # 让name等于相同的名字，才可以实现多选一
    </form>
</body>

在这里插入图片描述

属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中。
maxlength正整数规定输入字段中的字符的最大长度

(1)name和value是每个表单元素都有的属性值，主要给后台人员使用

(2)name表单元素的名字，要求 单选按钮和复选框要有相同的name值

(3)单选按钮和复选框可以设置checked 属性，当页面打开的时候就可以默认选中这个按钮

(4)maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

<body>
    <form>
        性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked=checked> <br>
        爱好：唱歌<input type="checkbox" value="唱歌" checked="checked"> 旅行<input type="checkbox" value="旅行" checked="checked"> 象棋<input type="checkbox" value="象棋"><br>
        用户名：<input type="text" value="请输入用户名" maxlength="6">
    </form>
</body>

运行如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YkAS5Bqu-1664687111440)(Typora_image/016.png)]

思考：

1.有些表单元素想刚打开页面就默认显示几个文字怎么做？

<input type="text" value="请输入用户名">

2.页面中的表单元素非常多，如何区别不同的表单元素？

用户名：<input type="text" value="请输入用户名" name="username">

属性后面的值，是自定义的

radio(或者checkout)如果的一组，我们必须给他们命名相同的名字

<input type="radio" name="sex">男
<input type="radio" name="sex">女

3.如果页面一打开就让某个单选按钮或者复选框是选中状态？

checked属性：表示默认选中状态，用于单选按钮和复选按钮

性别：<input type="radio" name="sex" value="男" checked="checked">男
      <input type="radio" name="sex" valeu="女">

4.如何让input表单元素展示不同的形态？比如单选按钮或者文本框

type属性：type属性可以让input表单元素设置不同的形态

<input type="radio" name="sex" value="男" checked="checked">男
<input type="text" value="请输入用户名">

type属性里的submit应用示范

<br>
<input type="submit">
<br> 
<input type="submit" value="免费注册">

运行如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCGVnYKn-1664687111441)(Typora_image/017.png)]

reset重置也可以这样

<input type="reset" value="重新填写">

点击submit按钮，会将表单数据提交到后端；点击reset按钮，会将页面填写的表单数据清除

button按钮，常用于获取验证码之类的功能，后期结合js搭配使用

3.3.5 label标签

在这里插入图片描述

3.3.6 select下拉表单元素

在这里插入图片描述

<select>
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
    ...
</select>

代码写法：

<body>
    <form>
        籍贯：<select>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
            <option selected="selected">武汉</option>
        </select>
    </form>
</body>

在这里插入图片描述

3.3.7 textarea文本域元素

在这里插入图片描述

<body>
    <form>
        留言：<textarea cols="50" rows="5">
            大家好
            我新来的
            请多多关照
            几点休息啊
            你困不困
            要不要再加把劲
        </textarea>
    </form>
</body>

运行如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GV68r2ld-1664687111442)(Typora_image/018.png)]

3.4综合案例

演示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXhBq0pE-1664687111443)(Typora_image/019.png)]

用到了表格标签(两列对齐)、列表标签(无序列表)、表单标签(单选、复选、文本域、按钮)

代码如下：

<body>
    <h4>光阴似箭，日月如梭！</h4>
    <table width="600">
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"><label for="nan"><img src="../access/nan.png" width="20" height="20">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="../access/nv.png" width="20" height="20">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option selected="selected">2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="你好李焕英"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" id="wei" checked="checked"><label for="wei">未婚</label>
                <input type="radio" name="marry" id="yi"><label for="yi">已婚</label>
                <input type="radio" name="marry" id="li"><label for="li">离婚</label>

            </td>
        </tr>
        <!-- 第五行 -->
        <td>学历：</td>
        <td><input type="text" value="大学本科"></td>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型：</td>
            <td>
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">小鲜肉
                <input type="checkbox" name="love" checked="checked">都喜欢
            </td>

        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td> 
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

3.5查阅文档

https://www.w3school.com.cn/index.html

https://developer.mozilla.org/zh-CN/

今晚务必早点睡
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
06【HTML5新增标签】
緑水長流*z
06-12 1493
文章目录 六、HTML5新增标签 6.1 布局标签 6.1.1 常规布局标签 6.1.2 控件标签 1）meter标签 2）progress标签 3）details标签 4）dialog标签 6.1.3 文本标签 1）ruby标签 2）mark标签 6.2 表单标签 6.2.1 H5新增input类型 6.2.2 H5新增表单相关属性 6.3 多媒体标签 6.3.1 video视频标签 1）video标签的属性 2）video标签的其他用法 6.3.2 radio音频标签
仿小红书添加标签（）
08-29
仿小红书添加标签（）
Python 图形化界面基础篇：添加标签（ Label ）到 Tkinter 窗口
小蓝枣的博客
09-11 1602
在 Python 图形化处理基础篇中，学习如何创建和管理 GUI 元素是一个重要的步骤。本文将聚焦在 Tkinter 中如何添加标签（ Label ）这一基本的 GUI 元素。标签通常用于显示文本或图像，用于提供信息或指导用户。我们将详细解释如何在 Tkinter 窗口中添加标签，为你的 GUI 应用程序增添更多的内容。
【用户画像】用户画像添加标签、定义标签任务、搭建工程
weixin_43923463的博客
10-25 2067
接下来的任务：利用在网页端填写的规则计算出想要得到的标签结果。已有数据，存放在MySQL中：1 整数 2 浮点 3 文本 4 日期tag_info：标签定义（id，标签编码，标签名称，标签等级，上级标签id，标签类型【99类目，1统计型，2规则性，3挖掘型】，标签值类型【1 整数 2 浮点 3 文本 4 日期】，标签对应的计算任务id，标签说明，更新时间，创建时间）
HTML（四）——HTML标签（四）——HTML基本标签之注释&特殊字符
Pomelo
01-13 144
HTML基本标签——注释标签&特殊字符 1.作用 2.语法格式 3.快捷键 4.代码实现 5.运行结果
【自用】HTML笔记
Aiden_yan的博客
04-09 635
html快速入门笔记，自用
html 增加选项,添加标签——给定标签选项
weixin_42512936的博客
06-15 623
HTML：1 haveTags2 3 4 addTags5 6 返回的数组CSS：1 #havetags span,2 #addtags span {3 display: inline-block;4 padding: 0 0 0 10px;5 margin: 2px 5px;6 border: 1px solid #...
html新增标签
weixin_73755593的博客
02-24 433
笔记
HTML5简介及新增标签
wshwsh_的博客
07-18 1400
HTML5简介及新增标签 一、HTML5概述 1.1、什么是 HTML5 HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。 HTML5 的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 HTML5 是下一代 HTML 标准。 HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 1
HTML基础（二）——HTML5新增标签
hold_on_qlc的博客
12-28 502
HTML5 是超文本标记语言（HTML）的第五次重大修改，可以简单的理解为是 HTML 的第五个大版本。
性能测试进阶指南——LoadRunner11实战 part2
06-14
第二步（掌握工具）：深入介绍LoadRunner 11工具三大部分（Virtual User Generator、Controller、Analysis）如何实现用户行为的模拟、性能指标的监控、负载的生成及后期的数据分析；第三步（项目实施）：理论联系...
性能测试进阶指南——LoadRunner11实战 part1
06-14
第二步（掌握工具）：深入介绍LoadRunner 11工具三大部分（Virtual User Generator、Controller、Analysis）如何实现用户行为的模拟、性能指标的监控、负载的生成及后期的数据分析；第三步（项目实施）：理论联系...
性能测试进阶指南——LoadRunner11实战 part3
06-14
第二步（掌握工具）：深入介绍LoadRunner 11工具三大部分（Virtual User Generator、Controller、Analysis）如何实现用户行为的模拟、性能指标的监控、负载的生成及后期的数据分析；第三步（项目实施）：理论联系...
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 218
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 502
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 963
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 165
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1202
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 391
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
htmlspan标签是什么意思？span标签的作用详解
06-07
HTML中的标签是一个行内元素，可以用来包裹文本或其他行内元素，并为其提供样式或其他属性。它通常被用于实现以下效果： 1. 标记文本的一部分以便于样式化和处理 2. 为文本添加CSS类或ID以便于样式化和JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今晚务必早点睡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值