HTML常用标签学习笔记（第三天）

最新推荐文章于 2024-10-01 23:46:18 发布
最新推荐文章于 2024-10-01 23:46:18 发布
阅读量79 收藏
点赞数
分类专栏： HTML 文章标签： html 前端 学习
原文链接：https://www.bilibili.com/video/BV14J4114768?p=37&spm_id_from=333.880.my_history.page.click
版权

目录

表格结构标签

合并单元格

合并方式

目标单元格

合并三部曲

无序列表

有序列表

自定义列表

表单标签

表单域（包含表单元素的区域）

表单控件（表单元素）

label标签

select下拉表单元素

textarea文本域元素

注册页面实例

  • 表格结构标签

    • <thead>：表格的头部区域

    • <tbody>：表格主体区域

    • <th>:单个每列表头

    • <!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 align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
    </tbody>
    </table>
</body>
</html>

       

  • 合并单元格

    • 合并方式

      • 跨行合并：rowspan="合并单元格个数"

      • 跨列合并：colspan="合并单元格个数"  如：<td colspan="2"></td>

    • 目标单元格

      • 跨行：合并代码写在最上侧

      • 跨列：合并代码写在最左侧

    • 合并三部曲

      • 确定跨行、跨列

      • 找到目标单元格，并写上代码及合并数量 

      • 删除多余的单元格

      • 代码

        <!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 width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>

    </table>
</body>
</html>

      • 结果

         

  • 无序列表

    • <ul>标签表示无序列表，

    • <li>标签表示列表项

    • <ul>标签中只能嵌套<li>标签，其余标签或者文字都不允许。

    • <li></li>可用容纳很多元素

    • 代码

      <!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>
    <h4>喜欢吃的食物</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>
</body>
</html>

    • 结果

       

  • 有序列表

    • <ol>标签包含<li>标签来定义列表项

    • 注意：<ol>只能嵌套<li>   而<li></li>可以放许多元素

    • 代码

      <!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>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>你</li>
        <li>我</li>
        <li>他</li>
    </ol>
</body>
</html>

    • 结果

  • 自定义列表

    • 列表项没有任何项目符号

    • <dl>定义描述列表  里面只能包含：<dt>和<dd>一起使用

    • <dd>是围绕<dt>进行说明

    • 代码

      <!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>
    </dl>
</body>
</html>

    • 结果 

       

  • 表单标签

    • 作用：收集用户信息

    • 表单域（包含表单元素的区域）

      • <form>就是表单域，实现和收集表单信息，
      • <form>把范围内的表单信息提交给服务器
      • 常用属性： action   指定 url地址
      • 常用属性： method   提交方式： get\post提交
      • 常用属性： name  名称
      • 写表单之前要有<form>进行包含

    • 表单控件（表单元素）

      • 表示：允许用户在表单元素中输入或者选择的内容控件

      • input：输入表单元素  （是一个单标签）

        • <input type="属性值"/>
        • type属性值： text文本
        • type属性值： password密码框
        • type属性值： radio 单选按钮  注意，如果要实现单选1，必须要给按钮取一个相同 的name 
        • type属性值： checkbox定义 复选框
        • type属性值： submit定义 提交按钮，把数据发送到服务器
        • type属性值： reset 清除表单里的所有数据
        • type属性值： botton定义可以点击的按钮
        • type属性值： file 上传文件
      • name   ：定义input元素的 名称  单选按钮和复选按钮要有相同的name值（用于给后台人员使用）
      • value ： 定义表 单元素的值
      • checked属性：用于单和复选按钮，页面一打开就 默认勾选的按钮
      • maxlength属性：可以输入的字符 最大长度
      • 代码 
        <!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>
    <form action="xxx.php" method="get">
        <!-- text文本框用户可以往里面输入内容 -->
        用户名：<input type="text" name="username" value="请输入用户名"> <br>
        <!-- password是一个密码框用户看不见输入的密码 -->
        密码：<input type="password" name="pwd" maxlength="6" > <br>
        <!-- radio是单选按钮，可以实现多选 -->
        <!-- name是表单元素名字 这里性别单选按钮必须有相同的name,才可以实单选1 -->
        <!-- checked属性用于单选和复选按钮，当页面打开默认勾选按钮 -->
        性别：男<input type="radio" name="sex" value="男"> 女：<input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox是一个复选框，可以多选按钮 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked"> <br>

        <input type="submit" value="免费注册"><br>
        <!-- 重置按钮可以还原表单为初始状态 -->
        <input type="reset" value="重新填写"><br>
        <!-- 普通按钮button 后期结合js搭配使用 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 上传文件使用 -->
        上传头像：<input type="file" > <br>
    </form>
</body>
</html>

      • 结果

         

  • label标签

    • 用于绑定一个表单元素，当点击label标签内的文本时，浏览器自动选中对应表单的元素。
    • 语法：<label for="sex">男</label>    <input type="radio" name="sex"   id="sex"/>
    • 核心：<label>标签里面的 for属性与id属性值相同
    • 代码 
      <!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>
    <label for="sex">用户名:</label> <input type="text" id="sex">
    <input type="radio" id="nan"> <label for="nan">男</label>
    <input type="radio" id="nv"> <label for="nv">女</label>
</body>
</html>

    • 结果

       

  • select下拉表单元素

    • 多个选项供用户选择  例如籍贯
    • <select>  < option>选项1</option>  <option>选项2</option> </select>
    • 设置默认选项： selected="selected"为 默认选项
    • 代码 
      <!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>
    <form>
    籍贯：
    <select>
        <option>山东</option>
        <option>上海</option>
        <option selected="selected">天津</option>
    </select>
    </form>
