小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

前端(Web网页)无基础个人学习记录Day2，HTML、CSS、JavaScript笔记_定表格的单元格是否具有边框,默认没有。cellspacing: 设置单元格之间的空白,默认2

作者：小小林熬夜学编程 | 2024-02-22 06:34:36

踩

定表格的单元格是否具有边框,默认没有。cellspacing: 设置单元格之间的空白,默认2

本笔记为无基础的小白在学习前端技术HTML、CSS、JavaScript过程中所做的笔记，既是对自己学习过程的一个记录，也希望能够给后面新来学习的朋友们提供参考和帮助。本学习笔记基于MOOC、CSDN、知乎、百度百科、b站up主“黑马程序员”等学习资源，综合总结为自己的无基础起步的学习笔记。

七、HTML表格标签

1.表格标签：表格主要是用于显示、展示数据，因为他可以让数据显示得规整，拥有较高的可读性。尤其是在后台处理数据的时候，以表格的形式展示的数据往往都比较清晰明了容易判断。一个清爽简约的表格能够把繁杂的数据表现得很有条理。


<table>
    <tr>
        <th>表头加粗居中内容</th>
        <td>你需要填入的内容</td>
        ...
    </tr>
    ...
</table>

特点：①.<table></table>标签是用于定义表格的标签

②.<tr></tr>标签是用于定义表格当中的“行”，必须嵌套在<table></table>标签当中

③.<td></td>标签是定义表格当中的“单元格”，必须嵌套在<tr></tr>标签当中。当需要写多个单元格的时候，先在最外层<tr></tr>，然后需要多少个就在里面再添多少个<td></td>标签

④.字母td指的是表格数据（table data），即数据单元格的内容，可以放包括文字、图片等众多内容到单元格当中

⑤.<th></th>标签为表头单元格标签，一般用于表格首列或者首行表头单元格内容会加粗并居中显示，字母th指的是表头部分的缩写（table head），起到标题作用，突出重要性

⑥.表格属性一般通过CSS部分来设置，CSS可以装饰表格的外观形态

属性名称	属性值	说明
align	letf、center、right	规定表格相对周围元素的对齐方式
border	1或者""	规定表格单元是否拥有边框，默认没有
cellpadding	像素值	规定单元边沿与内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

2.表格结构标签：表格结构标签主要用于让表格具有更明晰的语义，使用<thead>和<tbody>可以把表格分割为两个部分，这样在实际开发（代码量大的时候）当中可以更好区分代码作用


<table>
    <thead>
        <tr>
            <th>表头加粗居中内容</th>
        </tr>
    </thead>
    ...
    <tbody>
        <tr>
            <td>你需要填入的内容</td>
        </tr>
    </tbody>
</table>

特点：①.<thead></thead>标签是用于定义表格的头部，内部必须拥有<tr>标签，一般位于第一行

②.<tbody></tbody>标签是用于定义表格的主体，主要用于放置表格主体内容数据

③.无论是<thead><tbody>都还是在<table>标签当中的

3.合并单元格：特殊情况下，可以把多个单元格合并为一个单元格，此处为最简单单元格合并方法


<td rowspan="1"> </td>
<td colspan="1"> </td>  //数字代表合并个数

特点：①.跨行合并：rowspan="合并单元格的个数"，最上侧单元格为目标单元格，写合并代码

②.跨列合并：colspan="合并单元格的个数"，最左侧单元格为目标单元格，写合并代码

③.合并单元格代码写在<td></td>标签的开始标签当中

④.合并完了之后将后续多余单元格删除(删除代码)

八、HTML列表标签

1.（重点）无序列表标签：列表主要是用于布局的，列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。<ul>标签表述HTML页面当中的无序列表，而列表项用<li>标签来定义


<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

特点：①.无序列表的各个列表项之间没有顺序级别之分，他们都是并列的

②.<ul></ul>标签当中只能嵌套<li></li>，其他的标签和文字不行

③.合并单元格代码写在<li></li>标签相当于一个容器可以容纳任何元素

④.无序列表会自带样式属性，但是在实际使用操作当中，我们会使用CSS来设置

2.有序列表标签：<ol>标签表述HTML页面当中的有序列表，而列表项用<li>标签来定义


<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

特点：①.有序列表的各个列表项之间有顺序级别之分，他们是会自动排出序列，在有讲究顺序的场景当中使用有序列表

②.<ol></ol>标签当中只能嵌套<li></li>，其他的标签和文字不行

③.合并单元格代码写在

④.有序列表会自带样式属性，但是在实际使用操作当中，我们会使用CSS来设置

