学习笔记——HTML

最新推荐文章于 2025-09-05 14:01:23 发布

nanshenjiang

最新推荐文章于 2025-09-05 14:01:23 发布

阅读量364

点赞数 1

分类专栏：学习笔记文章标签： html

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍HTML的基本概念与常用标签，包括文档结构、文本格式化、列表、链接、图像及表单等内容，帮助初学者快速掌握HTML核心知识。

学习Spring Boot难免要接触thymeleaf，而使用thymeleaf的语法则一定要有html的知识，之前我半懂半不懂的使用thymeleaf，弄到对学习的前端程序代码不明不白，所以我们要对html基础知识有个大概了解。

我学习html+css是在慕课网上的，慕课有一个html+css基础入门课程十分适合新手，它是直接敲代码，所以对代码认识更为清晰，大家也可以进去学习。而这次我就在该慕课教程中总结一下html知识点，以便我们在学习thymeleaf时更加轻松。

（1）HTML，CSS，JavaScript

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

（2）html文件结构

html文件的结构：一个HTML文件是有自己固定的结构的。

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

（3）head标签

<head>

<!--在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中-->
    <title>...</title>

<!--描述html文档元数据，比如定义关键词用于搜索引擎搜索，定义web页面描述，定义页面作者，定义每30秒刷一次页面>
    <meta>
     
<!--链接到外部样式文件（css,js等文件）-->
    <link>

<!--定义 HTML 文档的样式信息。在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档-->
    <style>...</style>

<!--用于定义客户端脚本，比如 JavaScript-->
    <script>...</script>

</head>

（4）部分标签汇总（主要是body内的标签）

<body>内容</body>：body标签定义文档的主体，页面要显示中所有内容放在body标签内。
<p>段落文本</p>：定义段落的标签，<p>元素会自动在其前后创建一些空白。
<hx>标题文本</hx>（x可取1，2，3，4，5，6）：使用<hx>标签来制作文章的标题。标题标签一共有6个，h1、h2、h3、h4、h5、h6。
<strong>需要强调的文本</strong>：加粗字体
<em>需要强调的文本</em>：使用斜体
<span>文本</span>：标签是没有语义的，它的作用就是为了设置单独的样式用的，即可使用css修改文本模样
<q>引用文本</q>：用于引用别人的话，实际上用于添加双引号
<blockquote>引用文本</blockquote>：用于引用长文本，实现效果为居中缩进
<br />或<br>：回车
  ：添加空格，记住不要遗漏“；”
<hr />或<hr>：添加横线，区分上下文
<address>联系地址信息</address>：添加地址信息，也可以定义一个电子邮件地址、签名或者文档的作者身份。实现效果为斜体
<code>代码语言</code>：添加一小段代码
<pre>语言代码段</pre>：添加一大段代码，但是回车需要输入<br>签，空格需要输入

（5）列表标签

语法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例：

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：

语法：
```
<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>
```
举例：

下面是一个热点课程下载排行榜：
```
<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>
```
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示：
<div>…</div>：确定逻辑部分。常用于定义 HTML 文档中的一个分隔区块或者一个区域部分（用于组合块级元素），以便通过 CSS 来对这些元素进行格式化（常与css一起使用）。
<div id="版块名称">…</div>：使用<div>划分出一个个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称
创建表格元素：table、tbody、tr、th、td

（1）<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

（2）<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

（3）<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

（4）<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

（5）<th>…</th>：表格的头部的一个单元格，表格表头。

（6）表格中列的个数，取决于一行中数据单元格的个数。

例子：
```
<table summary="">
  <tr>
    <th>班级</th>
    <th>学生数</th>
    <th>平均成绩</th>
  </tr>
  <tr>
    <td>一班</td>
    <td>30</td>
    <td>89</td>
  </tr>
  <tr>
    <td>二班</td>
    <td>35</td>
    <td>85</td>
  </tr>
  <tr>
    <td>三班</td>
    <td>32</td>
    <td>80</td>
  </tr>
</table>
```
结果图：

