VS Code_第二天学习内容

原创已于 2025-07-02 00:40:22 修改 · 929 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #html #vscode

于 2025-06-27 02:33:04 首次发布

VS Code 同时被 3 个专栏收录

6 篇文章

订阅专栏

代码初学者

6 篇文章

订阅专栏

html

4 篇文章

订阅专栏

18_HTML超链接

a 超链接，可以访问本地网页、其他网页，是行内元素；href 链接

_blank：生成新页面； _self：跳转页面

<a href="https://www.bilibili.com/" target="_self">变哔哩哔哩</a>

1、超链接可以直接打开文件内容

<a href="./斗鱼.jpg">看我的小鱼吧</a>

2、超链接不能打开压缩包，自动触发下载

<a href="./img/压缩文件.zip" download="小鱼">猜猜我是谁~是小鱼</a>

3、超链接可以跳转网页

19_HTML超链接锚点

船：点击即可跳转到指定页面

<p>我的斗鱼宝宝的尾巴</p>

<p>我的斗鱼宝宝</p>

锚点：<a name="fish"></a>

<p>我的斗鱼宝宝的尾巴</p>

锚点：<p id="daily">哥哥的工作日常</p>

锚点：<a name="work"></a>

<p>我的第一周作业</p>

在一般情况下，尽量在p中使用id，而不是单起一个a标签name注。

20_HTM唤起指定应用

21_列表

ol: 有序列表 (Ordered List)
- 内容项: li (list item)

<ol>

</ol>

ul: 无序列表 (Unordered List)
- 内容项: li (list item)

<ul>

<li>在心底深处</li>

<li>紧握在手中</li>

</ul>

dl: 自定义列表 (Definition List)
- 结构:
  - dt: 术语 (Definition Term)
  - dd: 描述 (Definition Description)

<dl>

<dt>饮食</dt> <dd>维持生命的基本需求</dd>

<dt>睡眠</dt> <dd>人体恢复精力的必要过程</dd>

<dt>如厕</dt> <dd>新陈代谢的重要环节</dd>

</dl>

22_列表注意事项

有序列表适用于有明确顺序的内容
无序列表适用于同等优先级的事项，支持嵌套不同类型的列表，最常用
自定义列表支持嵌套不同类型的列表

23_表格

表格结构：table

表头：caption

表头区域：thead 表头单元格：th

主体内容：tbody 表格行：tr 数据单元格：td

页脚区域：tfoot

单元格外边框：border

<table border="2"> <caption>学生信息表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉族</td> <td>团员</td> </tr> </tbody> <tfoot> <tr> <td colspan="4"></td> <td>总计：1人</td> </tr> </tfoot> </table>

24_表格常用属性

单元格宽：width

单元格长：height

单元格缝隙：cellspacing

文字水平对齐方式：align=left、right、center

文字垂直对齐方式：valign=top、bottom、middle

25_表格跨行与跨列

列：column

行：row

跨空间：span

跨列代码：colspan

跨行代码：rowspan

26_常用标签补充

[br] 换行-单标签

[hr] 分割-单标签

[pre] 按原代码样式显示-双标签

27_表单基本结构

表单 form

地址 action

打开页面方式 target——_self/_blank

提交方式 method

输入框 input

按钮 button

<form action="https://www.baidu.com/s" method="get" target="_self">
  <input type="text" name="wd">
  <button type="submit">百度搜索</button>
</form>

<hr>

<form action="https://search.jd.com/search" method="get" target="_blank">
  <input type="text" name="keyword">
  <button type="submit">京东搜索</button>
</form>

28_表单常用控件

value：（默认）值

maxlength：字符串最大长度

<form action="https://search.jd.com/search">
  用户名：<input type="text" name="account" value="zhangsan" maxlength="15"><br>
  密码：<input type="password" name="psd" value="123456" maxlength="8"><br>
  <button>提交</button>
</form>