“前端网页PC端布局之HTML基础”
在前端开发中,HTML(HyperText Markup Language)是最基础的构建网页的标记语言。本资源主要涵盖了HTML的一些核心概念和常用标签,帮助初学者理解和掌握HTML的基本用法。
1. **目录文件夹及根目录**
- **目录文件夹**:用于组织和存储网页相关素材的普通文件夹。
- **根目录**:打开目录文件夹后看到的第一层,是整个项目的起点。
- 在VSCode等编辑器中,可以方便地管理和查看项目目录。
2. **路径**
- **相对路径**:相对于当前文件的路径,如上一级的上一级可以通过“../../”表示。
- **绝对路径**:完整的URL,以"http://"或"https://"开头,用于指向网络上的任何资源。
3. **链接标签 `<a>`**
- **外部链接**:使用`<a href="http://www.qq.com">腾讯</a>`将链接指向外部网站。
- **内部链接**:如`<a href="index.html">首页</a>`,用于链接到同一网站内的其他页面。
- **锚点链接**:通过`<a href="#id名">文本或者图片</a>`实现页面内部的跳转,需配合`id`属性使用。
4. **特殊字符**
HTML提供了一些预定义的字符实体,用于插入特殊字符,例如版权符号 `©` 或非断行空格 ` `。
5. **表格标签 `<table>`**
- **基础**:`<table>`、`<tr>`(行)、`<td>`(单元格)构成基本表格。
- **表头单元格**:`<th>`用于创建表头。
- **表格属性**:如`border`、`width`、`height`等控制表格样式。
- **表格结构标签**:`<thead>`、`<tbody>`、`<tfoot>`分别代表表头、主体和页脚部分。
- **合并单元格**
- **跨行合并**:使用`rowspan`属性,如`rowspan="2"`合并2行。
- **跨列合并**:使用`colspan`属性,如`colspan="3"`合并3列。
6. **列表标签**
- **无序列表 `<ul>`**:使用`<li>`标签创建不带序号的列表项。
- **有序列表 `<ol>`**:使用`<li>`创建带序号的列表项。
- **自定义列表 `<dl>`**:包含`<dt>`(定义术语)和`<dd>`(定义描述)来创建自定义列表。
7. **表单标签 `<form>`**
- **表单域**:`<form>`用于定义一个表单区域,通常包含用户交互的表单控件。
- **表单元素(表单控件)**
- **`<input>`**:创建各种类型的输入字段,如文本框、密码框、复选框等。
- **`<select>`**:创建下拉菜单供用户选择。
- **`<textarea>`**:用于创建多行文本输入的文本域。
掌握这些HTML基础知识,将有助于构建静态网页,并为学习更复杂的前端技术打下坚实基础。在实际应用中,还需要结合CSS进行样式控制,以及JavaScript实现动态交互,从而创建功能丰富的现代网页。