</body>
</html>

    • 结果

       

  • textarea文本域元素

    • 用于输入很多文本的区域，常见于 反馈域，留言板
    • 语法： <textarea row="3" cols="20" >文本内容</textarea>
    • 代码 
      <!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>
    <form>
        今日反馈：
        <textarea rows="3" cols="50">今日反馈</textarea>
    </form>
</body>
</html>

    • 结果

  • 注册页面实例

    • 代码 
      <!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>
    <h4>青春不常在</h4>
    <table width="500">
        <!-- 第一行 -->
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"><img src="down.jpg" width="20" height="20" >男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="down.jpg" width="20" height="20">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="中国大陆"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" id="weihun" checked="checked"> <table for="weihun">未婚</table>  <input type="radio" name="marry" id="yihun"> <table for="yihun">已婚</table>  <input type="radio" name="marry" id="lihun"> <table for="lihun">离婚</table>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td><input type="text" value="博士后"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love" checked="checked">可爱的
                <input type="checkbox" name="love">小鲜肉
            </td>
            <td></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="#"> 我是会员</td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>我年满十八岁</li>
                    <li>抱着严谨的态度</li>
                    <li>真诚</li>
                </ul>
            </td>
        </tr>

    </table>
</body>
</html>

    • 结果

     

正在加载jjj
关注
专栏目录
前端学习笔记一一html的常用标签
2401_85123734的博客
06-11 864
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~篇幅有限，仅展示部分内容。
HTML学习笔记第2天
moranxiao199的博客
02-27 891
HTML基础标签的介绍
HTML5+CSS3学习笔记第七天
weixin_72043867的博客
08-05 1000
定位（绝对定位、相对定位、固定定位），CSS精灵，字体图标icon，CSS修饰属性（过渡、透明度、光标）
2024年7月8日学习笔记-HTML的常用标签
m0_64628473的博客
07-08 233
第2章 HTML的常用标签 2-1 无序列表 2-2 有序列表 2-3 定义列表 dd和dt都是容器类标签 比如：使用场景查看京东网站类目源码。 2-4 表格基础使用 2-5 单元格设置 2-6 表格分区 2-7 form表单域 form是表单的意思，是容器级标签。 2-8 input标签 input标签是输入框的一种，有多种type属性 2-9 文本域 标签是textarea，高度设置 rows和cols rows定义可视区域有几行
HTML学习笔记
CTIA_OPEN的博客
04-19 987
HTML入门笔记
HTML学习笔记 | 常用标签的使用及注意事项（排版后）
Curry_On的博客
10-24 7248
html学习笔记 本文章根据B站pink老师的视频内容进行整理，供复习参考 本文内容： 一、Web标准 1、为什么需要Web标准 2、Web标准的构成 二、HTML标签 1、语法规范 2、HTML基本结构标签 3、HTML常用标签 3.1 标签语义 3.2 标题标签 3.3 段落和换行标签 3.4 文本格式化标签 3.5 div和span标签 3.6 图像标签i...
HTML学习笔记_常用标签的使用及注意事项
Curry_On的博客
10-21 4764
html学习笔记 本文根据B站pink老师的视频整理而成，包含常用标签的使用及注意事项。 html简介 浏览器 浏览器内核（渲染引擎） Web标准 1、为什么需要Web标准？ 浏览器不同，它们显示页面或者排版就会有些许差异，所以需要一套标准来规范。 2、Web标准的构成 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。 标准 说明...
HTML怎么学？| 小白入门笔记大全（语法规范、常用标签用法介绍、学习网站）
waski的博客
10-19 756
HTML怎么学？| 小白入门笔记大全（语法规范、常用标签用法介绍、学习网站）
【Web前端学习笔记】第一章 HTML常用标签
阿达斯加的博客
01-12 850
Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。本文介绍了比较常用的html标签及分区的概念。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2322
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
html第一天笔记.pdf
04-02
3. **HBuilder工具介绍**：HBuilder是一款非常高效的前端开发工具，它支持HTML5、CSS3、JavaScript等语言，并具有代码提示、快速编译等功能，适合快速开发和调试HTML页面。 #### 四、HTML基本标签及用法 - **标题...
HTML学习笔记二（常用标签）
xbean1028的博客
03-31 204
HTML学习笔记二（常用标签） 文章目录列表标签无序列表(unordered list)有序列表(ordered list)定义列表(definition list)表格标签表格中的属性表格中的其它标签表格的结构表单标签form标签input标签数据列表多行文本框(文本域)下拉列表多媒体标签video标签audio标签详情和概要标签marquee标签HTML中被废弃的标签HTML实体meta其它类型eywords类型Descriiption类型Author类型Refresh类型Robots类型 列表标签 无
复习HTML(基础）
最新发布
m0_74124657的博客
10-01 635
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 380
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
HTML粉色烟花秀
兔子王
09-21 8230
HTML语言实现的粉红色跨年烟花秀的完整代码。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 566
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1038
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
好玩的水表电表
lulei5153的博客
10-01 359
【代码】好玩的水表电表。
HTML5入门：第一天学习笔记与元素详解
在HTML5-day01的学习笔记中，我们主要探讨了HTML5的基础结构以及一些常用的元素和属性。HTML5是第五代超文本标记语言，它不仅提升了网页的兼容性和交互性，还引入了许多新的标签和特性来更好地支持现代网页设计。 *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值