html学习笔记（3）

一、文本格式标签

效果	标签（旧版）	标签（语义化，强调）
加粗	`<b>`	`<strong>`
倾斜	`<i>`	`<em>`
下划线	`<u>`	`<ins>`
删除线	`<s>`	`<del>`

前面的标签 b 、 i 、 u 、 s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而

后面的 strong 、 em 、 ins 、 del 在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

二、页面布局

1.盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个

矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：内容区域（ content ）、内边距区域（ padding ）、边框区域（ border ）、外边

距区域（ margin ）

盒子的大小，其实就包括三个部分： border 、 padding 、 content ，而 margin 外边距是不包括在盒

子之内的。

属性	定义	示例
border	元素的边框，用于分隔元素的内容和外部环境	`border: 1px solid black;`
padding	元素内容和边框之间的空白区域	`padding: 20px;`
content	元素的实际内容，如文本、图像等	`<p>这是一段文本内容。</p>`
margin	元素边框和外部元素之间的空白区域	`margin: 30px;`

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>提议推荐也是一种"正在进行的工作"。此文档可在任何时间被更新、替换或废弃。不过即使它不意味着 W3C 的任何官方的认可，在极多的情况下，提议的推荐无论在内容还是时间上都已接近于最后的推荐。</div>
    <style>
        div {
            width: 500px; /* 宽度 */
            height: 500px; /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px  /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
         }
        </style>
</body>
</html>

2.布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

特点：

div 标签：一行只显示一个（独占一行）

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高（ width 、 height ）

span 标签：

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高（ width 、 height ）

三、表格标签

<table> : 用于定义整个表格 , 可以包裹多个 <tr> ，常用属性如下：

border：规定表格边框的宽度

width：规定表格的宽度

cellspacing: 规定单元之间的空间

<tr> : 表格的行，可以包裹多个 <td>

<td> : 表格单元格 ( 普通 ) ，可以包裹内容 , 如果是表头单元格，可以替换为 <th>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1px" width="200px" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>
</body>
</html>

四、表单标签

表单是网页中用于数据采集的工具，以下是表单的相关介绍：

表单的基本组成部分

表单标签：用于声明表单，定义采集数据的范围，以及指定处理表单数据的CGI程序的URL和数据提交到服务器的方法。
表单域：包含各种输入字段，如文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，用于采集用户的输入或选择的数据。
表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签的属性

action：指定处理提交表单的格式，可以是一个URL地址或一个电子邮件地址。
method：指明提交表单的HTTP方法，常见的有get和post两种。get方式会将表单数据附加在URL后面，而post方式则将表单数据放在请求体中，相对更安全，适合提交敏感信息。
enctype：规定在向服务器提交表单数据时，应该如何对表单数据进行编码，适用于method="post"的情况。
target：指定提交的结果文档显示的位置，如_blank表示在一个新的、无名浏览器窗口调入指定的文档。

表单的创建与使用

HTML表单：在HTML中，使用<form>标签来创建表单，在<form>标签内部可以添加各种表单元素，如<input>、<textarea>、<select>等。
表单工具：有许多在线表单工具，如WPS表单、麦客CRM、番茄表单等，这些工具提供了可视化的界面和丰富的模板，方便用户创建各种类型的表单，如问卷调查、活动报名、在线考试、意见反馈等。

表单的应用场景

数据收集：用于收集用户的信息，如姓名、联系方式、意见反馈等。
用户交互：如在线投票、评分、选择等，增强用户与网站的交互性。
业务流程管理：如服务预约、订单提交、审批流程等，提高业务效率。

例子：

<form action="" method="get">
        <input type="text" name="username" placeholder="请输入用户名"></input>
        <input type="password" name="password" placeholder="请输入密码"></input>
        <input type="submit" value="提交"></input>
    </form>

常见的表单标签

表单标签是HTML中用于创建表单的标签，以下是一些：

`<form>`标签

作用：用于创建一个HTML表单，是表单的容器标签，所有的表单元素都应该放在<form>标签内部。
属性：
action：指定表单数据提交的目标URL，即表单数据将被发送到哪里进行处理。
method：定义表单数据的提交方式，常见的有get和post两种。get方式会将表单数据附加在URL后面，而post方式则将表单数据放在请求体中，相对更安全，适合提交敏感信息。
enctype：规定在向服务器提交表单数据时，应该如何对表单数据进行编码，适用于method="post"的情况。
name：给表单命名，以便在JavaScript或其他地方引用。
autocomplete：规定表单是否应启用自动完成功能。
novalidate：如果使用该属性，则提交表单时不进行验证。

`<input>`标签

作用：用于创建各种输入字段，如文本框、密码框、单选按钮、复选框等，是最常用的表单元素之一。
属性：
type：定义输入框的类型，如text（文本框）、password（密码框）、radio（单选按钮）、checkbox（复选框）、file（文件上传）、hidden（隐藏字段）等。
name：用于标识表单字段，在提交表单时，该名称会与用户输入的值一起发送到服务器。
id：用于在HTML文档中唯一标识该输入元素，通常与<label>标签的for属性配合使用，以提高表单的可访问性。
value：指定输入框的初始值，对于不同类型的输入框，其作用有所不同。例如，对于text类型，它是输入框的默认文本；对于radio和checkbox类型，它是提交到服务器的值。
placeholder：用于设置输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
required：表示该输入字段是必填项，在提交表单时，如果该字段为空，浏览器会提示用户填写。

`<textarea>`标签

作用：定义一个多行的文本输入控件，用户可以在其中输入大量的文本，如留言、评论等。
属性：
name：用于标识该文本域，在提交表单时，文本域中的内容会以该名称与值的形式发送到服务器。
rows：规定文本区内的可见行数。
cols：规定文本区内的可见宽度。
placeholder：用于设置输入字段预期值的提示信息。

`<select>`标签

作用：用于创建下拉列表，用户可以从列表中选择一个或多个选项。
属性：
name：用于标识该下拉列表，在提交表单时，所选选项的值会以该名称与值的形式发送到服务器。
size：设置下拉列表展开时显示的选项数量。
multiple：设置是否允许用户选择多个选项。

`<option>`标签

作用：定义下拉列表中的选项，必须放在<select>标签内部。
属性：
value：指定该选项的值，在提交表单时，该值会被发送到服务器。
selected：设置该选项为默认选中状态。

<select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>