关于最近学习的HTML的总结-优快云博客

本文链接：https://blog.youkuaiyun.com/cg182235/article/details/114602948

关于最近学习的HTML的总结

1.什么是HTML

HTML是一个超文本标记语言，并不是一门编程语言，用来定义web页面的内容结构。HTML以及 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。

2.HTML文档结构

HTML标签

HTML标签是HTML语言中最基本的单位

HTML元素

HTML(标准通用标记语言下的一个应用) 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

显然，HTML文档是由一个个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.<p> 元素：

<p>当前有点丑：)</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：当前有点丑：)。
2.<body> 元素：

<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。该元素包含了我们能在网页上看到的所有元素
3.<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>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素）。

这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。

除了这三个元素外还有几个我们常用的元素，如:
4.<head>元素

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>

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

<title>页面标题</title>

<title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

3. HTML 文档相关说明

3.1 注释
为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号包括起来

3.2 空元素
在HTML 元素中，没有内容的 HTML 元素被称为空元素，如<br>, <hr>, <input>, <img>, <a>等等。

3.3 元素的属性
元素是可以有相关属性的。HTML的元素属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。

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

HTML元素设置属性的语法为：

<element name=”value”  >

其中element为元素的名称，name是属性的名称，value是属性的值。若已经有一个或多个属性，就与前一个属性之间有一个空格。

3.4 标题（heading）
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>
页面中标题十分重要，因为我们所使用的搜索引擎是使用标题来索引页面的内容，因此我们不能因为要强调某一部分内容就将这一部分设为标题。

3.5 超链接
超链接语法:

<a href="链接地址" target="_blank">链接文字或内容</a>

1.href为我们所提供的的链接地址跳转的地址
2.target为打开方式，target="_blank"表示在新的窗口打开（默认是在当前页面打开即_self）
3.链接文字或内容是我们点击链接时显示的文字，如百度一下等等

3.6 锚点
用来标记页面某个元素的位置，通过锚点我们可以实现页面内的跳转，如很多网站在底部都有回到首页。
先给id属性给某个元素生成该元素的锚，然后用超链接指向该锚点，用户通过触发该超链接就可以实现跳转。

<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>

超链接中的href赋值为#+id，且元素的id值必须是唯一的，及页面中的所有元素的id值不能有相同的。

3.7 图片
我们在页面中插入一个图片需要用到<image>这个元素，如：

<img src="图片路径" alt="MDB Logo" width="200" height="200">

其中src为我们要显示的这个图片的路径，即所在位置
alt为图片显示有问题时显示的文字
width，height即为该图片的大小

3.8 文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。
文件路径有相对路径和绝对路径两种。
绝对路径是指目录下的绝对位置，直接到的目标位置，相对路径就是相对于当前文件的路径。
相对路径的例子：

<img src="picture.jpg">

该图片文件与当前文档在同一目录中

<img src="./images/picture.jpg">

该图片文件在当前目录下的images目录中

<img src="../picture.jpg">

该图片文件在上一级目录中

3.9 表格
表格的元素为<table>,其中代表行的标签为<tr>,代表列的标签为<td>,表头为<th>
如：

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

3.10 列表
列表有两种，分别为无序列表与有序列表，其中无序列表使用<ul>作为标签，默认使用实心圆点作为每一项的标志，若是想用其他标志则可以对元素<ul>的type属性进行赋值，如

  <ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  </ul>

有序列表则使用<ol>作为标签，默认用数字作为每一项的标志，其它的标志可以是大写字母A等，只需对type属性进行赋值。如<ol type="a">
3.11 区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等
3.12 内联元素
内联元素总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
3.13 预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。因为pre标签中的内容将保持格式不变