本文是作者allubiba-H作为通信工程学生在华清远见学习前端的记录，主要介绍了HTML的基本概念、文件命名规则以及一系列常用标签，包括标题、段落、链接、图像、列表、表格等，并探讨了HTML属性和表单的初步知识。文章适合前端初学者阅读。
📝前端学习笔记
大家好，我是allubiba-H，一名大三的学生，专业是通信工程一个偏向于硬件的专业，因为较喜欢互联网行业进入了华清远见这个家庭👨👩👦👦，然后想记录一下我在华清远见的学习过程。由于本人刚学前端水平有限，可能避免不了一些错误，希望大家多多支持🤗。
文章目录
🔝 前端核心技术之一 HTML
现在广大应用的是HTML5（下一代的HTML）。
♟基本了解HTML
HTML(超文本标记语言 Hyper Text Markup Language)，是一种用来制作超文本文档的简单标记语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
用HTML编写的超文本文档称为HTML文档。
HTML 文档也被称为网页
简单的HTML文档有以下标签组成:
<!DOCTYPE html> <!-- HTML5的标记 -->
<html>
<head>
<meta charset="utf-8">
<title>这里写网站标签头部显示的文字</title>
</head>
<body>
一些内容....
</body>
</html>
HTML中的每一个标签，大小不区分。结果都是一样的。（也有可能未来的HTML(X) 会区分大小写，所以推荐小写）.
HTML标签主要分两大类：一是单独出现标签比如<meta charset="utf-8">一样，它是没有结束标签的。在HTML中单独出现的标签不多，我们后面会详细讲的。二是成对出现的标签比如<html> ... </html>它是由两个标签成对出现的。HTML中很常见的，往后会讲。
✅文件命名规则
*.htm或*.html- 不能有空格
- 不能有特殊符号，可以是"_",英文字母和数字
- 首页默认命名为
index.html
🔠HTML 常用的标签
🔖标题
HTML 标题是通过 <h1> ~ <h6>等标签定义的。
<h1> 定义最大的标题。<h6>定义最小的标题。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
📟段落
HTML 段落是通过 <p>标签定义的。
<p>HQYJ</p>
<p>你好，我是一个段落</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
⛓链接
HTML 链接是通过 <a>标签定义的。
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
<a herf="#">我是一个超链接</a>
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
| 属性 | 描述 |
|---|---|
| target | 定义被链接的文档在何处显示 |
| name | 您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了 |
📷图像
HTML 图像是通过 <img> 标签进行定义的。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
<img src="xxx.jpg" width="520" alt="这是图片">
| 属性 | 描述 |
|---|---|
| src | 可以是网络地址也可以是本地地址(绝对路径或相对路径均可) |
| alt | 为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 |
额外知识：
- 相对路径：
- 所谓相对路径，就是相对于自己的目标文件位置
- 如果要使用的文件和当前文件在同一目录下，可以直接用文件名称
- 如果使用文件和当前文件不在同一目录下，先使用
..回到使用文件的目录再使用文件名称即可 - 如果使用文件的所在目录和当前文件在同一目录下，使用文件名称
/然后直接用目标文件名称即可
- 绝对路径:
- 绝对路径是指文件在硬盘上真正存在的路径。在网页编程时，很少会使用绝对路径，在自己的计算机上 浏览可能会一切正常，一旦在服务器上浏览就不能正常浏览了，所以需要上传到服务器上并用服务器上的路径才可以正常浏览到图片的。
想深入了解相对路径和绝对路径⬅点击这里
👩🦰 body
<body>元素定义了HTML文档的主体。
也是一个成对出现的元素，开始由<body>结束 </body>。
<body>
<p>这是一个段落</p>
</body>
🏆html
<html> 元素定义了整个HTML文档。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
</html>
♋br标签
<br/>是一个换行标签，它属于单标签。
<p>
you are my sun shine🌞,<br/>
my only sun shine🌞.<br/>
<p>
🧵hr 标签
<hr/>是水平线标签，也属于是单标签
<h1>我是标题1!</h1>
<hr/>
<h2>我是标题2!</h2>
📊列表标签
HTML 支持有序、无序和定义列表
- 无序列表
- 有序列表
- 定义列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
网页上是这样显示的:
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
<ol>
<li>Learn</li>
<li>Learn</li>
<li>Study</li>
<li>dd</li>
</ol>
网页上显示图：
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
📈table(表格)标签
表格由
<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。❗上述的三个元素必须要有、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。
<table width="500px" cellspacing="10" border="1px" bordercolor="red" cellpadding="20">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>Jane</td>
<td>18</td>
<td>女</td>
</tr>
<tr height="100px">
<td>Jane</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td colspan="3" align="right">总计:2人</td>
</tr>
</table>
表格的一些常见属性
- table标签
| 属性 | 解释 |
|---|---|
| width | 指定表格或某一个表格单元格的宽度。单位可以是%或者像素 |
| height | 指定表格或某一个表格单元格的高度。单位可以是%或者像素 |
| align | 指定表格或某一个单元格里的内容（文本、图片等）的对齐方式（参数：#left左对齐,#center居中,#right右对齐） |
| border | 表格边线粗细 |
| bordercolor | 指定边框的颜色，设置边框颜色的前提是边框的宽度不能为0 |
| cellspacing | 指定表格内部各个单元格之间的宽度 |
| cellpadding | 指定表格内文字与边框间距 |
| bgcolor | 设置表格背景颜色 |
| background | 设置表格的背景图像 |
- tr标签
| 属性 | 解释 |
|---|---|
| height | 指定行的高度 |
| bordercolor | 为单独的行设置其外框颜色 |
| bgcolor | 为行设置单独的背景颜色 |
| background | 为行设置单独的背景图片 |
| align | 行文字的水平对齐方式(参数上面介绍一样) |
| width | 指定单元格的高度 |
| height | 指定单元格的宽度 |
| colspan | 指定单元格水平跨度,单元格跨越几列 |
| rowspan | 指定单元格垂直方向上跨行 |
| valign | 行文字的垂直对齐方式（参数：top(顶端对齐)，middle(居中对齐)，bottom(底端对齐)，baseline(相对于基线对齐)） |
- td标签
| 属性 | 解释 |
|---|---|
| align | 指定某一个单元格里的内容（文本、图片等）水平对齐方式的取值可以是left、center或right |
| bgcolor | 指定单元格背景颜色 |
| background | 指定单元格的背景图像 |
| colspan | 指所要合并单元格的列数，横向合并 |
| rowspan | 指所要合并单元格的行数，纵向合并 |
🧱一些不常用的标签
<center> .... </center> <!-- 居中标签-->
<strong> ... </strong> <!-- 变粗标签-->
<em> ... </em> <!-- 斜体标签 (有强调作用)-->
<sup> ... </sup> <!-- 上角标-->
<sub> ... </sub> <!-- 下角标-->
🎨HTML 属性
属性为HTML元素提供附加信息。
- HTML标签是可以有属性的。属性提供了有关HTML元素的更多信息
- 属性总是以名称/值对的形式出现，比如：name=“value”
常见的HTML标签属性：
<body background="xxx/xx.jpg" text="页面非超链接文字颜色(可以有HEX值或者RGB值当然也可以使用颜色名称)" bgcolor="背景颜色">
<hr width="宽度(###px) 默认为屏幕宽度一致" size="高度，默认为1" color="水平线颜色" align="（center,left,right）水平线对其方式"/>
<a herf="链接的目标" target="!!往后会详细讲请关注后面的文章!!"></a>
💬HTML 表单
HTML 表单用于搜集不同类型的用户输入
📶from 标签
HTML 表单用于收集用户输入。客户端提交数据到服务器。比如登录和注册页面。
<form>元素定义 HTML 表单:
<form>
.
一些表单元素
.
</from>
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
📝input标签
<input> 元素是最重要的表单元素
<input> 元素有很多形态，根据不同的 type 属性。
❗❗❗要注意的是所有输入控件都要设置 属性 name, 服务器要用这个属性来区分不同的值
| type(类型) | 描述 |
|---|---|
| text | 定义常规文本输入 |
| password | 定义密码字段 |
| submit | 定义提交表单数据至表单处理程序的按钮 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| button | 定义按钮 |
| number | 用于应该包含数字值的输入字段 |
| file | 用于文件上传 |
| reset | 重置表单内容 |
| hidden | 定义隐藏域 |
🪀select 标签
<select>元素定义下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
后续会详细讲解每一个标签的属性和用法！！
喜欢的话多多支持😀
2307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
