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

Time_Controller

已于 2024-11-14 21:22:11 修改

阅读量936

点赞数 15

文章标签： html 前端

于 2024-11-14 21:21:51 首次发布

本文链接：https://blog.youkuaiyun.com/Time_Controller/article/details/143780242

版权

一.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>