首页 > 其他分享 >HTML区块方面的细节以及表单的使用

HTML区块方面的细节以及表单的使用

时间:2024-11-14 21:19:50浏览次数:3  
标签:元素 表单 HTML 用于 内联 区块 属性

一.HTML中区块元素和内联元素的区别

1.HTML 区块元素

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。(即独占一行)

实例: <h1>, <p>, <ul>, <table>

2.HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

二.div元素和span元素的区别以及它们的细节

1.HTML <div> 元素

(1)

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

(2)

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

2.HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

三.通过以上知识来完成一个简单的页面布局

1.代码:

<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>

2.效果

四.表单的相关知识

1.了解各种元素的作用

  • <form> 元素用于创建表单,action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。
  • <label> 元素用于为表单元素添加标签,提高可访问性。
  • <input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。
  • <select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。

2.代码实例


<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

3.效果

标签:元素,表单,HTML,用于,内联,区块,属性
From: https://blog.csdn.net/Time_Controller/article/details/143780242

相关文章

  • 什么?还不会HTML的表格标签的运用,今天来带大家了解一下HTML的表格标签,内置4篇整理好的
    HTML表格文章目录HTML表格@[toc]HTML的表格介绍以下是一个简单的HTML表格实例:在线实例表格实例HTML表格和边框属性HTML表格表头更多实例HTML表格标签4篇笔记写笔记1.tr与td的详细讲解2.HTML的table的介绍3.常用的标签4.表格标签首先,先给大家介绍一下什么......
  • HTML图像操作
    1.alt作用:alt属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。代码:<imgsrc="boat.gif"alt="BigBoat">2.创建图像映射1.了解HTML的图像标签标签描述<img>定义图像<map>定义图像地图<area>定义图像地图中的可点击......
  • 响应式Web设计:纯HTML和CSS实现技巧
    响应式Web设计是一种确保网页在不同设备和屏幕尺寸下都能良好显示的设计方法。以下是使用纯HTML和CSS实现响应式设计的关键技巧:流式布局(FluidLayouts):使用相对单位(如百分比)而非固定单位(如像素)来定义元素的宽度,使元素能根据容器宽度动态调整。媒体查询(MediaQueries):根据不同......
  • 区块反转c++
    代码#include<iostream>#include<vector>usingnamespacestd;structnode{  intdata,next;}A[100001];vector<int>L,ans,E[100001];ints,n,a,t,k,mark,cnt,c;intmain(){  cin>>s>>n>>k;  for(......
  • FastHTML快速入门:服务器渲染超媒体应用的利器
    项目简介FastHTML是一个Python库,它将Starlette、Uvicorn、HTMX和fastcore的FT"FastTags"融合在一起,用于创建服务器渲染的超媒体应用程序。FastHTML类本身继承自Starlette,并增加了基于装饰器的路由、Beforeware、自动将FT渲染为HTML等功能。写作FastHTML应用时需记住的事......
  • html5多媒体标签
    文章目录HTML5新增多媒体标签详解:视频标签与音频标签视频标签`<video>`音频标签`<audio>`代码案例HTML5新增多媒体标签详解:视频标签与音频标签HTML5引入了多项新特性,其中多媒体标签的引入为网页开发带来了革命性的变化。这些标签允许开发者在不依赖第三方插件(如Fl......
  • 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况
    https://www.cnblogs.com/czhyuwj/p/4796690.html CSS3SelectorsTest:这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况。启动测试,浏览器会自动测验,并已列表的方式显示当前浏览器对所有css3选择器的支持情况  http://tool......
  • HTML for标签
    HTML标签中的“for”属性是用来做什么的|极客教程使用“for”属性的好处使用label标签的“for”属性有以下几个好处: 扩大可点击区域:通过将文本和表单元素关联起来,我们可以扩大用户点击区域,使得用户更容易点击到表单元素。 提升可用性:当用户点击label标签时,与......
  • 【泛微E9】建模查询列表(虚拟表单)实现批量更新
    查询列表代码块如下:<scripttype="text/javascript">/**请在下面编写JS代码*/jQuery(function($){varbtnname="批量更新人员的各级部门";jQuery(".wea-new-top").after("<divid='btnDiv1'></div>");//创建一个按......
  • 大学生网页设计制作作业实例代码 HTML+CSS+JS (1)
    文章目录......