02-HTML基础知识

已于 2023-06-22 15:58:33 修改
阅读量34 收藏
点赞数
分类专栏： 前端实战-HTML&CSS 文章标签： html
于 2023-06-22 15:52:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44431329/article/details/131341645
版权

1、HTML标签

标签名

使用方法

备注

无序列表
  1. 整体ul
    1. 每一项li

有序列表
  1. 整体 ol
    1. 每一项 li
  1. 注意点
    1. 每一行都是有序的
    2. 可以放任何标签

表格标签
  1. table
    1. 每一行 tr
    2. 每一个单元格 td
  1. 合并单元格
    1. 跨行合并 rowspan='合并的个数'
    2. 跨列合并 colspan='合并的个数'

自定义标签

整体：dl

小标题:dt

  1. dl标签中只能放dt或者dd

每一项 dd

  1. dt和dd可以存放任何标签

input标签

文本框 text

  1. value 文本的设置的值
  2. name 发送数据的含义
  3. placeholder 占位符

密码框 password

  1. 密码框
  2. value 文本设置的值
  3. name 告诉数据是什么含义

单选框 radio

  1. name 告诉数据什么含义
  2. value表示用户选择的值
  3. checked 默认选中

选中效果 checked 单选效果设置相同的name

多选框 checkbox

  1. name 告诉数据什么含义
  2. value表示用户选择的值
  3. checked 默认选中

选中效果 checked

文件选择框 file

  1. multiple 多文件选择

提交按钮 submit

重置按钮 reset

  1. 让表单恢复成默认值

普通按钮 button

button

type :

  1. 提交 submit
  2. 重置 reset
  3. 普通 button

下拉框

select 整体

每一项 option

默认选中 selected

文本域

textarea

用于输入大段文字

label标签

作用：直接使用lable标签把文本和表单标签属性一起包裹起来，需要把标签中的for属性删除

div

div 独占一行

块

span

span 一行显示多个

行

2、HTML使用标签

1、无序标签

  1. 格式
    <ul>
        <li></li>
    </ul>
  1. 使用
<!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>Document</title>
</head>
<body>
    <ul>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
        <li>这是无序标签</li>
    </ul>
</body>
</html>
  1. 展示

2、有序标签

  1. 格式 
        <ol>
        <li></li>
    </ol>

  2. 练习
<!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>Document</title>
</head>
<body>
    <ol>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
        <li>这是有序标签</li>
    </ol>
</body>
</html>
  1. 展示

3、自定义标签

  1. 格式
1. dl为一个整体
2. dt为标题
3. dd为每一项
<dl>
        <dt>
            <dd></dd>
        </dt>
    </dl>
  1. 练习
<!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>Document</title>
</head>
<body>
    <dl>
        <dt>
            标题
        </dt>
        <dd>每一项</dd>
        <dd>每一项</dd>
        <dd>每一项</dd>
        <dd>每一项</dd>
        <dd>每一项</dd>
    </dl>
</body>
</html>
  1. 展示

4、表格标签

  1. 格式
    <!-- 
        1. table表格整体
        2. tr每一行
        3. td每一个单元格
        4. rowspan跨行合并
        5. colspan跨列合并
        6. th为每一行的标题加粗
      -->
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
  1. 练习
<!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>Document</title>
</head>
<body>

    <table border="1" >
        <thead>单元格的标题</thead>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td colspan="3" >合并单元格</td>
        </tr>
        <tr>
            <td >13232</td>
            <td>213123</td>
            <td >213123</td>

        </tr>
        <tr>
            <td colspan="2">132321</td>
            <td>123</td>
        </tr>
        <tr>
            <td  rowspan="3">13232</td>
            <td>213123</td>
            <td >213123</td>

        </tr>
        <tr>
            <td>213123</td>
            <td >213123</td>


        </tr>
        <td>213123</td>
        <td >213123</td>


    </table>
    
</body>
</html>
  1. 展示

5、input标签

  1. 格式
    输入框:<input type="text" name="" id=""><br>
    密码框:<input type="password" name="" id=""><br>
    单选框: <input type="radio" name="" id=""><br>
    复选框: <input type="checkbox" name="" id=""><br>
    文件框：<input type="file"><br>
    提交按钮：<input type="button" name="" id=""><br>
    重置框: <input type="reset"><br>
    提交框: <input type="submit"><br>
  1. 练习
<!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>Document</title>
</head>
<body>
    输入框:<input type="text" name="" id=""><br>
    密码框:<input type="password" name="" id=""><br>
    单选框: <input type="radio" name="" id=""><br>
    复选框: <input type="checkbox" name="" id=""><br>
    文件框：<input type="file"><br>
    提交按钮：<input type="button" name="" id=""><br>
    重置框: <input type="reset"><br>
    提交框: <input type="submit"><br>
</body>
</html>
  1. 展示

6、button按钮

  1. 格式
    <button>普通按钮</button>
    <button type="submit"> 提交按钮</button>
    <button type="reset">重置按钮</button>
  1. 练习 
    <!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>Document</title>
</head>
<body>
    <button>普通按钮</button>
    <button type="submit"> 提交按钮</button>
    <button type="reset">重置按钮</button>
</body>
</html>

  2. 展示

7、下拉框

  1. 格式
    <!-- 
        name:数据的含义
        id:唯一性
        value 提交数据的值
     -->
    <select name="" id="">
        <option value="1">第一项</option>
    </select>
  1. 练习:
    <select name="" id="">
        <option value="1">第一项</option>
        <option value="2">第二项</option>
        <option value="3">第三项</option>
    </select>
  1. 展示

