本文最后更新于 276 天前，其中的信息可能已经有所发展或是发生改变。

一.HTML常见标签

1.标题

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
</head>
<body>
    <h1>这是一个标题1</h1>
    <h2>这是一个标题2</h2>
    <h3>这是一个标题3</h3>
    <h4>这是一个标题4</h4>
</body>
</html>

2.段落标签p

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

3.超链接标签a

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

注意url格式为https://

常用属性：

target

1.target=”_self” 内容在当前页面显示。 2.target=”_blank” 内容在新页面显示。 3.target=“three” 内容在对应窗口显示 4.target=”_top” 在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架 5.target=”_parent” 在父窗体中打开链接，在窗口与顶级框架中，等同于_self**

 <div id="main">
        <div id="first">
            <a href="first.html" target="_self">跳转1</a>
        </div>
        <div id="second">
            <a href="second.html" target="_blank">跳转2</a>
        </div>
        <div id="third">
            <a href="third.html" target="_parent">跳转3</a>
        </div>
        <div id="ad-iframe">
            <iframe name="three" width="100%" height="100%" src=" " frameborder="2" seamless></iframe>
            <iframe name="big" width="800px" height="300px"  src="fourth.html" frameborder="2" seamless>
            </iframe>
        </div>
    </div>

链接种类：

文本链接：

最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>

图像链接：

您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

   <img src="./star.webp" width="600"/>


<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

主要属性

1、src 指定图片位置

2、alt 当图片丢失时，显示替代的文本

    <img src="http://upload.hxnews.com/2023/0712/16573.png" alt="图片找不到了，你能帮他们找父母吗">

下载链接：

如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

<a href="document.pdf" download>下载文档</a>

锚点链接：

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

4.换行符br

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
</head>
<body>
    <h1>这是一个标题1</h1>
    <p>this is my first attemp</p>
    <a href="http://www.baidu.com" >点击我访问百度</a>
    <br>
    <br>
    <img src="./star.webp" width="600"/>
    <h2>这是一个标题2</h2>
    <h3>这是一个标题3</h3>
    <h4>这是一个标题4</h4>
</body>
</html>

5.文本格式化

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML “计算机输出” 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

<p>这个<br>段落<br>演示了分行的效果</p>
    <b>加粗文本</b><br><br>
    <i>斜体文本</i><br><br>
    <code>电脑自动输出</code><br><br>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup>

6.头部

HTML head 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML title元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML base 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

HTML link 元素

HTML style 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档

HTML meta 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

HTML script 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

7.表格table

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="hugo" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
    <link rel="stylesheet"  href="./1.css">
</head>
<body>
    <table border="10">
            <tr>
                <th>列标题1</th>
                <th>列标题2</th>
                <th>列标题3</th>
            </tr>
            <tr>
                <td>行1，列1</td>
                <td>行1，列2</td>
                <td>行1，列3</td>
            </tr>
            <tr>
                <td>行2，列1</td>
                <td>行2，列2</td>
                <td>行2，列3</td>
            </tr>


    </table>
</body>
</html>

8.列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

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

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

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

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

9.块级元素div

区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

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

内联元素

内联元素在显示时通常不会以新行开始。

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

<div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

10.布局

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="hugo" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
    <link rel="stylesheet"  href="./1.css">
</head>
<body>
    <div id="container" style="width:100%;height: 100%;">

        <div id="header">
        <h1 style="margin-bottom:0;">Welcome to eagle's lab</h1></div>

        <div id="menu" style="height:100%;width:100px;float:left;">
            <a href="">企业概况</a>
            <br>
            <a href="https://www.runoob.com/html/html-layouts.html">前端课程</a>
            <br>
            <a href="https://www.runoob.com/css/css-tutorial.html">css课程</a>
            <br> 
        </div>

        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里</div>

        <div id="footer" style="clear:both;text-align:center;">
        版权 © runnoob.com</div>

    </div>

</body>
</html>

11.表单和输入

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="hugo" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
    <link rel="stylesheet"  href="./1.css">
</head>
<body>
    <div>
        <form action="http://www.baidu.com">
            Username: <input type="text" name="user"><br>
            Password: <input type="password" name="password"><br>
            备注:<input type="textarea" name="textarea"><br>
            备注:<input type="select" name="textarea">
            <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
            <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
            <button>提交</button>
        </form>         
    </div>
</body>
</html>

12.框架iframe

iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

二、CSS属性

1.与HTML进行关联

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用”style” 属性

    <p style="color: red;">你好，今天吃了吗</p>
    <p style="color: blue;">你好，今天吃了吗</p>

内部样式表 -在HTML文档头部 head区域使用style 元素来包含CSS

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="hugo" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
    <link rel="stylesheet"  href="./1.css">
    <style>
        p {
            color:orange;
        }
    </style>

</head>
<body>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
</body>
</html>

外部引用 – 使用外部 CSS 文件

<!DOCTYPE html>
<html lang=en">
<head>
    <meta charset="UTF-8">
    <meta name="hugo" content="width=device-width, initial-scale=1.0">
    <title>第一个练习</title>
    <link rel="stylesheet" type="text/css" href="1.css"/>
    <style ></style>

</head>
<body>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p style="color: red;">你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
    <p>你好，今天吃了吗</p>
</body>
</html>

一.HTML常见标签

1.标题

2.段落标签p

3.超链接标签a

常用属性：

target

链接种类：

文本链接：

图像链接：

下载链接：

锚点链接：

4.换行符br

5.文本格式化

HTML 文本格式化标签

HTML “计算机输出” 标签

HTML 引文, 引用, 及标签定义

6.头部

HTML head 元素

HTML title元素

HTML base 元素

HTML link 元素

HTML style 元素

HTML meta 元素

HTML script 元素

HTML head 元素

7.表格table

8.列表

无序列表

有序列表

自定义列表

9.块级元素div

区块元素

内联元素

<div> 元素

HTML <span> 元素

HTML 分组标签

10.布局

11.表单和输入

12.框架iframe

二、CSS属性

1.与HTML进行关联

发送评论 编辑评论

推荐文章

发送评论编辑评论