Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)

简介: Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)

常用文本标签

<em>:定义着重字体(将字体变为斜体,且表示着重)

<b>:定义粗体文本(单纯将字体变为粗体)

<i>:定义斜体字(单纯将字体变为斜体)

<strong>:定义加重语气(将字体变为粗体,并表示语气加重)

<del>:定义删除字(将字体变为含有删除线的字体)

<span>:元素没有特定的含义(一般用于选中一段文本,后续CSS使用)

注意:常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇。

列表标签

有序列表

有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签,每个列表项始于<li>标签。

<ol>
    <li>苹果</li>
    <li>车站</li>
    <li>猫是一种距离单位  <!-- </li>可以省略不写-->
</ol>

type属性

<ol>的属性type拥有的选项:

  • 1   表示列表项目用数字标号(1,2,3...)
  • a   表示列表项目用小写字母标号(a,b,c...)
  • A   表示列表项目用大写字母标号(A,B,C...)
  • i    表示列表项目用小写罗马数字标号(i,ii,iii...)
  • I    表示列表项目用大写罗马数字标号(I,II,III,...)

无序列表

无序列表是一个项目的列表,此列项目使用粗体原点(典型的小黑圆圈)进行标记。无序列表始于<ul>标签,每个列表项始于<li>标签。

type属性

<ul>的属性type拥有的选项:

  • disc   默认实心圆
  • circle   空心圆
  • square   小方块
  • none   不显示

常见的应用场景:

  1. 无序的列表效果
  2. 导航效果(通过CSS调整样式)

定义列表

<dl> 标签定义了定义列表(definition list)。

<dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd>(描述列表中的项目)。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

注意:列表是可以进行嵌套的。

表格标签

表格组成与特点

行、列、单元格

单元格特点:同行等高、同列等宽

表格标签

表格:<table>

行:<tr>

单元格(列):<td>

快捷键

快速生成表格结构:table>tr*2>td*4{单元格}

表格属性

  1. border:设置表格的边框
  2. width:设置表格的宽度
  3. height:设置表格的高度

合并表格单元格

水平合并:colspan

垂直合并:rowspan

水平合并保留左边,删除右边

垂直合并保留上边,删除下边。

Form表单

表单在Web网页中用来给用户填写信息,从而能采集用户信息,使网页具有交互的功能。


所有的用户输入内容的地方都用表单来写,如登陆注册、搜索框......


表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框、提交按钮等,这些输入框、按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。


<form action="url" method="get|post" name="myform"></form>

属性说明

action:服务器地址

name:表单名称

method:获取数据的方式

method中Get和Post的区别

  1. get提交的数据url可以看到,post看不到
  2. get一般用于提交少量数据,post用于提交大量数据

表单元素

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

<form>
    <input>  <!-- 表单域-->
    <input type="submit">  <!-- “提交”按钮-->
    <button>按钮</button>  <!-- 按钮的另一种方式-->
</form>

注意:input为单标签。

文本框

文本框通过<input type="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本框

<form>
  First name:<input type="text" />
    <br />
    Last name:<input type="text" />
</form>

密码框

密码字段通过标签<input type="password">来定义。

<form>
  账号:<input type="text" />
    <br />
    密码:<input type="password" />
</form>

密码框在一般情况下,里面的字段字符不会明文显示,而是以星号或圆点替代。

提交按钮

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form>
  User name:<input type="text" />
    <br />
    password:<input type="password" /> <input type="submit" value="Submit" />
  <br />
    <br />
  用户名:<input type="text" />
    <br />
    密码:<input type="password" /> <input type="submit" value="登陆" />
</form>

块元素与行内元素(内联元素)  

HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在HTML5中,元素不再按照这种方式来区分,而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别的,被称为穿透型,元素可能属于不止一个类别,称为混合的。


虽然到了HTML5的版本,元素分类更细致了,但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用。

内联元素和块级元素的区别 image.png

常见块级元素

div、form、h1~h6、hr、p、table、ul等等

常见内联元素 (行内元素)

a、b、em、i、span、strong等等

行内块级元素

(特点:不换行、能够识别宽高)

这些元素虽然是横向排布的,但是可以设置width、height,也就是同时结合了块级元素和行内元素。

button、img、input等等

目录
相关文章
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
575 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
672 14
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
961 7
|
前端开发 开发者 安全
JSF表单处理大揭秘:数据绑定与事件处理,如何让Web应用更加智能?
【8月更文挑战第31天】在现代Web应用开发中,JSF(JavaServer Faces)框架因强大的表单处理能力而广泛应用。其数据绑定机制可实现表单控件与后端模型的双向传输,降低前后端耦合度,提高代码维护性和类型安全性。事件处理机制则支持丰富的内置与自定义事件,进一步增强应用灵活性。本文通过示例代码展示这些特性,帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而,JSF也存在组件库较小和学习成本较高等局限,需根据具体需求权衡使用。
267 0
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
320 0
|
安全 Java 云计算
JSF 应用究竟何去何从?云端部署能否成为其全新突破点?快来一探究竟!
【8月更文挑战第31天】本文介绍了将JavaServer Faces(JSF)应用部署到云平台的过程。首先,根据成本、功能、可靠性和安全性选择合适的云平台。接着,展示了构建简单JSF应用的示例代码。最后,以AWS Elastic Beanstalk为例,详细说明了部署流程。部署至云端可提升应用的可用性、扩展性和安全性。
332 0
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
847 4
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。

热门文章

最新文章