前端17号学习(html完结)
一、路径
1.目录文件夹和跟目录
- 实际工作中需要创建一个文件夹来管理他们。
- 目录文件夹,就是普通文件夹,里面存放页面相关素材,如html文件、图片等。
- 根目录,打开目录文件夹的第一层就是根目录。
2.VScode中打开目录文件夹
- 文件->打开文件夹。
- 后期方便管理。
3.路径
- 页面中图片很多,通常存放在一个Images文件夹里,这时需要采用“路径”的方式来指定图像文件的位置。
- 路径分为:
- 相对路径:图片相对于HTML页面的位置
- 绝对路径:是指目录下的绝对位置
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif" /> | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif" /> |
上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif" / > |
二、超链接标签
- 在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
- 超链接的语法格式
- 链接的分类
(1)外部链接,例如<a href="http://www.baidu.com"> 百度 </a>;
(2) 内部链接,网站内部页面之间的相互链接,直接链接内部页面名称即可;
(3)空链接,如果当时没有确定的链接目标时,<a href="#">首页</a>;
(4)下载链接,如果href里面地址是一个文件或者压缩包,会下载这个文件;
(5)网页元素的链接,在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加链接;
(6)锚点链接,点我们点击链接,可以快速定位到页面中的某个位置;
-在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第二集</a>;
-找到目标位置标签,里面添加一个Id属性=刚才的名字,如<h3 id="two">第二集介绍</h3>;
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性 | 作用 |
href | 用于指定连接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定连接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开 |
三、注释标签和特殊字符
1.注释
- 如果需要在HTM文档中添加一些便于阅读和理解但不需要显示在页面中的注释文字,就需要使用注释标签。
- HTML中的注释以"<!--"开头,以"-->"结束。
<!--注释语句--> 快捷键:ctrl + / |
2.特殊字符
- 在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们可以使用下面的字符来替代。
-
特殊字符 描述 字符的代码 空格符 < 小于号 < > 大于号 > & 和号 & ¥ 人民币 ¥ © 版权 © ® 注册商标 ® ° 摄氏度 ° ± 正负号 ± ✖ 乘号 × ➗ 除号 ÷ ² 平方 ² ³ 立方 ³
四、表格标签
1.表格的主要作用
- 主要用于展示数据。
2.表格的基本语法
1 2 3 4 5 6 7 | < table > < tr > < td >单元格内的文字</ td > ... </ tr > ... </ table > |
- <table></table>是用用于定义表格的标签。
- <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。
- <td></td>用于定义表格中的单元格,必须嵌套在<>tr</tr>标签中。
- 字母td指表格数据,即数据单元格的内容。
3.表头单元格标签
- 一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
- <th>标签表示HTNL表格的表头部分
-
1234567
<
table
>
<
tr
>
<
th
>姓名</
th
>
...
</
tr
>
...
</
table
>
4.表格属性
- 实际开发中不常用,后面通过CSS来设置。
- 记住英文单词,后面CSS会使用。
- 直观感受表格的外观形态。
属性名 | 属性值 | 描述 |
align | left、center、right | 国定表格相对周围元素的对齐方式。 |
border | 1或者“ ” | 规定表格单元是否拥有边框,默认为“ ”,表示没有边框。 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
五、表格结构标签
- 更好地表示表格的语义,将表格分割为表格头部和表格主体两大部分。
- 分别用<thead>标签表示表示表格头部区域,<tbody>标签表示表格的主体区域,更好的分清表格结构。
六、合并单元格
- 只会最简单的合并单元格即可。
- 合并单元格方式
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan=“合并单元格的个数”
- 目标单元格
- 跨行:最上侧单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
- 合并单元格的步骤(三部曲)
- 先确定是跨行还是跨列合并。
- 找到目标单元格,写上合并方式=合并单元格数量。比如<td colspan="2"></td>。
- 删除多余的单元格。
七、列表标签
- 列表是用来布局的。
- 分为三大类:无序列表、有序列表、自定义列表。
1.无序列表(重要)
- <ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,二列表项使用<li>标签定义。
- 基本语法格式:
123456
<
ul
>
<
li
>列表项1</
li
>
<
li
>列表项2</
li
>
<
li
>列表项3</
li
>
...
</
ul
>
2.有序列表
- <ol>标签用于定义有序列表。
- 实际使用中,我们会使用CSS来设置。
3.自定义列表
- 常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
- <dl>标签用于定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
-
12345
<
dl
>
<
dt
>名词1</
dt
>
<
dd
>名词1解释</
dd
>
<
dd
>名词2解释</
dd
>
</
dl
>
八、表单标签
- 为什么需要表单:为了收集用户信息
- 表单的组成:由表单域、表单控件(也称表单元素)和提示信息3个部分组成。
1.表单域
- 表单域是一个包含表单元素的区域。
- 在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
- <from>会把它范围内的表单元素信息提交给服务器。
- 暂时不要表单域提交数据,只需要协商form标签即可。
1 2 3 | < form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </ from > |
- 常用属性:
-
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址。 method get/post 用于设置表单数据的提交方式,其取值为get或post。
name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域。
2.表单控件(表单元素)
- 在表单域中可以定义各种表单元素,这些表单元素就是运行用户在表单中输入或者选择的内容控件。
2.1.input输入表单元素
- <input>标签中,包含一个type属性。
- <input />标签为单标签。
- type属性设置不同的属性值用爱指定不同的控件类型。
- type属性的属性值及其描述:
-
属性值 描述 button 定义可点击按钮(多数情况下,用于通过JavaScrip启动脚本)。 checkbox 定义复选框。 file 定义输入字段和“浏览”按钮,供文件上传。 hidden 定义隐藏的输入字段。 image 定义图像形式的提交按钮。 password 定义密码字段,该字段中的字符被隐码。 radio 定义单选按钮。 reset 定义重置按钮,重置按钮会清楚表单中的所有数据。 submit 定义提交按钮,提交按钮会把表单数据发送到服务器。 text 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。
-
4.除type属性外,<input>标签还有很多其他属性。
-
属性 属性值 描述 name 由用户自定义 定义inpout元素的名称。 value 由用户自定义 规定input元素的值。 checked checked 规定此input元素首次加载时应当被选中。 maxlength 正整数 规定输入字段中的字符的最大长度。
5.<label>标签
- <label>标签为input元素定义标注(标签)。
- <label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)跳转到或者选择对用的表单元素上,用来增加用户体验。
-
12
<
label
for="sex">男</
label
>
<
input
type="radio" name="sex" id="sex" />核心:<
label
>标签中的for属性应当与相关元素的id属性相同。
2.2.select下拉表单元素
- 用<select>标签定义下拉列表。
- 在<option>中 定义selected="selected"时,当前项即为默认选中项。
-
123456
<
select
>
<
option
>选项1</
option
>
<
option
>选项2</
option
>
<
option
>选项3</
option
>
...
</
select
>
2.3.textarea文本域元素
- 当用户输入内容较多的情况,使用<textarea>标签。
- 常用于留言板、评论。
- cols、rows在实际开发中不会使用,都是使用CSS来改变大小。
-
123
<
textarea
roes="3" cols="20">
文本内容
</
textarea
><
em
id="__mceDel" style="background-color: rgba(255, 255, 255, 1); font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px"> </
em
>
九、查阅文档
- 百度
- W3C
- MDN
十、HTML完结撒花!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 易语言 —— 开山篇