HTML学习总结

最新推荐文章于 2022-11-01 16:21:33 发布

蔡姬努力变大佬

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_46580518/article/details/117158352

版权

一、HTML简介

1、定义

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

网页就是超文本语言的最好的应用案例。

2、特点

（1）简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
（2）可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
（3）平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
（4）通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

二、HTML开发工具

1、VS Code（代码编写）

（1）下载途径：https://code.visualstudio.com/（官网）
（2）建议插件：Auto Close Tag、Auto Rename Tag、Code Runner、live sever等。

2、Chrome浏览器/Firefox浏览器（用于展示网页）

（1）下载途径：
https://www.google.cn/intl/zh-CN/chrome/
https://www.mozilla.org/en-US/firefox/new/

三、学习HTML

1、HTML的基本结构

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
</body>
</html>

（1）标签（可嵌套）

上面的被"<"、">“括起来的内容包括”<"、">"，整个部分叫做标签。加上"<"、">"的目的是方便将标签与普通文本进行区分。标签又分为单闭合标签和自闭合标签。
①单闭合标签：指的是要同时有开始标签和结束标签存在的标签。例如，上述代码中的<html></html>、<head></head>、<title></title> 以及 <body></body>等标签。
②自闭合标签：自闭合标签的可以将开始标签和结束标签合为一体，用一个标签表示，如，将图像标签写为<img/>等。

开始标签：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

空元素：像某些元素只有自闭合标签，即一个标签，我们可以将其称为空元素。通常用来在此元素所在位置插入/嵌入一些东西。

（2）内容

指的是某个标签中间的文本本身。

（3）元素

标签与内容合起来叫做元素，HTML就是由很多条元素组成的。

元素可以拥有自己的属性，它包含了元素的额外信息，浏览器不予显示。

一个属性必须包含以下内容：
1.一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2.属性名称，后面跟着一个 = 号。
3.一个属性值，由一对引号 “” 引起来。

例如：

<!-- 带属性的段落输入框 -->
<p title="title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

HTML 元素根据其表现形式可以分为 2 种：块级元素、行内元素。
①块级元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。
常见的块级元素有：
1.div：最典型的块元素。
2.p：表示段落。
3.h1-h6：表示1-6级标题（默认加粗）。
4.br：表示换行。
5.ol：有序列表使用的标签。
6.ul：无序列表使用的标签。

②内联元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
常见的内联元素有：
1.a：插入超链接。
2.span：常用行级。
3.strong：加粗，强调。
4.img：插入图片。
5.input ：添加输入框。
6.select：添加下拉列表。

（4）注释

需要注释的内容用包裹起来。

（5）主要标签含义

<!DOCTYPE html>: 声明文档类型。
2.<html></html>: 包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3.<head></head>:相当于一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
5.<body></body>: 包含了能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

2、HTML的标题

标题作为网页的缩影十分重要。

（1）格式

标题内容利用一对标签<h>和</h>包裹。

（2）大小

标题由h1~h6共六级，从大到小。

一般来说，主标题都采用一级标题。如希望将正文中的某些内容进行放大，可以采用文本格式或 CSS ，最好不要使用标题格式对它进行放大。
文本格式如：
1.<center>：内容居中。
2.<strong>：强调内容，格式加粗。
3.<small>：字体缩小。
4.<i>：内容倾斜。
5.<del>：内容加上删除线。
6.<pre>：文本将会按照代码中你预先设定的格式展现。
等等

3、超链接

（1）语法

<a href="要转去的地址URL" target="_blank">跳转按键说明</a>

target属性为_blank，表示在新的页面打开超链接；默认属性为_self，表示在当前页面打开超链接。
跳转按键说明指的是显示给用户的超链接名称。

(2)锚点

①定义

也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

②用法

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

③理解
由于锚点用于长页面页面内的跳转，所以用唯一id做某一部分的标记，利用#id实现定位跳转，实际上并没有用到URL。

4、插入图片

（1）语法

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

（2）说明

1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.width：图片宽度，height：图片高度，可为指定，但不建议（可能导致图片变形）

5、文件路径

文件路径可分为绝对路径和相对路径。
①绝对路径

绝对路径又可以分为本地绝对路径和网络绝对路径两种。本地绝对路径一般指从盘符开始，到文件名称结束；网络绝对路径指从网站的域名开始，到文件名结束，在使用时需要加上协议。绝对路径之所以称为绝对，是指当所有页面引用同一个文件时，使用的路径都是一样的。
例如：
C:/Users/Desktop/C语言中文网/url/url.html
https://mdbootstrap.com/img/logo/mdb192x192.jpg

②相对路径

相对路径与绝对路径类似，不同的是在描述目录或文件路径时，所采用的参考点不同。绝对路径以域名或盘符为参考点，到文件名称结束；相对路径以当前文件位置为参考点，到文件名称结束。所以对于不同的网页引用同一文件时路径可能不相同。
例如：
<img src="picture.jpg">：该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">：该图片文件在当前目录下的images目录中
<img src="../picture.jpg">：该图片文件在上一级目录中

6、HTML表格

（1）语法

使用标签<table></table>,嵌入<tr>表示行, 再嵌入<td>表示行中的单元或者 <th>表示表头的单元（加粗显示）。
例如：

<table border="1">
    <tr>
        <th>序号</th>
        <th>姓名</th>
    <tr>
        <td>1</td>
        <td>Tom</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Kangkang</td>
    </tr>
</table>

结果：
在这里插入图片描述

7、HTML列表

列表可分为有序列表和无序列表。
①无序列表：使用<ul>标签，默认标志为实心圆点，circle表示空心圆，square表示实心方块。
例：

<ul type="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

在这里插入图片描述

②无序列表：使用

标签，默认标志为有序数字，A表示用大写字母作为标志，a表示以小写字母作为标志，i表示以罗马数字作为标志。
例：

<ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

在这里插入图片描述

8、HTML表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 设置。

（1）文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

（2）密码字段

密码字段通过标签<input type="password"> 来定义，输入密码时不会明文显示。

（3）单选按钮

<input type="radio"> 标签定义了表单单选框选项。

（4）多选框

<input type="checkbox"> 定义了复选框.，用户需要从若干给定的选择中选取一个或若干选项。

（5）下拉列表

在 <option value="X">xxxxx</option>之前需要加上<select name="xxxx">，下拉选项可选其一。

（6）日期选择器

<input type="date">定义了日期选择框。

（7）文件选择器

<input type="date"> 定义了文件选择器，可以上传文件。

（8）提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

等等。
例：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

在这里插入图片描述

9、特殊字符

在 HTML 中，某些字符是预留的。
例如，在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体有：

需要注意的是：html虽然不区分大小写，但实体字符对大小写敏感。