本笔记为无基础的小白在学习前端技术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来控制属性
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
