HTML学习-1

 

目录

一、表格标签

1.表格的基本语法

2.表头单元格标签

3.表格属性

4.表格的结构标签

5.合并单元格

二、列表标签

1.无序列表（重点）

 2.有序列表

 3.自定义列表 （重点）

三、表单标签

1.表单域

2.表单控件

2-1 input输入表单元素（收集用户信息）

2-1-1 label标签

一、表格标签

表格不是用来布局页面的，而是用来展示数据的。

1.表格的基本语法

<table>
  <tr>
    <td>单元格内的文字<td>
     ...
  </tr>
   ...
<table>

•      <table> </table>是用于定义表格的标签
•      <tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>中。
•      <td> <td>标签用于定义表格中的单元格，必须嵌套在 <tr> </tr>中。
•      字母td指表格数据（table date）及数据单元格中的内容。

2.表头单元格标签

一般表头 单元格位于表格的第一行或第一列, 表头单元格里面的文本内容加粗居中显示.

<th>标签表示HTML表格的表头部分(table head的缩写)

   表头里的内容会加粗

3.表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1或""	规定表格单元是否拥有边框，默认为"", 表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

4.表格的结构标签

<thead></thead>头部，必须拥有<tr>标签

<tbody></tbody>主体

5.合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

<tr=rowspan="2">   ...    </tr>       合并结束记得要删除多余的单元格

二、列表标签

列表是用来布局的

可分为：无序列表、有序列表、自定义列表

标签名	定义	说明
<ul></ul>	无序标签	里面只包含<li>,没有顺序，使用较多，<li>里面可以包含任何标签。
<ol></ol>	有序标签	里面只包含<li>,有顺序，使用较少，<li>里面可以包含任何标签。
<dl></dl>	自定义标签	里面只包含<dt>和<dd>,<dt>和<dd>可以包含任何标签。

1.无序列表（重点）

<ul>标签表示HTML页面中项目的无序列表, 一般会以项目符号呈现列表项,而列表项使用<li>标签定义。

例如：

                                            

• 无序列表的各个列表项之间没有顺序级别之分,是并列的。
• <ul> </ul>中只能嵌套<li></li> ,直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的。
• <li>与</li>之间相当于一个容器,可以容纳所有元素。
• 无序列表会带有自己的样式属性，但在实际使用时用css设置。

 2.有序列表

<ol>标签表示HTML页面中项目的有序列表，<li>定义列表项

 3.自定义列表 （重点）

在HTML标签中，<dl>标签用于定义描述列表(或定义列表)，该标签与 <dt> (定义项目/名字)和<dd> (描述每一个项目名字) 一起使用。

多用于对术语或名词进行解释和描述，定义列表项前没有任何项目符号。

注意：

•  <dl> </dl>里面只能包含<dt>和<dd>
• <dt> 和<dd>个数没有限制,经常是一个<dt> 对应多个<dd>

列如：

三、表单标签

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息三部分组成。

1.表单域

表单域是一个包含元素的区域

在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

 常见属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单元素的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2.表单控件

2-1 input输入表单元素（收集用户信息）

在<input>标签中，包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="属性值"   />

• <input/>为单标签
• type属性设置不同的属性值来指定不同的控件类型

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
checkbox	定义复选框。（多选）
file	定义输入字段和“浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

• name属性（name 是表单元素的名字）

当页面中有很多表单元素的时候，name用来区别不同的表单元素的值 

 

• value属性，规定input元素的名称。

<form>
  用户名：<input type="text" name="username" value="请输入用户名" > <br>
<form>

• checked (单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选项中的这个按钮。） 
• maxlength（正整数）规定选框中最大输入的长度。

<form>
        <!-- text 文本框 用户可以输入任何文字 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
        密码：<input type="password"> <br>
         <!-- name 是表单元素的名字 如这里的毕业和考研必须有相同的名字name 才可以是实现多选一 -->
         <!-- checked (单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选项中的这个按钮。 -->
        毕业：考研 <input type="radio" name="毕业"> 就业<input type="radio" name="毕业" checked="checked"><br>
        <!-- 提交1：<input type="submit" > -->
        <!-- 点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
        提交2：<input type="submit" value="确认注册"><br>
        <!-- 重置按钮可以还原表单元素初始默认状态 -->
        重置：<input type="reset" value="重新填写"> <br>
        <!-- 普通按钮 button，后期搭配js使用 -->
        普通按钮：<input type="button" value="发送验证码"> <br>
        <!-- 文件域 file 上传文件时使用 -->
        上传文件：<input type="file" value="头像">
    </form>

 

2-1-1 label标签

<label>标签为input元素定义标注(标签)。

<label>标签用于绑定一个表单元素 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标转到或者选择对应的表单元素上用来增加用户体验.

<label for="text">用户名：</label> <input type="text" id="text"><br>
<input type="radio" id="nan"><label for="nan">男</label>
<input type="radio" id="nv"><label for="nv">女</label><br>

 2-2 <select>表单元素

在页面中如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件标签定义下拉列表。

<select>
        <option>喜羊羊</option>
        <option>懒羊羊</option>
        <option>暖羊羊</option>
        <option>灰太狼</option>
    </select>

默认选定状态：<option selected="selected">灰太狼</option>

  <textarea>文本域

定义多行文本输入的控件（评论、意见......)

 

---

<h3>青青草原</h3>
    <table width="500" >
        <!-- 第一行 -->
        <tr>
            <td>物种：</td>
            <td>
                <input type="radio" name="物种" id="yang"><label for="yang">🐏</label>
                <input type="radio" name="物种" id="lang"><label for="lang">不吃羊的狼</label><br>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择月份--</option>
                    <option>3-4</option>
                    <option>5-6</option>
                    <option>7-8</option>
                    <option>9-10</option>
                    <option>11-12</option>
                </select>
            </td>
            <td>
                <select>
                    <option>--请选择日期--</option>
                    <option>11-20</option>
                    <option>21-30</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>住址:</td>
            <td> <input type="tsxt" value="请输入地址"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>你最喜欢的🐏/狼</td>
            <td>
                <input type="radio" name="yang" id="y1"><label for="y1">喜羊羊</label>
                <input type="radio" name="yang" id="y2"><label for="y2">懒羊羊</label>
                <input type="radio" name="yang" id="y3" checked="checked"><label for="y3">灰太狼</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历:</td>
            <td><input type="text" value="请输入学历"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的食物</td>
            <td>
                <input type="radio" name="shiwu" id="luosifen"><label for="luosifen">螺蛳粉</label>
                <input type="radio" name="shiwu" id="kaochang"><label for="kaochang">烤肠</label>
                <input type="radio" name="shiwu" id="yufen"><label for="yufen">鱼粉</label>
                <input type="radio" name="shiwu" id="xiangguo"><label for="xiangguo">香锅</label>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>自我介绍:</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">以上说法均属实</td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td><a href="#">羊村</a></td>
        </tr>
        <!-- 结尾 -->
        <tr>
            <td></td> 
            <td>
                <h3>我承诺:</h3>
                <ul>
                    <li>12345</li>
                    <li>67890</li>
                    <li>11111</li>
                </ul>
            </td>
            
        </tr>
    </table>