Foreword写在前面的话：
大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。
PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^
课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili
第十六课：综合案例复习
a--超链接标签，属性里面加上target blank，实现跳转第二个页面的效果
小知识点：vscode复制的文本如果超出视窗如何设置vscode自动换行？
左下角设置搜索editor-word wrap 打开on自适应窗口即可（默认都是off永不换行）打开后多窗口使用视觉效果会好很多。
如何在网页内实现段落分行整理？
用多个p标签插入不同内容！空格没用的
建立两个网页间的相互关联，超链接没确定地址或者其他网页没做好时可以href先写#
整体排版思路：从上到下，先整体在局部，分析--实现
第十七课：列表表格表单学习
列表：内容整齐排列
表格：内容+格子---表格标签
表单（如：登录页面）：用户输入内容的地方
注意：这三个标签都是嵌套关系，与之前所学不同。对其格式非常重要
列表：布局内容排列整齐的区域。
列表分类：无序列表，有序列表，定义列表
定义列表：一个标题下有多个小分类（排列整齐）
无序列表使用频率最高
无序列表：布局排列整齐的，不规定顺序的
标签：ul嵌套li---ul是无序列表，li是列表条目
<ul>
<li>...</li>
<li>...</li>
<ul>
...中填的是列表条目）
一个ul里面可以包含多个li
操作：ul标签出来后，按回车再写子集li！！
之后学了css可以对小点进行处理。
列表条目展示的特点：独占一行。
注意：ul标签里只能包含li标签！但是li里面可以包裹任何内容。
有序列表：需要规定顺序的区域。如第一步第二步等
标签：ol嵌套li，ol是有序列表，li是列表条目
<ol>
<li>....</li>
<li>....</li>
<ol>
有序号。
同样的，ol里面只能包含li，li里面可以包裹任何内容。
有序列表用于排列工作文档中的步骤。
定义列表：一个标题对应多个内容
用于网页底部-帮助中心
标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表标题，tt是定义列表的描述或者详情。
<dl>
<dt>title</dt>
<dd>content</dd>
<dl>
有缩进的效果，学了css可以对缩进的效果进行修改。
特点：标题定格，内容前面有空格。
注意：dl里面只能包含dt dd，dt和dd可以包含任何内容
第十八课：表格的基本使用
网页中的表格与excel类似，用于展示数据
标签：table嵌套tr，tr嵌套td/th
table：表格
tr：行
th：表头单元格 默认效果加粗居中
td：内容单元格
网页中表格默认没有边框线，需要使用border属性添加（在table标签内，值为1表示1像素的边框）。
小技巧：Fn+右方向键 快速移动到代码行尾，避免一点一点跨过标签太麻烦。
小技巧2：vscode中，只要光标在该行，直接Ctrl+c and Ctrl+v，就会默认复制该行代码到下一行，节约时间。且光标所在位置也会继承到新复制的那一行的位置，做小修改非常方便。如果是多行复制的话要每一行都ctrl+c and ctrl+v，否则复制的代码会移到光标的上一行。
特点：表格可以被内容撑开。
table-tr-th/td
每使用一对th/td都要新开一对tr
了解表格结构标签：内容分区，结构清晰语义清晰
表格结构标签：
thead 表格头部
tbody 表格主体
tfoot 表格底部（汇总信息区域）
技巧：用光标选中多行，按tab键可以整体缩进（逆操作：shift+tab）
加了结构标签后，人在网页上是看不出效果的，只是让结构更清晰。
主体代码：
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>98</td>
<td>99</td>
<td>297</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>优秀优秀</td>
<td>优秀优秀</td>
<td>优秀优秀</td>
<td>优秀优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
实际上看到的效果无变化。实战可以省略的
合并单元格：
多个单元格合并成一个，合并同类信息。
跨行合并（竖着合并）or 跨列合并（横着合并）
步骤：
1.明确合并的目标
2.保留最左或者最上的单元格，添加数字（值表示需要合并单元格的数量）
跨行合并：保留最上的单元格，添加属性rowspan
跨列合并：保留最左的单元格，添加属性colspan
3.删除其他的单元格
注意：合并单元格的属性加在th/td标签中
只需要在最上或者最左单元格加属性即可，不用的就注释或者删掉。
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>98</td>
<td rowspan="2">100</td>
<td>297</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td>100</td>
<!-- <td>100</td> -->
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="4">优秀优秀</td>
<!-- <td>优秀优秀</td>
<td>优秀优秀</td>
<td>优秀优秀</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
注意：代码是有结构标签的，合并不可以跨结构标签合并，比如表头不可以和主体单元格合并。
第二十课：表单：收集用户信息
使用场景：登录界面，注册界面，搜索区域
input标签：其type属性值不同，功能就不同
input为单标签
<input type="...">
语法：输入的提示语+<input type="...">
type属性值：
text输入文本
password密码框
radio单选框
checkbox多选
file上传文件
特点：文本框输入什么就显示什么，且输入的是单行文本，不会换行
vscode小技巧：属性的引号删掉，重打引号，就会提示该属性下有什么值可以选择。
密码框特点：输入什么都是以”点“的形式显示。
单选框还要加其他代码才可以真正实现单选功能。
多选框的另一应用场景：checkbox是否同意协议
input标签占位文本（提示作用）
对输入框添加提示信息。
input 标签的placeholder属性
文本框和密码框都可以用
<input type="..." placeholder="suggestive info">
浅色的提示文字，输入时占位文字消失，删除输入的所有信息占位文本重新出现。
单选框radio细节实现：
常用属性：
name控件名称（同组单选） 如果控件名称相同，只能选其一
checked默认选中
name：
当用户群体类似，用checked默认选中属性更贴心，提升用户体验。
上传文件-默认情况下只能上传一个文件
添加multiple属性可实现文件多选。
上传文件：<input type="file" multiple>
多选框checkbox
默认选中：checked属性
应用：默认同意协议注册账号、兴趣爱好默认选择（编辑个人主页）
最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！
扫一扫
3202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
