前端基础知识
HTML基础
HTML介绍
HTML学习的计算通常涉及以下几个方面：
1. **理论学习：** 了解HTML的基本概念、语法规则和标签用法。学习HTML文档的基本结构，了解各种常见标签的作用和用法。
2. **实践编码：** 编写HTML代码是学习的重要部分。通过实际的编码练习，掌握如何创建不同类型的元素，构建网页结构，使用标签和属性等。
3. **项目实践：** 尝试通过小型项目来应用所学的HTML知识。可以从简单的个人网页开始，逐渐扩展到包含多个页面和交互元素的项目。
4. **阅读文档：** HTML有详细的官方文档和教程，可以通过阅读文档来深入理解更高级的特性和技巧。
5. **参与社区：** 加入HTML学习的社区，与其他学习者交流经验，提问问题，分享学习资源。这可以帮助加深对HTML的理解并获取实际经验。
6. **在线教育资源：** 利用在线教育平台，如Codecademy、MDN Web Docs等，参与HTML相关课程和教程，获取系统化的学习体验。
7. **版本更新：** 了解HTML的不同版本，特别是当前主流版本（如HTML5）引入的新元素和特性。保持对行业趋势的关注。
8. **练习Latex集成：** 将学到的Latex语法嵌入到HTML中，实现在网页中显示数学公式。这样的练习有助于整合不同技能并应用它们到实际场景。
综合这些方面的学习，可以建立起对HTML的全面理解和熟练应用。记得不仅要学习语法规则，还要注重实际项目中的应用，这样能更好地将理论知识转化为实际能力。
HTML知识点总结
HTML知识总结包括以下方面：
1. **基本概念：**
- HTML是Hypertext Markup Language的缩写，用于创建和设计网页。
- HTML使用标签来描述网页中的元素和结构。
2. **文档结构：**
- 基本HTML文档结构包括`<!DOCTYPE html>`声明、`<html>`元素、`<head>`头部和`<body>`主体。
- 文档中可以包含标题、段落、列表、链接、图像等元素。
3. **常见标签：**
- `<h1>` 到 `<h6>`定义标题，`<p>`定义段落，`<a>`定义超链接，`<img>`插入图像，`<ul>`和`<ol>`定义列表，`<li>`定义列表项，`<div>`定义文档中的区块，`<span>`定义内联元素等。
4. **HTML属性：**
- 标签可以包含属性，如`<a href="https://www.example.com">`中的`href`属性。
5. **注释：**
- 使用`<!-- 注释内容 -->`添加注释，不会在浏览器中显示。
6. **表单：**
- HTML支持创建表单，包括`<input>`、`<select>`、`<textarea>`等元素。
7. **样式：**
- 可以通过内联样式（`style`属性）、内部样式表和外部样式表为网页添加样式。
8. **HTML版本：**
- 不同的HTML版本，如HTML4、XHTML和HTML5。HTML5是当前主流版本，引入了新的元素和特性，支持多媒体和交互功能。
9. **学习计划：**
- 理论学习、实践编码、项目实践、阅读文档、社区参与、在线教育资源、版本更新、Latex集成等方面。
通过掌握这些知识，可以建立起对HTML的深刻理解，并能够应用于实际项目中。在学习的过程中，实践和项目经验同样重要，能够加深对HTML的掌握程度。
HTML标题标签
独占一行，用于标题特定的加粗。其中数字越大标题越大
------<h1>一级</h1>
------<h2>二级</h2>
------<h3>三级</h3>
------<h4>四级</h4>
------<h5>五级</h5>
------<h6>六级</h6>HTML段落标签与换行标签
独占一行的效果
-------<p>我是一个段落标签</p>
换行效果
-------</br>HTML文本格式化标签
加粗标签：
<strong></strong>或<b><b/> 推荐:<strong></strong>
倾斜效果：
<em></em>或<i><i/> 推荐:<em>
删除线:
<del></del>或<s></s> 推荐:<del>
下划线:
<ins></ins>或<u></u> 推荐:<ins>HTML中div与span标签
div:是一个盒子，自身独占一行的效果，上面提到的<p></p>都是一行效果
<div>是一个盒子</div>
------------------------------------------------------------
span:跨度，跨距
<span>内容一</span>
<span>内容二</span>
<span>内容三</span>
三个内容全部显示在一行上的效果HTML图像标签
<img src='图片路径' alt='图片打开失败显示的内容' title='鼠标悬空在图片的效果'>| 属性 属性值: 说明: | ||
|---|---|---|
| src 图片路径 必须属性 | ||
| alt 文本替换文本， 图像不能示的文字 | ||
| title 文本提示文本, 鼠标悬空放在图片上显示 | ||
| width 像素 设置图像宽度(单位px) | ||
| height 像素 设置图像高度(单位px) | ||
| border 像素 设置图像的边框粗细(单位px) |
HTML链接标签
<a href="跳转路径" target="目标窗口打开方式">文本或者图像</a>| 属性 | 属性值: | 说明: |
|---|---|---|
| href | url | 指定链接地址 |
| name | section_name | 指定描点名称 |
| target | _self当前口 _blank新窗口 |
HTML注释标签
<!-- 内容 -->HTML表格标签
主要作用：显示数据，让数据显示的非常的规整，可读性好。
<table>
<tr> <-------表示行
<td> <-------表示列
<---------单元格内容文字
</td>
</tr>
</table>1.<table>是用于定义表格的标签
2.<tr> 表示表格中的行，嵌套在<table>中
3.<td>表示表格中的列，嵌套在<tr>中
表头单元格标签
<table>
<tr> <----------控制高度
<th> <-----------------表头标签
<--------表头内容
</th>
</tr>
<tr>
<td> <---------- 控制宽度
单元格内容文字
</td>
</tr>
</table>
<th>：自动居中对齐，字体加粗，黑体表格属性:
| 属性名； 属性值: 描述: | ||
|---|---|---|
| width 像素或者百分比 规定表格的宽度 | ||
| align left,center,right 规定表格相对周围元素的位置 | ||
| border 1或者... 表格是否显示边框 | ||
| cellpadding 像素值 单元格边沿与内容之间的间距 | ||
| cellspacing 像素值 单元格之间的间距 |
表格结构标签
表格标签中分别用:<thead>标签中的头部区域，<tbody>是表格的主体区域能够更好的分清表结构
<table>
<thead> <---------头部
<tr>
<th>
<------- 表头内容
</th>
</tr>
</thead>
<tbody> <--------------- 身体
<tr>
<td>
<---------------------表身体
</td>
</tr>
</tbody>
</table>合并单元格
跨行合并:rowspan="合并单元格个数"
跨列合并:colspan="合并单元格的个数"
<table>
<thead>
<tr>
<th colspan="1"> <---------------列合并
<-------------表头
</th>
<th>
<-------------- 表头一
</th>
<th>
<--------------表头二
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="1"> <--------行合并
表身体
</td>
</tr>
<tr>
<td>
一
</td>
</tr>
</tbody>
</table>HTML列表标签
HTML中常用的列表标签有三种：<ul>（无序列表）、<ol>（有序列表）和<dl>（定义列表）。
无序列表
无序列表(重点) ul只能放Li不能放别的内容
- 用于创建无序列表，其中的列表项没有特定的顺序。
- 列表项使用
<li>标签表示。 - 示例：
-
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
有序列表
- 用于创建有序列表，其中的列表项按照数字或字母的顺序排列。
- 列表项同样使用
<li>标签表示。 - 示例：
-
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
<ol type="1" start=1>
<li>...</li>
<li>...</li>
</ol> type---------规定列表序号，值为1，A，a，I，i，分别为阿拉伯数字，大写英文，小写英文，大写罗马数字，小写罗马数字
start--------规定列表的起始值
自定义列表
<dl>
<dt>名词</dt>
<dd>名字解释</dd>
</dl>HTML表单标签
为什么需要表单：使用表单的形式，收集用户信息
表单的组成:表单域，表单控件，提示信息三大部分组成
在html中<form>用于定义表单域,以实现用户信息的收集与传递
会把它范围的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素组件
</form>action: url 用于指定接受并处理表单数据的服务器程序的url地址
method: get/post 用于设置表单身的数据提交方式，其取值为get或者post
name 名称 用于表单的名称 ，以区分同一个页面中的多个表单域
表单元素
Input输入单标签
<form action="url地址" method="提交方式" name="表单域名称">
<input type="text">
</form> | TYPE属性值 描述 | |
|---|---|
| botton 定义可点击的按钮(多数情况下用于启动js脚本) | |
| checkbox 定义复选框 | |
| file 定义输入字段和浏览器按钮，提供文件上传 | |
| hidden 定义隐藏字段 | |
| image 定义图片形式提交的按钮 | |
| password 定义密码字段 | |
| radio 定于单选按钮 | |
| reset 定义重置按钮 | |
| submit 定义提交按钮 | |
| text |
除了type属性之外的别属性:
| 属性值 描述 | ||
|---|---|---|
| name 由用户自定义 定义input元素的名称 | ||
| value 由用户自定义 规定 Input元素的值 | ||
| checked 规定input首次加载时被首次选择 | ||
| maxlength 正整数 规定输入字段的字符最大的个数 |
label标签
`<label>` 标签是HTML中用于创建标签的元素，通常与表单元素结合使用，为用户提供对表单控件的说明或标签。`<label>` 标签的作用是增强表单的可访问性和用户体验。
以下是 `<label>` 标签的详细介绍：
- **用法：**
- `<label>` 标签通常包裹着表单元素，并通过 `for` 属性与相关联的表单控件建立关联。关联的方式是使用 `for` 属性值与相应表单控件的 `id` 属性值相同。
- 如果 `<label>` 标签内部包含的文字内容足够描述与其关联的表单控件，那么 `for` 属性可以省略，此时 `<label>` 内部的文字将自动与最近的表单控件关联。
- 示例：
<label for="username">Username:</label>
<input type="text" id="username" name="username">
- **可访问性：**
- `<label>` 标签的使用有助于提高表单的可访问性。屏幕阅读器等辅助技术可以读取 `<label>` 的内容，并帮助用户理解与表单控件相关联的信息。
- 关联 `<label>` 和表单控件还使用户能够点击 `<label>` 来触发关联控件的焦点或选择。
- **样式和布局：**
- `<label>` 标签可以通过样式表（CSS）进行样式调整，以满足设计和布局的需求。
- 通过 `display` 属性等样式设置，可以改变 `<label>` 在页面中的布局方式。
- **内联标签：**
- `<label>` 标签可以内联使用，即放在文字内容旁边，也可以包裹文字内容。这取决于设计的需要。
示例：
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
总的来说，`<label>` 标签是创建更具语义性和可访问性的表单的重要组成部分。
案例一
<form action="url地址" method="提交方式" name="表单域名称">
性别：<input type="radio" id="sex" name="sex">
<label for="sex">男</label>
<input type="radio" name="sex" id="s">
<label for="s">女</label>
</form>
label中 for 与input中的id属性值相等select标签
`<select>` 是HTML中的表单元素，用于创建下拉列表框，允许用户从预定义的选项中选择一个或多个值。下拉列表框通常用于收集用户输入或选择选项。
以下是 `<select>` 表单元素的详细介绍：
- **基本结构：**
- `<select>` 元素包含一个或多个 `<option>` 元素，每个 `<option>` 元素代表下拉列表中的一个选项。
- 示例：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- **`<option>` 元素：**
- `<option>` 元素用于定义下拉列表中的每个选项。
- 可以设置 `value` 属性指定在提交表单时传递给服务器的值。
- 示例：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- **多选列表：**
- 通过在 `<select>` 元素上设置 `multiple` 属性，可以创建允许用户选择多个选项的多选列表。
- 示例：
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- **禁用选项：**
- 通过在 `<option>` 元素上设置 `disabled` 属性，可以禁用某个选项，使其不可选择。
- 示例：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" disabled>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- **选中默认值：**
- 通过在 `<option>` 元素上设置 `selected` 属性，可以指定下拉列表的默认选中项。
- 示例：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
- **组合选项：**
- 可以使用 `<optgroup>` 元素将相关选项分组显示在下拉列表中。
- 示例：
<select name="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
`<select>` 元素是创建用户友好的表单元素之一，通过合理使用 `<option>` 元素的属性，可以实现各种表单需求。
textarea元素标签
`<textarea>` 元素是HTML中的表单元素，用于创建多行文本输入框，允许用户输入多行文本。通常情况下，`<textarea>` 用于接收用户的长文本、评论或其他需要多行输入的信息。
以下是 `<textarea>` 元素的详细介绍：
- **基本结构：**
- `<textarea>` 元素没有闭合标签，而是使用起始标签和结束标签之间包含文本内容的方式来定义多行文本输入框。
- 示例：
<textarea rows="4" cols="50" name="message" placeholder="Enter your message"></textarea>
- **`rows` 和 `cols` 属性：**
- 可以使用 `rows` 和 `cols` 属性分别设置文本框的行数和列数。
- `rows`：定义文本框的行数，表示可显示的文本行数。
- `cols`：定义文本框的列数，表示每行可显示的字符数。
- 示例：
<textarea rows="4" cols="50" name="message" placeholder="Enter your message"></textarea>
- **`name` 属性：**
- 用于指定文本框的名称，该名称将在提交表单时与输入的文本一起发送到服务器。
- 示例：
<textarea rows="4" cols="50" name="message" placeholder="Enter your message"></textarea>
- **占位符（Placeholder）：**
- 可以通过 `placeholder` 属性为文本框添加占位符，提供对用户输入的提示。
- 示例：
<textarea rows="4" cols="50" name="message" placeholder="Enter your message"></textarea>
- **默认值：**
- 可以在 `<textarea>` 标签之间包含默认的文本内容，这将成为用户看到的初始文本。
- 示例：
<textarea rows="4" cols="50" name="message" placeholder="Enter your message">Default text</textarea>
`<textarea>` 元素是创建用户友好的多行文本输入框的重要组成部分，适用于需要用户输入较多文本的场景。
扫一扫
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