3.（重点）自定义列表标签：<dl>标签表述HTML页面当中的定义描述列表(或定义列表)，该标签会与<dt>(定义项目/名称)和<dd>(描述每一项目/名称)标签来<li></li>标签相当于一个容器可以容纳任何元素一起使用


<dl>
    <dt>名词1</dt>
    <dd>名词1的解释1</dd>
    <dd>名词1的解释2</dd>
    ...
</dl>

特点：①.<dl></dl>里面只能包含<dt>和<dd>，<dt>和<dd>属于并列标签

②.<dt>和<dd>个数没有限制，经常都是一个<dt>对应多个<dd>，<dt>和<dd>标签相当于容器可以容纳任何元素

九、HTML表单标签

1.表单标签：表单标签的目的是为了收集信息，可以让用户填入信息，收集资料

2.表单组成：在HTML当中，一个完整的表单通常由表单域，表单控件(也称为表单元素)和提示信息三个部分所构成

3.表单域：在HTML当中，<form>标签用于定义表单域，以实现用户信息的收集和传递，<form>会把它范围内的表单元素提交给服务器


<form action="URL地址" method="提交方式" name="表单域名称">
    ...//各种表单元素控件
</form>

特点：①.<form></form>标签在初学者而言的阶段不需要表单域提交数据

②.表单域用<form>标签，写表单元素之前，一定有表单域将他们包含

③.常用属性

属性	属性值	说明
action	URL地址	用于指向接受和处理表单数据的服务器程序地址
method	get/post	用于设置表单数据的提交方式
name	名称	用于`设置表单的名称，区分多个表单

4.（重点）<input>表单元素：在表单元素当中，<input>标签用于收集用户信息，在这个标签当中包含一个type属性，根据不同的属性值，输入的字段可以有很多种形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等等)

<input type="属性值" />

特点：①.<input/>标签是特殊的单标签

②.type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值和描述如下:

不同的type属性的展示效果(可以自己复制到<body> </body>里面去看看效果)


<form>
    用户名: <input type="text"><br>
    密  码: <input type="password"><br>
    性  别: 男<input type="radio"> 女<input type="radio"><br>
    爱  好: 玩游戏<input type="checkbox"> 睡觉<input type="checkbox">
</form>

除了type属性之外，<input>标签还有其他很多属性，其常用属性如下:

特点：①.name和value是每个表单元素都有的属性值，主要是给后台人员使用的

②.name表单元素的名字，要求单选按钮和复选框要有相同的value值

加入name和value属性之后，再看看展示效果(可以自己复制到<body> </body>里面去看看效果)


<form>
    用户名: <input type="text" name="username" value="请输入用户名"><br>
    密  码: <input type="password" name="pwd"><br>
    性  别: 男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>
    爱  好: 玩游戏<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby">
</form>

在单选框和复选框当中和加入checked属性来选择默认框，在单选框当中只能由一个checked

maxlength一般针对文本框最大输入字符数

加入checked和maxlength属性之后，再看看展示效果(可以自己复制到<body> </body>里面去看看效果)


<form>
    用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"><br>
    密  码: <input type="password" name="pwd"><br>
    性  别: 男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
    爱  好: 玩游戏<input type="checkbox" name="hobby" checked="checked"> 睡觉<input type="checkbox" name="hobby">
</form>

特点：①.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

②.maxlength是用户可以在表单元素当中输入的最大字符数，一般较少使用

<input>表单元素真的很重要，其他的属性也很重要，建议参考其他学习资料深入学习这一内容......

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


<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心: <label>标签的for属性应当与相关元素的id属性相同

一般与<input>标签搭配使用

6.（重点）<select>表单元素：在HTML当中，如果有多个选项让用户选择，并且想要节约页面空间的时候，我们可以使用<select>标签控件定义下拉的列表


选项主题
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

特点：①.<select>当中至少包含一对<option>才有得选择，多了不限制

②.在<option>当中定义selected="selected"时，当前项即为默认选中项

7.<textarea>表单元素：当用户输入的内容较多的情况下，我们不能再使用文本框表单了，此时我们可以使用<textarea>标签，在表单元素当中，<textarea>标签是用于定义多行文本输入的控件


<form>
    <textarea cols="50" rows="5">
        文本内容
    </textarea>
</form>

特点：①.通过<textarea>标签可以轻松地创建多行文本输入框

②.在col="每行的字符数限制" , rows="显示的行数"，我们在实际开发中一般不选择在这里使用这两个属性，我们会选择统一用CSS来控制属性

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/128914