HTML学习总结

最新推荐文章于 2024-11-09 17:11:29 发布

机智的橙子

最新推荐文章于 2024-11-09 17:11:29 发布

阅读量120

点赞数

分类专栏： Web 文章标签： html

本文链接：https://blog.csdn.net/qq_45659777/article/details/114603461

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML（超文本标记语言）

HTML定义网页内容的含义和结构。是一种定义内容结构的标记语言。

HTML元素

HTML使用“标记”来注明文本，图片和其他内容。

1.<html></html>:<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

2.<head></head>:<head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

3.<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码。

4.<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。

5.<title></title>:设置页面标题。

6.<body></body>:<body>元素。包含页面所看到的所有内容。

注释

将HTML中的内容置为注释时用特殊的记号将其包括起来。

空元素

某些元素只有开始标签，如<br>（换行）<hr>（水平分割线）<input>（输入框）<img>（图片）<a>等，称之为空元素。

元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。

一个属性值，由一对引号 “” 引起来。

例如：

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

标题

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

文本格式

<mark></mark>:突出显示。

<del></del>:视为删除。

<s></s>:视为不再准确。

<ins></ins>:视为文档补充。

<u></u>:显示带下划线。

<small></small>:视为精美文字。

<strong></strong>:此行以粗体显示。

<em></em>:此行呈现为斜体文本。

超链接

语法：

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

...
```
注意：
1. 元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
2. 超链接中的地址需要有#符号

图片及文件路径

图片：

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

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

说明：

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径：

./，当前目录。

…/，上一级目录。

直接文件名，与当前文档在统一目录中。

表格

<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>

</table>

说明：

<tr>表示行，<td>行中单元，<th>表头单元。

列表

无序列表：

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

有序列表：

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

其他

区块元素

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

内联元素

内联元素连接显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。

预设格式

特殊格式使用pre标签。

特殊字符

在<pre>中展示源代码用特殊字符，特殊字符可参考(https://www.runoob.com/tags/ref-entities.html)。