HTML学习总结_html1500总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_48936833/article/details/114577834

HTML简要总结

**
**

何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

HTML文档

需安装开发软件 code 及其相关的插件（code下载）。推荐安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。
整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
2.<html> </html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3.<head> </head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4.<title> </title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
5.<body> </body>: 元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

HTML标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>

在页面中，标题非常重要：
1.搜索引擎用标题来索引页面的内容
2.用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

超链接 a

超链接语法

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

说明：
href为要跳转去的地址URL；target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。
锚点用id属性生成且元素的id值是唯一的

HTML图片及文件路径

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

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

其中src为图片文件的路径；alt属性当获取图片出现问题时显示的文字（占位符）。
文件路径分为相对路径和绝对路径，上述所示为绝对路径；相对路径用.表示当前目录，. .表示上一级目录。

HTML表格

表格中使用<table>标签即可。
其中<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）。

HTML列表

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

HTML表单

使用<form>标签。

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">