编程技术

Document

HTML基础用法学习

HTML最全总结！！！

目录

前言

​
HTML 是 Hyper Text Markup Language 的简写，表示超文本标记语言，同时 HTML 也是我们学习前端开发的基础。随着 web 前端技术的飞速发展，HTML 和 CSS 也成为了编程者的必备技能。

HTML 标签非常注重语义化，很多标签都是通俗易懂的，大大降低了我们学习的难度。这套 HTML 学习总结报告是我在经过html学习与实践之后进行的总结，如若内容有误或不够详细还请谅解。

话不多说，开始下文吧​​！在这里插入图片描述

​

一、HTML 到底是什么？

HTML只能静态地展示网页信息，不能动态进行数据的添加，没有计算能力。

HTML 是一种用来开发网页的计算机语言，它通过标签（标记式指令）将文本、音视频、图片、表格、按钮、输入框等内容显示出来。也就是说，HTML 是用来给网页内容进行排版和布局的。

二、HTML结构

1.HTML本质

超文本

也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。

超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。

标记语言

HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：

  • <img>标签表示一张图片
  • <a> 标签表示一个链接
  • <table> 标签表示一个表格；
  • <input> 标签表示一个输入框；
  • <p> 标签表示一段文本；
  • <strong> 标签表示文本加粗效果；
  • <div> 标签表示块级布局。

2.HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML演示</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    <a href="http://c.biancheng.net/" target="_blank">这是一个链接</a>
    <ul>
        <li>HTML教程</li>
        <li>CSS教程</li>
        <li>JavaScript教程</li>
    </ul>

    <input type="text" placeholder="请输入内容" />
</body>
</html>

语法说明：

  • <!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
  • <html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在<html> 和 </html> 标签之间定义；
  • <head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
  • <meta charset=“UTF-8”>：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
  • <title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
  • <body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
  • <h1> </h1>：该标签用来定义标题；
  • <p> </p>：该标签用来定义段落；
  • <a> </a>：该标签用来定义链接；
  • <ul></ul>：该标签用来定义列表；
  • <li> </li>：该标签用来定义列表项；
  • <input type=“text” />：用来定义一个输入框。

三、HTML语法

1.语法格式

这里是引用

2.HTML属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr=“value”

attr 表示属性名，value 表示属性值。一个标签可以没有属性，也可以有一个或者多个属性。

专有属性

HTML 中的 <img> 标签就有 src 和 alt 两个专用属性，<a> 标签也有 href 和 target 两个专用属性。

通用属性

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：

  • 如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
  • 如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值。

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等。

四、HTML使用

1.HTML标题

HTML 中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页中的标题（与 word 中的标题类似），合理使用标题可以使网页的层次结构更加清晰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标题标签演示</title>
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    <h6>h6 标题</h6>
</body>
</html>

在这里插入图片描述

2.文本格式化

在这里插入图片描述
需注意<strong>与<b>的区别和<em>与<i>的区别!!!

3.超链接标签

超链接（Hyperlink）通常简称为链接（Link），是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等。链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。
<a> 标签的语法格式如下：

<a href=“url” target=“opentype”>链接文本</a>

其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间。

href属性

href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：

  • href 可以指向一个网页（.html、.php、.jsp、.asp 等格式），这也是最常见的形式
  • href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件
  • href 可以指向压缩文件（.zip、.rar 等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式
  • href 甚至还可以指向本机的文件，只是很少这样使用

href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://c.biancheng.net/view/1719.html；相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/ComputerFoundation.zip。

target属性

target 是可选属性，用来指明新页面的打开方式。默认情况下，新页面在当前浏览器窗口中打开，我们可以使用 target 属性来改变新页面的打开方式。常见的打开方式如下表所示：
在这里插入图片描述

<a> 标签的默认样式

浏览器会为 <a> 标签设置一些默认样式。

1) 鼠标样式

当鼠标移入链接区域时，会变成一只小手；当鼠标移出链接区域时，会变回箭头形状。

2) 颜色及下划线

超链接被点击之前为蓝色，超链接被点击之后变成紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。

浏览器根据历史记录来判断超链接是否被点击过，如果 href 属性和历史记录中的某条 URL 重合，那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
    <p>
        <a href="http://c.biancheng.net/html/" target="_blank">HTML教程（新窗口打开）</a><br>
        <a href="http://c.biancheng.net/css3/">CSS教程（当前窗口打开）</a><br>
        <a href="http://c.biancheng.net/js/">JS教程（被点击过）</a>
    </p>
</body>
</html>

在这里插入图片描述

4.标签（表格）

