与前端新人一起学魔法 Day02 HTML基础（二）

最新推荐文章于 2024-09-30 15:42:36 发布

uniguri魔法师

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量202

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_62095086/article/details/126216499

版权

本文详细介绍了HTML中的一些基本列表和表单元素，包括无序列表、有序列表、定义列表、嵌套列表的使用，以及表格、表单标签的创建和属性。通过实例展示了如何定义表格、输入字段、单选按钮、复选框、文本域等，并讨论了表单提交的行为，如action和target属性。此外，还提到了输入限制和验证，以及一个婚姻公司注册页面的示例代码。

摘要由CSDN通过智能技术生成

列表标签

表单标签用于展示数据

英文缩写为：

《li》 ————List Item
《ul》————Unordered List
《ol》————Ordered List
《dd》————Definition Description
《dl》————Definition LIst
《dt》————Definition Term

无序列表

无序列表始于《ul》标签。每个列表项始于《li》

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

显示为：

Coffe
Milk

有序列表

有序列表始于《ol》标签。每个列表始于《li》

<ol>
    <li>Coffe</li>
    <li>Milk</li>
</ol>

显示为：

Coffe
Milk

定义列表

定义列表始于《dl》，自定义列表的列表项始于《dt》,列表项的定义始于《dd》;

《dt》和《dd》存在换行和缩进

<dl>
    <dt>Coffe</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

显示如下：

Coffee

Black hot drink

Milk

White cold drink

嵌套列表

列表中的不同元素可以互相嵌套，形成递进关系

<ul>
    <li>咖啡</li>
    <li>茶</li>
    <ol>
        <li>红茶</li>
        <li>绿茶</li>
        <ol>
            <li>中国茶</li>
            <li>非洲茶</li>
        </ul>
    </ul>
    <li>牛奶</li>
</ul>

咖啡
茶

1.红茶

2.绿茶
- 中国茶
- 非洲茶
牛奶

表格标签

表格由《table》标签来定义。每个表格均有若干行（由《tr》标签定义），每行被分割为若干单元格（由《td》标签定义）。

英文缩写：

标签英文翻译
《tr》 table row 表格行
《td》 table data cell 表格数据单元
《th》 table head 表格头

标签	英文	翻译
《tr》	table row	表格行
《td》	table data cell	表格数据单元
《th》	table head	表格头

1、以下示例展示如何定义一个表格：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Heading	Another Heading
row 2，cell 1	row 2，cell 2
row 1，cell 1	row 1，cell 2

表单标签

HTML 表单用于收集用户输入。

《form》元素

《《form》》用于定义HTML表单

其中form元素具有以下几种属性。

属性描述
accept-charset 规定用于表单提交的字符编码。
action 规定提交表单时将表单数据发送到何处。
autocomplete 规定表单是否应打开自动完成（填写）功能。
enctype 规定将表单数据提交到服务器时应如何编码（仅供 method=“post”）。
method 规定发送表单数据时要使用的 HTTP 方法。
name 规定表单名称。
novalidate 规定提交时不应验证表单。
rel 规定链接资源和当前文档之间的关系。
target 规定提交表单后在何处显示接收到的响应。

属性	描述
accept-charset	规定用于表单提交的字符编码。
action	规定提交表单时将表单数据发送到何处。
autocomplete	规定表单是否应打开自动完成（填写）功能。
enctype	规定将表单数据提交到服务器时应如何编码（仅供 method=“post”）。
method	规定发送表单数据时要使用的 HTTP 方法。
name	规定表单名称。
novalidate	规定提交时不应验证表单。
rel	规定链接资源和当前文档之间的关系。
target	规定提交表单后在何处显示接收到的响应。

<form>
 .
form elements
 .
</form>

`Action`属性

action属性定义提交表单时要执行的操作。

下面例子中。表单数据被发送到名为 “action_page.php” 的文件。

<form action="/action_page.php">
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

`Target`属性

target属性规定表单提交后显示响应的位置。

target可设置如下值：

值描述
_blank 响应显示在新窗口或选项卡中。
_self 响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
framename 响应显示在命名的 iframe 中。

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

提交结果在新的浏览器显示：

<form action="/action_page.php" target="_blank">

`Autocomplete`属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

启用自动填写表单：

<form action="/action_page.php" autocomplete="on">

《input》元素

《《input》》元素是最重要的表单元素，根据其不同type属性有不同形态

其type常用取值为：

属性描述
text 提供文本输入的单行输入字段
password 与text类似，但其字符会做掩码处理（显示为星号或圆）
submit 定义提交表单数据至表单处理程序的按钮
radio 定义单选按钮
checkbox 定义复选按钮
button 按钮
number 定义输入数字值的字段，可对输入数字进行限制
date 定义用于应该包含日期的输入字段
color 用于用改包含颜色的输入字段，根据不同浏览器有不同颜色选择器
range 用于应该包含一定范围内的值的输入字段，输入字段能够显示为滑块控件
email 用于应该包含电子邮件地址的输入字段，有些浏览器会自动补全
search 用于搜索字段（搜索字段的表现类似常规文本字段）

