HTML+CSS+JS 学习笔记(一)———HTML(下)

简介: HTML+CSS+JS 学习笔记(一)———HTML(下)

目录

表单

表单的功能结构

form元素

input元素

input 元素的属性

label元素

多行文本输入框/文本域

窗体选项栏

简单表格的制作

表头的设置

表格的合并

div 标签

div 标签的介绍

div 标签的应用

span 标签

span 标签的介绍

span 标签的应用

列表

列表的标签


表单

介绍:HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下,数据 被发送到web服务器,但是web页面也可以自己拦截它并使用它。

表单的功能结构

概念:HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大 多数情况下,这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内 容。

多数情况下,表单收集的数据被发送到web服务器。在这种情况下,您需要设置一个web服务器来接收和处理数据。服务器识文目 前超出了所学范围,我们会在以后学习。

form元素

元素 form元素正式定义了一个表单。它是一个容器元素,但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选 的,但实践中最好至少要设置action属性和method属性。

支持的属性:

    • name: 给这个表单起个名字
    • method: 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).
    • action: 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
    • target :目标窗口的打开方式
    • enctype:表单信息提交的编码形式,其属性值有 text/plain、 applicarion/x-www-form.urlencoded 和multipart/ form-data 三个

    input元素

    input是一个单一型元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。

    <input type="text ">

    image.gif

    type:input的工作方式相当程度上取决于type属性的值,不同的 type 值会赋予input元素不同的功能。如果未指定此属性,则 采用的默认类型为 text。

    表单输入类型:

      • text (默认):单行的文本输入框,输入中的换行会被自动去除。
      <input type="text">
      • image.gif
      • password:单行的密码输入框,输入的文本使用密文显示。
      <input type="password">
      • image.gif
      • number:只能输入数字的输入框。
      <input type="number">
      • image.gif
      • email:编辑邮箱地址的输入框。类似 text 输入,但在支持的浏览器上会有邮箱格式的规则验证提示。
      <input type="email">
      • image.gif
      • search:用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮,用于清 除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
      <input type="search">
      • image.gif
      • tel:用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
      <input type="tel">
      • image.gif

      表单日期类型

        • week:用于输入以年和周数组成的日期,不带时区。
        • month :输入年和月的控件,不带时区。
        • time (H5新增):于输入时间的控件,不包括时区。
        • date (H5新增):输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。
        • datetime-local:输入日期和时间的控件,使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 (目前支持的浏览器为数不多)

        表单单复选类型

          • checkbox:复选框,可设为选中或未选中。

          <input type=”checkbox” name=” 栏位 名 称 ” value=” 内定值” checked=”checked” disabled=”disabled ”>

            • radio:单选框

            单 选 栏 位 :<input type=”radio” name=” 栏 位 名 称 ” value=” 内 定 值 ” checked=”checked” disabled=” disabled ”>

            表单按钮类型

              • button:没有默认行为的按钮,上面显示 value 属性的值,默认为空。
              • submit:用于提交表单的按钮。
              • reset:此按钮将表单的所有内容重置为默认值。不推荐。

              表单文件类型

                • file:让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

                表单颜色类型

                  • color:用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器。

                  表单范围控制类型

                    • hidden:不显示的控件,其值仍会提交到服务器。

                    input 元素的属性

                      • type所有input元素,input表单控件的type
                      • disabled所有input元素,表单控件是否被禁用
                      • form所有input元素,将控件和一个form元素联系在一起
                      • name所有input元素,input表单控件的名字。以名字/值对的形式随表单一起提交
                      • value所有input元素,表单控件的值。以名字/值对的形式随表单一起提交
                      • checked:当input元素typeradio, checkbox时,用于控制控件是否被选中
                      • alt:当input元素typeimage时,alt属性是可访问性的要求。
                      • heightimage <img> height 属性相同;垂直方向
                      • srcimage 图像资源的地址
                      • widthimage <img> width 属性一样
                      • placeholder:当input元素typepassword, search, tel, text, url时,当表单控件为空时,控件中显示的内容

                      label元素

                      将一个 <label> 和一个 <input> 元素相关联的优点:

                      你可以点击关联的标签来聚焦或者激活这个输入元素,就像直接点击输入元素自身一样。这扩大了元素的可点击区域,让包括使

                      用触屏设备在内的用户更容易激活这个元素。

                      你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性,其值和 <input> id 一样。

                      <label for="apple">Do you like apple?</label>
                      <input type="text" name="apple" id="apple">

                      image.gif

                      支持的属性

                        • for:即和 <label> 元素在同一文档中的 可关联标表单元素 的 id

                        注意: <label> 元素可同时有一个 for 属性和一个子代控件元素,只是 for 属性需要指向这个控件元素。

                          • form:表示与 label 元素关联的 <form> 元素(即它的表单拥有者)。其值应是同一文档中 <form> 元素的 id。因此 你可以将 label 元素放在文档的任何位置,而不仅作为 <form> 元素的后代。

                          多行文本输入框/文本域

                          概念HTML <textarea> 元素表示一个多行纯文本编辑控件,当你希望用户输入一段相当长的、不限格式的文本,例如评论或反馈表单中的一段意见时,这很有用。

                          <label for="proposal">请提出宝贵的建议</label>
                          <textarea id="proposal" name="proposal"
                          rows="5" cols="33">
                          这里是多行文本输入框的内容......
                          </textarea>

                          image.gif

                          为了提高可访问性(accessibility),请 <label> <textarea> 关联。

                          name 属性,用于设置随表单一同提交到服务器的相关数据的名字。

                          rows cols 属性,用于声明 <textarea> 的精确尺寸。这对于一致性非常有帮助,因为不同浏览器的默认值常常不一样。

                          位于开始标签和闭合标签之间的内容就是 <textarea> 输入框中的内容。 <textarea> 不支持 value 属性。

                          支持的属性

                            • name: 元素的名称。
                            • disabled:禁用文本域。默认为false
                            • form:指定跟自身相关联的表单。值必须为本文档内的表单的ID,如果未指定,就是跟当前所在的表单元素相关联。这就允许
                            • 你在文档的任意地方放置文本域元素。
                            • placeholder:向用户提示可以在控件中输入的内容。 在渲染提示时,占位符文本中的回车符(\r)或换行符(\n)一定会被作
                            • 为行断(换行)处理。
                            • readonly:不允许用户修改元素内文本。和 disabled 属性不同的是,这个能让用户点击和选择元素内的文本。如果在表单
                            • 里,这个元素的值还是会跟随表单一起提交。
                            • required:提示用户这个元素的内容必填。
                            • cols:文本域的可视宽度。必须为正数,默认为20 (HTML5)
                            • rows:元素的输入文本的行数(显示的高度)。

                            窗体选项栏

                            概念HTML <select> 元素表示一个提供选项菜单的控件

                            格式

                            <label for="关联id">Choose:</label>
                            <select name=”栏位名称” size=”数字” id="关联id">
                            <option value=”选项值” selected=”selected”>
                            <option value=”选项值”>…
                            <option value=”选项值”>…
                            </select>
                            <!--
                            你还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。
                            -->
                            <select>
                            <optgroup label="分组名称">
                            <option>Tyrannosaurus</option>
                            <option>Velociraptor</option>
                            <option>Deinonychus</option>
                            </optgroup>
                            <optgroup label="分组名称">
                            <option>Diplodocus</option>
                            <option>Saltasaurus</option>
                            <option>Apatosaurus</option>
                            </optgroup>
                            </select>

                            image.gif

                            select支持的属性

                              • disabled:这个布尔值的属性表示用户不能与该表单控件交互。
                              • 元素的id(如果没有设置这个属性, <select> 元素则与其任何存在的祖先 <form> 元素关联)。
                              • form<select> 所关联的 <form> (它的"表单拥有者")。其值必须是在同一文档中的
                              • name:该属性规定了控件的名称。

                              option支持的属性

                                • disabled:如果设置了这个布尔属性,则该选项不可选。浏览器通常会将这种控件显示为灰色,并且不再接受任何浏览器事
                                • 件,例如鼠标点击或者焦点相关的事件。如果这个属性没有设置,而这个元素的其中一个父元素是被禁用的
                                • label:这个属性是用于表示选项含义的文本。如果 label 属性没有定义,它的值就是元素文本内容。
                                • selected:这个布尔属性存在时表明这个选项是否一开始就被选中。 <select> 元素的 multiple 属性没有设置,则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。
                                • value: 这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性,值就从选项元素的文本内容中获取。

                                简单表格的制作

                                表格标签是 <table>..</table>,表格的其他标签只有在表格的开始标签 <table>和格的结束标签 </table> 间才有效。用于制作表格的主要标签如下表所示。

                                标 签 含义
                                <table> 表格标签
                                <ti> 行标签
                                <td> 单元格标签

                                <table>标签的语法格式如下:

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

                                image.gif

                                 在该语法中,<table> 和 </table> 标签分别标志着一个表格的开始和结束 <tr> 和</tr>标签分别标志着表格中一行的开始和结束,在表格中包含几组 <tr>...</tr> 标签,就表示该表格为几行: <td> 和 </td> 标签标志着一个单元格的开始和结束,即表示一行中包含了几列。

                                表头的设置

                                表格中还有一种特殊的单元格,称为表头。表头一般位于表格第一行,用来表明该列的内容类别,用 <th> 和 </th> 标签来表示。<th> 标签的使用方法与 <td> 签的使用方法相同,但是 <th> 标签中的内容是加粗显示的,其语法格式如下:

                                <table>
                                    <caption>表格的标题 </caption>
                                    <tr>
                                        <th>表格的表头 </th>
                                        <th>表格的表头 </th>
                                       ...
                                    </tr>
                                    <tr>
                                        <td>单元格内的文字</td>
                                        <td>单元格内的文字</td>
                                       ...
                                    </tr>
                                </table)

                                image.gif

                                表格的合并

                                表格的合并是指在复杂的表格结构中,有些单元格是跨多列的,有些单元格是跨多行的,其语法格式如下:

                                //左右合并
                                <td colspan="跨的列数">
                                //上下合并
                                <td rowspan="跨的行数">

                                image.gif

                                在该语法中,跨的列数是指单元格在水平方向上跨的列数: 跨的行数是指单元格在垂直方向上跨的行数。

                                举个栗子

                                <td rowspan="2">序号</td>
                                      <td colspan="2">姓名</td>

                                image.gif

                                                                image.gif编辑

                                div 标签

                                       <div> 标签是用来为 HTML 文档内容提供结构和背景的元素。<div> 起始标签和/div> 结束标签之间的所有内容都是用来构成这个块的,其中包含的标签的特性由 <div>示签中的属性来控制,或者通过使用样式表格式化这个块来进行控制。

                                div 标签的介绍

                                div 全称为 division,意为分隔。<div> 标签被称为分隔标签,表示一块可以显示HTML 的区域,用于设置字、图片、表格等的摆放位置。<div> 标签是块级标签,需要使用结束标签 </div>。

                                块级标签叉名块级元素,与其对应的是内联元素,也叫行内标签,它们都是HTML 规范中的概念

                                <div> 标签的语法格式如下:

                                 

                                <div>
                                ...
                                </div>

                                image.gif

                                div 标签的应用

                                在应用 <div> 标签之前,先来了解 <div> 标签的属性。当网页加入层时,会经常用到<div> 标签的属性。

                                <div> 标签的语法格式如下:

                                <div id="value" align="value" class="value" style="value">
                                </div>

                                image.gif

                                其中各参数含义如下。

                                (1) id: <div> 标签的 id,也可以说是 <div>标签的名字,常与 CSS 式相结合,实现对网页中元素的控制。

                                (2) align: 用于控制 <div> 标签中元素的对齐方式,其值可以是 left、center 和right,分别用于设置元素的居左、居中和居右对齐。

                                (3) class: 用于设置 <div> 标签中元素的样式,其值为 CSS 样式中的 class 选择符。

                                (4) style: 用于设置 <div> 标签中元素的样式,其值为 CSS 属性值,各属性值应用分号分隔。

                                span 标签

                                       大部分 HTML 标签都有其意义(如<p> 标签创建段落、<h1> 签创建标题等),然而<span> 标签和 <div> 标签似乎没有任何内容上的意义,但它与 CSS 结合后,应用范围就非常广泛了。

                                span 标签的介绍

                                        <span> 标签和 <div> 标签非常类似,是 HTML中组合用的标签,可以作为插入 CSS的容器,或插入 class、id 等语法内容的容器。

                                <span> 标签的语法格式如下:

                                 

                                <span>
                                ...
                                </span>

                                image.gif

                                span 标签的应用

                                       <span> 标签是行内标签,<span> 标签的前后不会换行,它没有结构上的意义,是纯粹的应用样式,当其他行内元素都不合适时,可以使用 <span> 标签。

                                列表

                                       列表形式在网站设计中占据比较大的比重,可以使网页上的信息整齐、直观地显示出来,便于用户理解。在后面的学习中会涉及大量列表元素的高级运用。

                                列表的标签

                                       列表分为两种类型:一种是有序列表,另一种是无序列表。有序列表使用编号来记录项目的顺序,无序列表使用项目符号来标记无序的项目。

                                列表的主要标签如表所示:

                                标签 描述
                                <ul> 无序列表
                                <ol> 有序列表
                                <dir> 目录列表
                                <dl> 定义列表
                                <menu> 菜单列表
                                <dt>,<dd> 定义列表的标签
                                <li> 列表项目的标签

                                type类型的符号类型

                                类型值 列表项目的符号
                                disc 实心⚪
                                circle 空心⚪
                                square 实心■

                                有序列表的序号类型

                                type取值 列表项目的序号类型
                                1 数字1,2,3,4,..·
                                a 小写英文字母 a,b,c,d,·.·
                                A 大写英文字母 A,B,C,D,·.·
                                i 小写罗马数字i,ii,ii,iv,..·
                                I 大写罗马数字I,,m,IV,...
                                相关文章
                                |
                                4月前
                                |
                                移动开发 前端开发 JavaScript
                                征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
                                本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
                                |
                                4月前
                                |
                                前端开发 JavaScript
                                个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
                                本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
                                |
                                4月前
                                |
                                存储 前端开发 JavaScript
                                仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
                                这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
                                |
                                4月前
                                |
                                前端开发
                                个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
                                这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
                                |
                                前端开发 JavaScript UED
                                【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
                                【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
                                497 7
                                |
                                缓存 前端开发 JavaScript
                                【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
                                【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
                                267 6
                                |
                                编解码 移动开发 前端开发
                                【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
                                【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
                                443 4
                                |
                                编解码 前端开发 UED
                                【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
                                【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
                                442 3
                                |
                                编解码 缓存 前端开发
                                【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
                                【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
                                544 2
                                |
                                编解码 前端开发 数据挖掘
                                【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
                                【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
                                245 2

                                热门文章

                                最新文章