以下是一段表格代码：

<table border="1">
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>淘宝</td>
     <td>https://ai.taobao.com//</td>
     <td>购物</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

在这里插入图片描述

  • <table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
  • <tr> 是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
  • <td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
  • <th> 是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

默认情况下，表格是没有边框的。但是我们可以使用

标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

5.HTML列表标签

HTML 为我们提供了三种不同形式的列表：

  • 有序列表，使用 <ol> + <li> 标签
  • 无序列表，使用 <ul> + <li> 标签
  • 定义列表，使用 <dl> + <dt> + <dd> 标签

在这里插入图片描述

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

在这里插入图片描述
有序列表需要使用 <ol> 和 <li> 标签：

  • <ol> 是 order list 的简称，表示有序列表，它可以为列表的每一项进行编号，默认从数字 1 开始。
  • <li> 是 list item 的简称，表示列表的每一项，<ol> 中有多少个 <li> 就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。

注意，<ol> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签。

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

在这里插入图片描述
无序列表需要使用 <ul> 和 <li> 标签：

  • <ul> 是 unordered list 的简称，表示无序列表。
  • <ul> 和 <ol> 中的 <li> 一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，<ul> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。

6.HTML表单

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：

表单中的其它标签

对属性的说明：

  • action 属性用来指明将表单提交到哪个页面；
  • method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
    GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
    POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

表单属性

在这里插入图片描述

表单控件

在这里插入图片描述
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>

        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>

        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未知</option>
        </select>
        <br>

        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打游戏
        <br>

        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>

        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

7.多媒体嵌入

图片嵌入

HTML 使用 标签插入图片，img 是 image 的简称。 是自闭和标签，只包含属性，没有结束标签。 标签的语法格式如下：

<img src=“url” alt=“text”>

对属性的说明：

  • src 是必选属性，它是 source 的简称，用来指明图片的地址或者路径。src 支持多种图片格式，比如 jpg、png、gif 等。src 可以使用相对路径，也可以使用绝对路径。
  • alt 是可选属性，用来定义图片的文字描述信息。当由于某些原因（例如图片路径错误、网络连接失败）导致图片无法加载时，就会显示 alt 属性中的信息。
    示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML插入图片</title>
</head>
<body>
    <!-- 使用绝对路径插入网络图片 -->
    <img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="Logo"> <br>
    <!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹，该文件夹下有一张图片 html5.png -->
    <img src="../images/html5.png" alt=" Logo">
</body>
</html>

在这里插入图片描述

音频嵌入

音频：<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效
示例：

<!DOCTYPE HTML>
<html>
<body>
 
<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>
 
</body>
</html>

在这里插入图片描述

视频嵌入

<!DOCTYPE html>
<html>
<body>
 
<video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="/i/movie.ogg" type="video/ogg" />
  <source src="/i/movie.mp4" type="video/mp4" />
  <source src="/i/movie.webm" type="video/webm" />
  <object data="/i/movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="/i/movie.swf" />
  </object>
</video>
 
</body>
</html>

8.页面布局

HTML5 布局标签如下：
在这里插入图片描述

各个标签适用的板块如下图所示：

在这里插入图片描述

总结

HTML是一种用于创建网页的标准标记语言，也是构成网页的主要技术之一。学习了HTML后，我对网页的结构和布局有了更深入的了解，同时也能更加灵活地控制网页中的内容和样式。以下是我学习HTML知识后的总结：

  1. 知道了HTML的基本结构和元素：学习HTML首先要掌握HTML的基本结构和元素，例如文本、链接、图像等。同时了解HTML是如何使用标签来定义元素和属性来控制元素的属性。

  2. 学会了HTML的页面结构标准：HTML的页面结构标准包括头部、主体、脚部等结构，每个部分都有其特定的标签和属性。掌握这些结构非常重要，这样在创建网页的时候可以更好的控制页面的结构和布局。

  3. 掌握了标签的分类和属性的使用：HTML中的标签可以分为块级标签和内联标签，块级标签会独占一行，而内联标签则可以与其他标签共享一行。同时还需要掌握如何使用标签的属性，例如颜色、尺寸等属性。

  4. 了解了表单的使用：学习HTML还需要掌握表单的使用，包括如何添加表单元素，为表单添加验证等。表单是用户与网站进行交互的重要手段，熟练掌握表单的使用能够使网站的交互性更强。

以上是我学习HTML知识后的总结，HTML是非常基础和重要的技术，它是构建网页和网络应用程序的基础。只有掌握好 HTML 技术，才能更好的实现网页的创作和用户体验的提升。