属性	描述
text	提供文本输入的单行输入字段
password	与text类似，但其字符会做掩码处理（显示为星号或圆）
submit	定义提交表单数据至表单处理程序的按钮
radio	定义单选按钮
checkbox	定义复选按钮
button	按钮
number	定义输入数字值的字段，可对输入数字进行限制
date	定义用于应该包含日期的输入字段
color	用于用改包含颜色的输入字段，根据不同浏览器有不同颜色选择器
range	用于应该包含一定范围内的值的输入字段，输入字段能够显示为滑块控件
email	用于应该包含电子邮件地址的输入字段，有些浏览器会自动补全
search	用于搜索字段（搜索字段的表现类似常规文本字段）

`text`属性

text属性定义供文本输入的单行输入字段

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

显示效果为：

请添加图片描述

`submit`属性

submit属性定义提交表单数据至表单处理程序的按钮。

下面的示例定义了表单处理程序：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="uniguri">
<br><br>
<input type="submit" value="Submit">
</form>

显示为：

请添加图片描述

`radio`属性

radio属性定义一个单选的按钮

其中checked属性为默认选择项

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

显示为：

请添加图片描述

`textarea`属性

textarea 属性定义多行输入字段（文本域）

<input type="textarea" name="message" rows="10" cols="30">
do not go gentle into that good night
</input>

请添加图片描述

`botton`属性

button属性定义可点击的按钮

 <input type="button"  name = "Click me!" value = "Click me!"onclick="alert('hello world')">

请添加图片描述

输入限制

可在《input》元素中定义输入限制属性，对于用户输入文本做出限制

常用属性为：

属性描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

`value`属性

value属性规定输入字段的初始值

<from action="">
First name:<br>
<input type="text" name ="firstname" value="Bill">
<br>
Lats name:<br>
<input type="text" name ="lastname">
</from>

展示效果为：

请添加图片描述

`disabled`和`readonly`属性

disabled 属性规定输入字段是禁用的

readonly 属性规定输入字段为只读

两者区别在于一个数据会被提交，一个数据不可用不会被提交

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
    <!--<input type="text" name="firstname" value="Bill" readonly>-->
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

阶段性作业

完成一个婚姻公司的注册页面

效果图为：

遇到问题：无法使自我介绍部分对齐

解决方案：使用表格标签，使整个页面用表格呈现

代码为：

<!DOCTYPE html>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--设置网页在ie上观看时,按照浏览器的最高版本的IE观看-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8"> <!--这是设置网页编码-->
    <head>test1</head>

    <body>
        <h3>青春不常在，抓紧谈恋爱</h3>
      
<table>
    <tr>
        <td>性别</td>
        <td><input type ="radio" name="sex" value="male" checked>男
            <input type ="radio" name="sex" value="female" >女
            <input type ="radio" name="sex" value="undefined" >未知</td>
    </tr>
    <tr>
        <td>生日</td>
        <td><input type="date" name="birthday"></td>
    </tr>
    <tr>
        <td>所咋地区</td>
        <td> <select name ="chainsaw men">
            <option value="1">玛奇玛</option>
            <option value="2">帕瓦</option>
            <option value="3">那由多</option>
            <option value="4">蕾塞</option>
        </select></td>
    </tr>

    <tr>
        <td>婚姻状况</td>
        <td><input type="radio" name="marrige" value="unmarried" checked>未婚
            <input type="radio" name="marrige" value="married">已婚
            <input type="radio" name="marrige" value="been married">离婚</td>
    </tr>
   
    <tr>
        <td>学历</td>
        <td><input type ="text" name="text" value="本科"></td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td> <input type="checkbox" name="like" value="妩媚的">妩媚的
            <input type="checkbox" name="like" value="可爱的">可爱的
            <input type="checkbox" name="like" value="小鲜肉">小鲜肉
            <input type="checkbox" name="like" value="老腊肉">老腊肉
            <input type="checkbox" name="like" value="都喜欢" checked>都喜欢</td>
    </tr>
    <tr>
        <td align="">自我介绍</td>
        <td><input type="textarea" name="intruction" >
        <br>
        <input type="submit" name="login" value="免费注册"></td>
    </tr>
            
    <tr>
        <td> </td>
        <td><input type="radio" name="agree" value="agree">我同意注册条款和会员加入标准</td>
    </tr>
    <tr>
        <td> </td>
        <td><a href="../html2.html">我是会员，立即登录</a></td>
    </tr>
    <tr>
        <td> </td>
        <td><h3>我承诺<h3>
            
            <ul>
                <li>年满18岁，单身</li>
                <li>抱着严谨的态度</li>
                <li>真诚寻找另一半</li>
            </ul>  
        </td>
    </tr>
   
    
</table>


    </body>

</html>