HTML基础

最新推荐文章于 2026-03-09 22:50:59 发布

原创最新推荐文章于 2026-03-09 22:50:59 发布 · 620 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

前端语言基础专栏收录该内容

4 篇文章

订阅专栏

一、HLTM简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二、HTML元素分类

块级元素

在页面以块的形式展现
出现在新的一行
占全部宽度（如果不做CSS样式调整）

实例: <h1>, <p>, <ul>, <table>

内联元素

通常出现在块级元素内
不会导致文本换行
只占必要的部分宽度

实例: <b>, <td>, <a>, <img>

三、HTML元素实列

1.标题元素<h1>

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

在这里插入图片描述

2.段落元素<p>

<p>这是一个段落 </p>
<p>这是另一个段落</p>

在这里插入图片描述

3.链接元素<a>

<!--点击可跳转到href中的url-->
<a href="https://www.runoob.com/">访问菜鸟教程</a>

元素属性：

href：跳转链接属性

4.头部元素<head>

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta元数据信息。元数据也不显示在页面上，但会被浏览器解析。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

5.图像元素<img>

<!--要在页面上显示图像，你需要使用源属性（src）。源属性的值是图像的 URL 地址。
    alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。-->
<img src="C:\Users\liangxing\myvue\src\assets\logo.png" alt="Big Boat">

元素属性：

alt：要在页面上显示图像，你需要使用源属性（src）。源属性的值是图像的 URL 地址。
src：alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
可以被加载

未被加载

6.表格元素<table>

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

元素属性：

border：如果不定义边框属性，表格将不显示边框。

7.列表元素

无序列表

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

在这里插入图片描述

有序列表

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

在这里插入图片描述

8.区块元素

区块块级元素<div>

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

区块内联元素<span>

HTML <span> 元素是内联元素，可用作文本的容器<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。用来组合文档中的行内元素。

<div>
    <h1>nihao</h1>
</div>

<span>
    <a href="https://www.runoob.com/">访问菜鸟教程</a>
</span>

<span>nihao</span>

在这里插入图片描述

区块的块级元素<div>会另起一行，而区块的内联元素<span>则不会，除非内联区块元素内嵌了块级元素

9.表单元素

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

<form>
.
input 元素
.
</form>

输入标签<input>

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）：文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段：密码字段通过标签<input type=“password”> 来定，密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）：<input type=“radio”> 标签定义了表单单选框选项
复选框（Checkboxes）：<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
提交按钮(Submit Button)：<input type=“submit”> 定义了提交按钮,当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
     First name: <input type="text" name="firstname"><br>
     Last name: <input type="text" name="lastname"><br>
     Password: <input type="password" name="pwd"><br>
     <input type="radio" name="sex" value="male">Male
     <input type="radio" name="sex" value="female">Female<br>
     <input type="checkbox" name="vehicle" value="Bike">I have a bike
     <input type="checkbox" name="vehicle" value="Car">I have a car<br>
     Username: <input type="text" name="user"><br>
     <input type="submit" value="Submit">
 </form>

在这里插入图片描述

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php"的页面。该页面将显示出输入的结果。

10.媒体元素

视频元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        controls:控制条
        autoplay:自动播放
    -->
    <video src="视频路径" autoplay controls></video>
</body>
</html>

音频元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio src="音频路径" controls autoplay></audio>
</body>
</html>

11.语义元素

在这里插入图片描述

头部元素

<header>元素描述了文档的头部区域,
<header>元素主要用于定义内容的介绍展示区域,
在页面中你可以使用多个<header> 元素.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

</body>
</html>

在这里插入图片描述

底部元素

<footer> 元素描述了文档的底部区域.
<footer> 元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个 <footer>元素

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

</body>
</html>

在这里插入图片描述

导航元素

<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>