网站LOGO
云与雾Blog
页面加载中
1月18日
网站LOGO 云与雾Blog
分享你我所热爱的。
菜单
  • 云与雾Blog
    分享你我所热爱的。
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    html学习笔记第二弹
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    html学习笔记第二弹

    小北 · 原创 ·
    🔨HTML及css📓学习笔记 · 小北的学习笔记
    共 7806 字 · 约 7 分钟 · 1876
    本文最后更新于2023年04月26日,已经过了632天没有更新,若内容或图片失效,请留言反馈

    上一篇文章为HTML标签上半部分,此篇为下半部分。

    表格标签

    标签

    table、tr与td标签

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

    表格标签不是用来布局,是用来整理数据。
    html 代码:
    <table>
        <tr>
            <td>第一行单元格内的文字</td><td>第一行单元格内的文字</td><td>第一行单元格内的文字</td>
        </tr>
        <tr>
            <td>第二行单元格内的文字</td><td>第二行单元格内的文字</td><td>第二行单元格内的文字</td>
        </tr>
        ...
    </table>

    上边的示例中

    1. <table></table>是用于定义表格的标签。说明这个地方是一个表格
    2. <tr></tr>标签用于定义表格中的行,必须嵌套在
      标签中。
    3. <td></td>用于定义表格中的单元格,必须嵌套在标签中。
    4. 字母td指表格数据(table data),即数据单元格里面的的内容

    表格标题

    html 代码:
    <table>
        <caption>我是表格标题</caption>
    </table>

    使用及注意事项:

    1. caption元素定义表格标题,通常这个标题会被居中且显示与表格之中。
    2. caption标签必须紧随table标签之后。
    3. 这个标签只存在表格里面才有意义。

    th(表头单元格)标签

    一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.<th>标签表示HTML表格的表头部分(table head的缩写)。

    th也是一个单元格,只是和td不一样,会让文字加粗居中。
    属性名属性值描述
    alignleft,center,right规定表格相对周围元素的对其方式
    border1或""规定表格单元是否拥有边框,默认为"",表示没有边框
    cellpadding像素值规定单元边沿与其内容之间的空白,默认1像素
    cellspacing像素值规定单元格之间的空白,默认2像素
    width像素值或百分比规定表格的宽度

    表格结构标签

    作用:因为表格可能会很长,为了更好的表示表格的语义,可以将表格分割成表格头部表格主体两大部分
    在表格标签中,分别用:<thead>标签表示表格的头部区域<tbody>标签表示表格的主体区域,这样可以更好的分清表格结构。<tfoot>标记用于提供页脚内容组。此标记在带有标题和正文的HTML表中使用,称为“thead”“tbody”<tfoot>标记是表的子标记,是<tr><td>的父标记。
    注意事项:

    1. <thead></thead>用于定义表格的头部。 内部必须拥有<tr>标签,一般是位于第一行。
    2. <tbody></tbody>用于定义表格的主体,主要用于放数据本体。
    3. tfoot标签用于提供页脚内容组,
    4. 以上标签都是放在
      标签中。
    5. 如果使用theadtfoot以及tbody元素,就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。

    合并单元格

    有些表格不需要那么多的单元格,我们可以给他们合并,这个时候需要用到合并单元格。合并单元格的时候有两种合并,一个是跨行合并,顾名思义就是跨行与行之间合并、还有一个跨列合并,列与列之间合并。

    • 跨行合并:rowspan="合并单元格的个数"
    • 跨列合并:colspan="合并单元格的个数"

    使用方法:

    1. 确定是跨行或跨列
    2. 在要合并的单元格写上合并方式与合并单元格数量例如:<td colspan=“2”></td>即跨列合并两个单元格
    3. 删除被合并的单元格。

    属性

    属性名属性值描述
    border1或""规定表格单元是否拥有边框,默认为"",表示没有边框
    width像素值或百分比规定表格的宽度
    height像素值或百分比规定表格的高度
    cellspacing像素值规定单元格之间的空白,默认2像素单元格与单元格之间的距离
    cellpadding像素值规定单元边沿与其内容之间的空白,默认1像素
    alignleft,center,right规定表格相对周围元素的对其方式
    colspan合并的单元格个数列合并
    rowspan合并的单元格个数行合并

    列表

    表格是用来显示数据的,那么列表就是用来布局的。HTML支持无序列表、有序列表、自定义列表。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

    无序列表

    无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。无序列表使用<ul>标签,列表项使用

  • 标签定义。

    语法格式:

    html 代码:
    <ul>
     <li>列表项1</li>
     <li>列表项2</li>
     <li>列表项3</li>
     ...
    </ul>

    注意事项:

    1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。
    2. <ul></ul>中只能嵌套<li></li>,不能直接在<ul></ul>标签中输入其他标签或者文字。
    3. <li></li>之间相当于一个容器,可以容纳所有元素。
    4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

    有序列表

    有序列表就是有顺序排列的列表,其各个列表项会按照一定的顺序排列定义。
    HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。

    语法格式:

    html 代码:
    <ol>
     <li>列表项1</li>
     <li>列表项2</li>
     <li>列表项3</li>
     ...
    </ol>

    注意事项:

    1. <ol></ol>中只能嵌套<li></li>,不能直接在<ol></ol>标签中输入其他标签或者文字。
    2. <li></li>之间相当于一个容器,可以容纳所有元素。
    3. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

    自定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    定义列表常用于对术语或名词进行解释和描述,定义列表的列表项钱没有任何项目符号。

    在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

    语法格式:

    html 代码:
    <dl>
       <dt>某个名词</dt>
       <dd>某个名词的解释1</dd>
       <dd>某个名词的解释2</dd>
       …
       <dt>某个名词2</dt>
       <dd>某个名词的解释1</dd>
       <dd>某个名词的解释2</dd>
       …
    </dl>

    注意事项:

    1. <dl></dl>里面只能包含<dt><dd>
    2. <dt><dd>个数没有限制,经常是一个<dt>对应多个<dd>
    3. 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

    列表总结:

    标签名定义说明
    <ul></ul>无序列表里面只能包含li,没有顺序
    <ol></ol>有序列表里面只能包含li,有顺序
    <dl></dl>自定义列表里面有两个标签,dt和dd

    表单

    表单是为了在网页中收集信息

    表单的组成

    在HTML中一个完整的表单通常由表单域、表单控件(表单元素)、提示信息3部分组成

    表单域

    表单域<form></form>是一个包含表单元素的区域
    在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。

    <form>会把它范围内的表单元素信息提交给服务器
    html 代码:
    <form action=“url地址” method=“提交方式” name=“表单域名称">
     各种表单元素控件
    </form>
    属性属性值作用
    actionurl地址用于指定接受并处理表单数据的服务器程序的url地址
    methodget/post用于设置表单数据的提交方式,其取值为get或post
    name名称用于指定表单的名称,用来区分同一个页面中的多个表单域

    表单控件(表单元素)

    在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

    <input>表单元素

    在表单元素中,<input>标签用于收集用户信息。
    <input>标签中包含一个type属性,根据不同的type属性值,输入字段拥有很多种信息(文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

    • input为单标签
    • type属性设置不同的属性值用来指定不同的控件类型

    type属性的常用属性值:

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

    除type属性外,标签还有其他属性常用属性有:

    属性属性值描述
    name由用户自定义定义input元素的名称
    value由用户自定义规定input元素的值
    checkedchecked规定此input元素首次加载时应当被选中
    mexlength正整数规定输入字段中的字符的最大长度
    1. namevalue是每个表单元素都有的属性值,主要是给后台人员使用
    2. name表单元素的名字, 要求单选按钮和复选框要有相同的name值.
    3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素
    4. maxlength是用户可以在表单元素输入的最大字符数, 一般较少使用

    label标签

    <label>标签为input元素定义标注(标签)
    使用场景:<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将光标转到或选择对应的表单元素上,用来增加用户体验

    核心:<label>标签的for属性应当与相关元素的id属性相同。

    基本语法:

    html 代码:
    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex" />

    <select>表单元素

    使用场景: 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。

    基本语法

    html 代码:
    <select>
     <option>选项1</option>
     <option>选项2</option>
     <option>选项3</option>
     ...
    </select>

    注意事项

    1. <select>中至少包含一对<option>
    2. <option>中定义selected ="selected"时,当前项即为默认选中项。

    <textarea>表单元素

    使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 <textarea> 标签。
    在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
    使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

    通过 <textarea> 标签可以轻松地创建多行文本输入框。

    基本语法

    html 代码:
    <textarea rows="3" cols="20">
     文本内容
    </textarea>

    总结思维导图

    html第二弹.pnghtml第二弹.png
  • 声明:本文由 小北(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 云与雾Blog 分享你我所热爱的。 51统计
    MOEICP 萌ICP备20228088号 ICP 晋ICP备2021016398号 又拍云 本站由又拍云提供CDN加速/云存储服务

    💻️ 小北 1月5日 在线

    🕛

    本站已运行 3 年 336 天 18 小时 36 分
    云与雾Blog. © 2021 ~ 2025.
    网站logo

    云与雾Blog 分享你我所热爱的。