【学习笔记4】HTML（2）

最新推荐文章于 2023-02-04 20:54:59 发布

m0_1229

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量106

点赞数

分类专栏： HTML 学习文章标签： html 前端

本文链接：https://blog.csdn.net/m0_60525480/article/details/119218740

版权

学习同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

1.表格标签

表格的主要作用：用于显示、展示数据。

基本语法：

 <table>

        <thead>

        <tr><th>表头单元格（table head）有加粗居中的功能</th></tr>

        </thead>

        <tbody>

        <tr>

            <td>单元格内的文字</td><td>单元格内的文字</td>

        </tr>

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

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

        </tbody>

    </table>

table为表格标签；tr为行标签，必须嵌套在<table></table>标签中；td为单元格标签，必须嵌套在<tr></tr>标签中；没有列标签。字母td指表格数据（table data），即数据单元格内容。

以下属性需要写到table标签里(一般用CSS来设置)：

align="center/left/right"(浏览器中表格对齐方式)；
border="1"或""(表格单元是否有边框，“”表示没有边框)；
cellpadding="0"(单元格内文字到边框的距离);
cellspacing="0"（单元格与单元格之间的距离）；
width="300" height="100" (表格的宽度和高度，没有带单位)

表格结构标签：thead标签表示表格的头部区域，其内部一定有tr，一般位于第一行，tbody标签表示表格的主体区域，tfoot标签位于页面最后

这两个标签都必须在table标签里。

合并单元格：

合并单元格方式：

1.跨行合并：rowspan=“合并单元格的个数”；
2.跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

1.跨行：最上侧单元格为目标单元格，写合并代码；
2.跨列：最左侧单元格为目标单元格，写合并代码。

合并单元格的步骤：

先确定是跨行还是跨列合并；
找到目标单元格，写上合并方式=合并单元格的数量，eg.<td colspan="2"></td>;
删除多余的单元格

2. 列表标签

1.无序列表：各列表之间是没有顺序级别之分的，是并列关系；ul中只能放li标签；但可以在li中放其他标签（li相当于一个容器）；

无序列表会带有自己的样式属性，但在实际使用中用CSS来设置。

    <ul>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

    </ul>

2.有序列表：有排列顺序的列表

   <ol>

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ol>

3.自定义列表：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。经常是一个dt对应多个dd

    <dl>

        <dt>名词，定义项目/名字</dt>

        <dd>名词解释1，描述项目/名字</dd>

        <dd>名词解释2</dd>

        <dd>名词解释3</dd>

    </dl>

3.表单标签

使用表单的目的是为了收集信息，使用场景：注册页面

表单由表单域、表单控件（也称为表单元素）和提示信息组成。

表单域是一个包含表单元素的区域，form标签用于定义表单域，它会把范围内的表单元素信息提交给服务器。

写表单元素前要有表单域form

<form action="url地址" method="提交方式:get/post" name="表单名称">

input输入表单元素，<input type="属性值" />

属性值：

text：文本框用户可在里面输入任何文字；
password：密码框用户看不见输入的密码；
radio：单选按钮可以实现多选一，是小圆圈的形式；
checkbox：多选按钮（复选框）可以实现多选，是小方框的形式；
submit：提交按钮，可通过value的值改变提交按钮的文字，点击了提交按钮可以把表单域form里面的表单元素提交给后台服务器。
reset：重置按钮，清除表单中的所有数据，即还原表单元素初始的默认状态，可通过value的值改变重置按钮里的文字；
button:普通按钮，通过value值来写入按钮中的文字，后期搭配js使用；
file:上传文件。
hidden:隐藏组件，但隐藏中的值会被提交，在网页上不显示
week:带弹出框的用来展示年份和周数的日期
disabled：禁用组件，禁用之后组件的值不可提交
size:控件的初始宽度，单位px，但是text和password除外，它们是指字符的数目，后面不加单位

以上属性均是type的属性值type=""。

name是表单元素的名字，要实现单选按钮多选一的效果，需要给个选项一个同样的name；

eg.性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">

多选按钮也需要一个相同的name，即单选按钮和多选按钮都需要设置name。

value:相当于提示信息，规定input元素的值，是为了让后台人员看见，刚打开页面时就默认显示的文字。

checked:当页面打开时，默认选择按钮，用于单选框和复选框的设置。（其属性值=checked）

eg.性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked">

maxlength:规定输入字段中的字符的最大长度,限制用户最大输入量。

label标签：定义标签，用于绑定一个表单元素，点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者

选择对应的表单元素上，用来增加用户体验。

属性1=属性2，即label标签的for属性应当与相关元素的id属性相同。

eg.<label for="sex">男</label>

select下拉表单元素

 <form action="post">

    选择

    <select>

        <option selected="selected">选项1</option> selected表示默认选项

        <option>选项2</option>

        <option>选项3</option>

    </select>

    </form>

textarea:文本域，用于定义多行文本输入的控件，常用于留言板、评论区

表示每行中的字符数，rows表示显示的行数，不过这两个属性不太重要，一般用CSS来实现。

</textarea>