HTML总结

最新推荐文章于 2024-07-25 11:26:35 发布

qq_52649321

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量93

点赞数 1

分类专栏： HTML 学习文章标签： html html5

本文链接：https://blog.csdn.net/qq_52649321/article/details/114800671

版权

学习同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

HTML总结

1.HTML简介

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>
```
1.<!DOCTYPE html> 声明为 HTML5 文档
2.<html> 元素是 HTML 页面的根元素
3.<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
4.<title> 元素描述了文档的标题
5.<body> 元素包含了可见的页面内容
6.<h1>元素定义一个大标题
7.<p>元素定义一个段落

2.HTML元素

HTML 文档由 HTML 元素定义。

HTML 元素以开始标签起始。
HTML 元素以结束标签终止。
元素的内容是开始标签与结束标签之间的内容。
某些 HTML 元素具有空内容（empty content）。
空元素在开始标签中进行关闭（以开始标签的结束而结束）。
大多数 HTML 元素可拥有属性。

3.HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。如下所示：

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

在这里插入图片描述

4.HTML文本格式化

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>页面标题</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

5.超链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。如下所示：

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

在这里插入图片描述

href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点

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

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

h2 id="C4">第四章 论零号病人的重要性</h2>
<a href="#C4">跳到第四章</a>

在这里插入图片描述

注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值
超链接中的地址需要有#符号

6.HTML 图片及文件路径img

图片

在 HTML 中，图片由<img> 标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图片，你需要使用源属性（src）。src 指 “source”。源属性的值是图片的 URL 地址。

在页面中插入一张图片如下：

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

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

例子	解释
`<img src="picture.jpg">`	该图片文件与当前文档在同一目录中
`<img src="./images/picture.jpg">`	该图片文件在当前目录下的`images`目录中
`<img src="../picture.jpg">`	该图片文件在上一级目录中

7.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <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>

在这里插入图片描述

8.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表

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

无序列表使用 <ul>标签

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

在这里插入图片描述

有序列表

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

列表项使用数字来标记。

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

在这里插入图片描述

9.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<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="20"><br>
    <!-- 单选按钮, 注意 checked 属性 -->
    性别：<br>
    <input type="radio" name="gender" value="male" checked> 男<br>
    <input type="radio" name="gender" value="female" checked> 女<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>

10.其它

HTML 的元素可以以称为区块或内联的方式进行显示。

区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

qq_52649321

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
HTML总结

HTML总结1.HTML简介2.HTML元素3.HTML 标题4.HTML文本格式化在这里插入图片描述5.超链接6.HTML 图片及文件路径img7.HTML 表格8.HTML 列表9.HTML 表单在这里插入图片描述10.其它1.HTML简介HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个
复制链接

扫一扫