添加表格样式：

<style type="text/css">
   table tr td,th{border:1px solid #000;}
</style>

结果窗口显示出结果样式：

<!--添加摘要-->
<table summary="表格简介文本">
    <!--添加标题-->
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
</table>

（6）链接标签

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>：定义超链接，用于从一个页面链接到另一个页面，其中href 属性指定链接的目标，title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。
<a href="目标网址" target="_blank">链接显示的文本</a>：链接的网页默认是在当前浏览器窗口中打开，而如果需要在新的浏览器窗口中打开，则使用 target="_blank"
<a>标签还有一个作用是可以链接email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

下面是一个完整的实例:

在浏览器中显示的链接：发送

点击“发送”链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">：插入图片

（1）src：标识图像的位置；

（2）alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

（3）title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

（4）图像可以是GIF，PNG，JPEG格式的图像文件。

（7）表单标签

<form method="传送方式" action="服务器文件"> HTML 表单</form>：

（1）<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

（2）action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

（3）method ：数据传送的方式（get/post）。

（4）所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
```
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
```
（1）type：

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

（2）name：为文本框命名，以备后台程序ASP 、PHP使用。

（3）value：为文本输入框设置默认值。(一般起到提示作用)

举例：
```
<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
```
在浏览器中显示的结果：
```
<textarea rows="行数" cols="列数">文本</textarea>：文本域
```
（1）<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

（2）cols ：多行输入域的列数。

（3）rows ：多行输入域的行数。

（4）在<textarea></textarea>标签之间可以输入默认值。

举例：
```
<form  method="post" action="save.php">

        <label>联系我们</label>

        <textarea cols="50" rows="10" >在这里输入内容...</textarea>

</form>
```
在浏览器中显示结果：
```
<input type="radio/checkbox" value="值"  name="名称" checked="checked"/>：单选框和复选框
```
（1）type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

（2）value：提交数据到服务器的值（后台程序PHP使用）

（3）name：为控件命名，以备后台程序 ASP、PHP 使用

（4）checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

注意：代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果：
<option value ="提交值" selected="selected">：下拉列表框

如下代码：

在浏览器中显示的结果：
<select multiple="multiple">：复选框

如下代码：

在浏览器中显示的结果：
<input type="submit" value="提交">：提交按钮

举例：

在浏览器中显示的结果：
<input type="reset" value="重置">：重置按钮

举例：

在浏览器中显示的结果：
```
<label for="控件id名称">：
```
它为 input 元素定义标注。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

（8）部分css知识

（1）id选择器和类（class）选择器的区别：

相同点：可以应用于任何元素
不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：

<p>
  三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问 
  题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问 
  题。
</p>

而下面代码是错误的：

 <p>
    三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问 
    题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问 
    题。
</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>
  到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...
</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>
    到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...
</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

补充：

（1）value属性：

value 属性为 input 元素规定值。

对于不同类型的 input 元素，value 属性的用法也不同：

对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
对于 "text", "password", "hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL。

注释：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注释：value 属性不适用于 <input type="file">。

（2）class属性：

class 属性定义了元素的类名。

class 属性通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。

其中：在 HTML 4.01 中, class 属性不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。

（3）href属性和src属性：

href属性是使用在<a>标签里面，用于指定超链接目标的 URL。

src属性是使用在<img>标签里面，它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

（4）name属性：

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

（5）<form>标签内的action：

必需的 action 属性规定当提交表单时，向何处发送表单数据。

语法：<form action="value">

属性值：

值	描述
URL	向何处发送表单数据。可能的值：绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）相对 URL - 指向站点内的文件（比如 src="example.htm"）

（6）button，input和a标签作为按钮时区别：

button、input、a标签都可以加上一定的样式之后成为外观上没有太大差别的按钮，那么，这三个标签都适合在什么场景下作为按钮使用呢？