HTML01.基础

HTML基础

 

什么是HTML？

是用于描述页面结构的语言

结构：有什么东西，该东西表示什么含义

HTML：Hyper Text Markup Language,超文本标记语言

 

HTML元素详解

​

我的猫咪脾气爆：）

​

1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。<p>

2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。</p>

3. 内容（Content）：元素的内容，本例中就是所输入的文本本身(我的猫咪脾气爆：）)。

4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

 

标题

HTML 包括六个级别的标题: <h1>(en-US)-<h6>(en-US)，一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

 

段落（Paragraph)

​

元素是用来指定段落的。通常用于指定常规的文本内容：

​

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

 

图像

空元素

不包含任何内容的元素称为空元素。比如<img>元素：

<img src="images/firefox-icon.png" alt="测试图片">

本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

图像

重温一下<img> 元素：

<img src="images/firefox-icon.png" alt="测试图片">

像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。

2. 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到。

 

列表（List）

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个<ul>元素包围。

2. 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个<ol>元素包围。

列表的每个项目用一个列表项目（List Item）元素<li>包围。

比如，要将下面的段落片段改成一个列表：

<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的技术人员、思考者和建造者，我们致力于……</p>

可以这样更改标记：

<p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>
​
<ul>
  <li>技术人员</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>
​
<p>我们致力于……</p>

 

链接

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 —<a>— a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

1. 选择一些文本。比如 “Mozilla 宣言”。

2. 将文本包含在<a>元素内，就像这样：

   <a>Mozilla 宣言</a>

3. 为此<a>元素添加一个href 属性，就像这样：

   <a href="">Mozilla 宣言</a>

4. 把属性的值设置为所需网址：

   <a href="https://www.mozilla.org/zhCN/about/manifesto/">Mozilla 宣言</a>

    

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。

href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。

 

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

语法格式：

<a href="跳转目标" target=“目标窗口的弹出方式>文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式

 

<h4>外部链接：</h4>
<a href="http://www.baidu.com" target="_blank">百度</a>

<h4>内部链接：</h4>
<a href="demo.html">胡歌</a>

<h4>空链接：</h4>
<a href="#">谢霆锋</a>

<h4>图像链接：</h4>
<a href="http://www.baidu.com" target="_blank"> <img src="timg.jpg"/> </a>