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

目录
相关文章
|
6天前
|
移动开发 前端开发 JavaScript
Web表单(Form)开发实战指南
【7月更文挑战第8天】表单(Form)是Web应用程序中不可或缺的组成部分,用于收集用户输入的数据。本指南将详细介绍HTML表单的基本结构、数据提交方式、表单验证以及如何使用JavaScript和CSS增强表单的交互性和美观性。
44 0
|
1月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
26 1
|
1月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
44 1
|
1月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
22 0
|
1月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
33 0
|
前端开发 程序员 Android开发
好程序员web前端培训分享HTML元素强制不换行
好程序员web前端培训分享HTML元素强制不换行,HTML 中 nowrap是用来强制不换行的   在排版中   对包裹plain text的标签使用nowrap属性即刻实现强制不换行.   如:   强制不换行   强制不换行   在使用div的超文本中   把div,h1,section,na...
1280 0
|
1天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
15 7
|
1天前
|
API 数据库 开发者
逆袭之路!Django/Flask助你成为Web开发界的璀璨新星!
【7月更文挑战第13天】在Python Web开发中,Django和Flask各具优势。Django适合快速构建大型项目,如在线书店,其ORM和内置功能让复杂应用轻松上手。Flask则以其轻量和灵活性见长,适用于个人博客等小型应用。选择框架应根据项目需求和个人偏好,两者都能助开发者在Web开发领域大放异彩。
11 2
|
2天前
|
安全 大数据 编译器
PHP 8: 探索新特性及其对现代Web开发的影响
在这篇文章中,我们将深入探讨PHP 8的最新特性,包括JIT编译器、联合类型、匹配表达式等,并分析这些更新如何影响现代Web开发。通过具体示例和代码片段,本文旨在为开发者提供一个清晰的指南,以便更好地利用PHP 8的新功能优化和加速他们的应用程序。
9 2
|
3天前
|
编译器 测试技术 PHP
深入理解PHP 7的新特性及其对现代Web开发的影响
【7月更文挑战第12天】本文将探讨PHP 7版本中引入的关键改进和新增功能,以及这些变化如何优化了性能、提升了代码的可维护性,并促进了现代Web开发的最佳实践。通过具体示例,我们将深入了解这些新特性在日常开发中的应用,以及它们为开发者带来的实际益处。
10 2