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等等

目录
相关文章
|
1月前
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
2月前
|
前端开发 数据安全/隐私保护
【前端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;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
66 28
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
|
3月前
|
安全 前端开发 PHP
构建与验证表单:传统PHP与Laravel框架的比较分析——探索Web开发中表单处理的优化策略和最佳实践
【8月更文挑战第31天】在 Web 开发中,表单构建与数据验证至关重要。传统 PHP 方法需手动处理 HTML 表单和数据验证,而 Laravel 框架则提供了一种更现代、高效的解决方案。本文通过对比传统 PHP 和 Laravel 的方法,探讨表单构建与验证的最佳实践。Laravel 通过简洁的语法糖、内置的数据过滤和验证机制,显著提升了代码的安全性和可维护性,适用于大型项目或需要快速开发的场景。然而,在追求灵活性的小型项目中,直接使用 PHP 仍是不错的选择。了解两者的优劣,有助于开发者根据项目需求做出最佳决策。
38 0
|
3月前
|
前端开发
震惊!Web 前端行内元素和块级元素的 “巅峰对决”,究竟谁能主宰页面布局?
【8月更文挑战第26天】在Web前端开发中,掌握行内元素与块级元素的区别十分重要。块级元素如`&lt;p&gt;`、`&lt;div&gt;`等,特性为自动换行并可设置宽高;而行内元素如`&lt;span&gt;`则在同一行显示且无法直接设置宽高。二者默认样式亦不同,但可通过CSS调整显示方式,灵活应用于页面布局设计中,实现更优视觉效果。
40 1
|
3月前
|
前端开发 开发者 安全
JSF表单处理大揭秘:数据绑定与事件处理,如何让Web应用更加智能?
【8月更文挑战第31天】在现代Web应用开发中,JSF(JavaServer Faces)框架因强大的表单处理能力而广泛应用。其数据绑定机制可实现表单控件与后端模型的双向传输,降低前后端耦合度,提高代码维护性和类型安全性。事件处理机制则支持丰富的内置与自定义事件,进一步增强应用灵活性。本文通过示例代码展示这些特性,帮助开发者更好地利用JSF构建高效、灵活的Web应用。然而,JSF也存在组件库较小和学习成本较高等局限,需根据具体需求权衡使用。
49 0
|
3月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
42 0
|
3月前
|
安全 Java 云计算
JSF 应用究竟何去何从?云端部署能否成为其全新突破点?快来一探究竟!
【8月更文挑战第31天】本文介绍了将JavaServer Faces(JSF)应用部署到云平台的过程。首先,根据成本、功能、可靠性和安全性选择合适的云平台。接着,展示了构建简单JSF应用的示例代码。最后,以AWS Elastic Beanstalk为例,详细说明了部署流程。部署至云端可提升应用的可用性、扩展性和安全性。
47 0
|
3月前
|
开发者 数据管理 Java
表单革命:Vaadin Forms如何重塑你的Web表单体验,打造用户互动新纪元
【8月更文挑战第31天】在现代Web开发中,表单是用户与应用交互的关键。Vaadin框架提供了强大的表单处理工具,简化了高效且用户友好表单的创建。本文深入探讨Vaadin Forms的工作原理,包括数据绑定、验证和事件处理等功能,并通过详细代码示例,帮助开发者掌握其使用方法,从而构建出满足各种需求的表单。
37 0