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;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
228 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
239 13
|
前端开发
震惊!Web 前端行内元素和块级元素的 “巅峰对决”,究竟谁能主宰页面布局?
【8月更文挑战第26天】在Web前端开发中,掌握行内元素与块级元素的区别十分重要。块级元素如`&lt;p&gt;`、`&lt;div&gt;`等,特性为自动换行并可设置宽高;而行内元素如`&lt;span&gt;`则在同一行显示且无法直接设置宽高。二者默认样式亦不同,但可通过CSS调整显示方式,灵活应用于页面布局设计中,实现更优视觉效果。
143 1
|
XML JavaScript 前端开发
哇塞!Web 前端惊现 DOM 元素神操作,一场惊心动魄的网页变革,你准备好了吗?
【8月更文挑战第23天】在Web前端开发中,熟练操作DOM元素至关重要。DOM作为一种编程接口,将HTML/XML文档表示为节点树,便于使用JavaScript访问及修改文档内容与结构。
152 0
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
171 1
|
前端开发 程序员 Android开发
好程序员web前端培训分享HTML元素强制不换行
好程序员web前端培训分享HTML元素强制不换行,HTML 中 nowrap是用来强制不换行的   在排版中   对包裹plain text的标签使用nowrap属性即刻实现强制不换行.   如:   强制不换行   强制不换行   在使用div的超文本中   把div,h1,section,na...
1385 0
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
11月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
612 3
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1180 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。