8、文本域

  1. 格式
    <!-- 
        name: 数据的含义
        id: 标签唯一标识
        cols: 宽度
        rows: 高
     -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
  1. 练习
<!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>Document</title>
</head>
<body>

    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
  1. 展示

9、lable标签

  1. 格式
    <!-- 
        lable 一般配合表单标签进行使用，目的就是为了扩大鼠标选中范围
     -->
    <label ><input type="radio" name="sex" id="nv">女</label>
    <label ><input type="radio" name="sex" id="nan">男</label>
  1. 练习
<!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>Document</title>
</head>
<body>
    <!-- 
        lable 一般配合表单标签进行使用，目的就是为了扩大鼠标选中范围
     -->
    <label ><input type="radio" name="sex" id="nv">女</label>
    <label ><input type="radio" name="sex" id="nan">男</label>
</body>
</html>
  1. 展示

10、div和span

  1. 格式
    <!-- 
        1. div和sapn都是没有语义化的标签 一般是用来布局使用的
        2. div标签是块元素 独占一行
        3. span是行内元素 一行可以放多个
     -->
    <div></div>
    <span></span>
  1. 练习
<!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>Document</title>
</head>
<body>
    <!-- 
        1. div和sapn都是没有语义化的标签 一般是用来布局使用的
        2. div标签是块元素 独占一行
        3. span是行内元素 一行可以放多个
     -->
    <div>我是div</div>
    <span>我是span</span>
</body>
</html>
  1. 展示

孙小明的测试修炼手册
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python基础知识点总结
学Python的小白！
08-25 7万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
HTML5基础知识-Web简介.pptx
05-06
单元一：HTML5基础知识 目录 中文：因特网，又称国际互联网。是由所有使用公用语言互相通信的计算机连接而组成的全球网络。 Internet常用服务：E-mail，FTP，BBS，WWW（Web） Internet Web 1989年，第一个Web服务器...
uni-app基础知识点
qq_56045326的博客
06-06 3959
uni-app知识点详解
网页游戏设计（HTML5入门）--- 基础知识篇
weixin_45216055的博客
09-03 4542
第一章 1、canvas（画布） canvas元素为网页游戏开发者提供了创建动态图形、可替换静态图形及动画GIF。
Html基础知识
DTCloud
05-12 2178
超文本标记语言 （英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。 --来自维基百科
HTML基础知识汇总
qq_43544490的博客
08-03 3244
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
CTF密码学-编码基础知识点总结
qq_64584459的博客
05-08 5733
CTF密码学-编码基础知识点总结 0x01 目录 常见编码: 1.ASCII编码 2.Base64/32/16编码 3.shellcode编码 4.Quoted-printable编码 5.XXencode编码 6.UUencode编码 7.URL编...
html表格的基础知识及源代码-尚硅谷
weixin_58264104的博客
07-13 2454
html表格的基础知识及源代码-尚硅谷
web开发基础知识
vision666的博客
02-27 8856
web开发基础知识学习 一、网页开发三剑客 ​ 我们看到的网页通过代码来实现的 ，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。 这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。写网页的代码是专门的语言， 主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下： Html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。主要负责编写页面架构，有点像建房子时
测试开发02---Python基础回顾
初遇我ㄖ寸の热情呢？
04-14 4521
本章节面向有python基础的同学。提炼，回顾为主 详细知识点参考：https://blog.csdn.net/qq_37615098/category_7954447.html 学习目标： 1.梳理Python编程基础 2.熟悉socket网络编程技术 3.熟悉多线程编程技术 4.Python的GUI编程实现接口工具开发 5.python数据挖掘，分析，图形化展示实战 数据类型： 字符串： 单引号，双引号，三引号（只要引号就是字符串） 字符串里面有个json格式的：
Uni-App从入门到实战-黑马程序员【uniapp基础知识讲义笔记】
南北极之间
04-15 3992
uniapp基础知识笔记
HTML第02天（HTML基础）总结.emmx
08-21
HTML第02天（HTML基础）总结.emmx
Learn-Red-Fundamentals-of-Red:学习红色-红色基础知识，由Packt发布
05-27
学习红色-红色基础知识这是发布的“ 的代码库。 它包含从头到尾完成本书所必需的所有支持项目文件。关于这本书当今软件开发的关键问题是软件膨胀，在软件编码和部署中需要庞大的工具链和开发环境。 Red通过提供极简...
HTML语言基础01-02视频教程
09-23
1_html的背景知识 2_html的全局架构标签
HTML-CSS-Projects
05-22
学习基础HTML元素及其一些属性 用HTML练习CSS 02-个人网站v2项目 该项目是“个人站点项目”的版本2。 在这个项目中，我了解了更多有关使HTML的结构良好和更详细CSS功能的知识，以便获得美观的网站。 为此，我进行...
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 729
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
【SpringMVC】_SpringMVC项目返回HTML与JSON
最新发布
m0_63299495的博客
05-22 683
本专栏已介绍：返回静态页面：【Spring MVC】_SpringMVC项目返回静态页面_mvc 返回当前页面-CSDN博客返回数据：【Spring MVC】_SpringMVC项目返回数据-CSDN博客本篇介绍返回HTML与返回JSON；
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 911
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1161
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
html入门基础知识无图
10-08
学习HTML的基础知识包括了解HTML的基本结构和常用标签的使用方法。 以下是HTML的基础知识无图的内容： - HTML文档的基本结构是由<!DOCTYPE>声明、<html>元素、元素和元素组成。 - 在元素中，可以设置网页的标题、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值