HTML学习笔记（2）

Author Avatar
gaotf-xj 5月 24, 2018
  • 在其它设备中阅读本文章

Html介绍

Html、CSS、JS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
  2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

Html基本结构

html文件的结构：一个HTML文件是有自己固定的结构的。

<html>
    <head>...</head>
    <body>...</body>
</html>

代码讲解：

  1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
  2. <head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
  3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

初识Html标签

  1. 标签由英文尖括号<和>括起来，如<html>就是一个标签。

  2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

    如：

    （1） <p></p>

    （2） <div></div>

    （3） <span></span>

  3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div> 里嵌套<p> ，那么</p> 必须放在</div> 的前面。

  4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

什么是语义化

语义化，让你的网页更好的被搜索引擎理解

语义化：明白每个标签的用途（在什么情况下使用此标签合理）

比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。

语义化好处：

  1. 更容易被搜索引擎收录。
  2. 更容易让屏幕阅读器读出网页内容。

HTML标签

<head> 标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>标签

在<title> 和</title> 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

举例：

<head>
    <title>hello world</title>
</head>

<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来。

<body> 标签

<body> 标签，网页上显示的内容放在这里

<p> 标签

<p> 标签，把文章的段落放在这里

语法：

<p>段落文本</p>

注意：

<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。

<hx> 标签

<hx>，把文章的标题放在里面

语法：

<hx>标题文本</hx> (x为1-6)。

标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。 并且依据重要性递减。<h1>是最高的等级。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<div> 标签

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 标签是没有语义的。可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 标签

使用<span>标签为文字设置单独样式，可用作文本的容器。

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<q> 标签

使用<q>标签对短文本引用

语法：

<q>引用文本</q>

注意：

要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

<blockquote> 标签

<blockquote> 标签对长文本引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

语法:

<blockquote>引用文本</blockquote>

注意：

要引用的文本不用加双引号，浏览器会对blockquote标签自动添加双引号。

<br> 标签

使用<br> 标签分行显示文本

在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br /> 。

语法：

xhtml1.0写法(推荐)：<br />

html4.01写法：<br>

举例：

<h2>《咏桂》</h2>
<p>
暗淡轻黄体性柔，<br />
情疏迹远只香留。<br />
何须浅碧深红色，<br />
自是花中第一流。
</p>

空格：

在html代码中输入空格是不起作用的

语法：

&nbsp;

<hr> 标签

<hr> 标签，添加水平横线

语法：

html4.01版本 ：<hr>

xhtml1.0版本(推荐)：<hr />

注意：

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

<address> 标签

<address> 标签，为网页加入地址信息（比如电子邮件地址）、签名或者文档的作者身份。在浏览器上显示的样式为斜体

语法：

<address>联系地址信息</address>

举例：

<address>地址：XXX省XXX市XXX街道XXX号</address>

<address>
本文的作者：<a href="mailto:gaotf@gaotf.tk">lilian</a>
</address>

<code> 标签

使用<code> 标签，加入一行代码

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代码时使用<pre> 标签。

语法：

<code>代码语言</code>

<pre> 标签

使用<pre> 标签，加入大段代码

语法：

<pre>语言代码段</pre>

<ul>标签

<ul> 是没有前后顺序的信息列表。

语法：

<ul>
  <li>信息1</li>
  <li>信息2</li>
   ......
</ul>

举例：


  • 信息1

  • 信息2

<ol>标签

<ol>标签来制作有序列表来展示。

语法：

<ol>
   <li>信息1</li>
   <li>信息2</li>
   ......
</ol>

举例：


  1. 信息1

  2. 信息2

<div> 标签

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div> 标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

给div命名，使逻辑更加清晰

为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称。

语法：

<div id="版块名称">…</div>

<table> 标签

<table> 标签，创建表格

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。文本默认为粗体并且居中显示 。

6、表格中列的个数，取决于一行中数据单元格的个数。

<caption> 标签

<caption> 标签，为表格添加标题和摘要

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

​ 语法：<table summary="表格简介文本">

标题

用以描述表格内容，标题的显示位置：表格上方。

​ 语法：

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

<a> 标签

使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="https://gaotf.tk"  title="点击进入i-Share">click here!</a>

上面例子作用是单击click here!文字，网页链接到https://gaotf.tk这个网页。

target 属性：

语法：

<a href="目标网址" target="目标网址的打开方式">click here!</a>

属性值含义
blank在新窗口打开目标网址
self在当前窗口打开目标网址
top在顶层框架打开目标网址
parent在当前框架打开目标网址

name 属性:

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

举例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="back">name属性</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#back">返回“name属性”</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="https://gaotf.tk#back">返回“name属性”</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

完整代码

<body>
    ···
    <h2><a name="back">name属性</a></h2>
    ···
    ···
    <p>具体效果：<a href="#back">返回“name属性"</a></p>
    ···
</body>

具体效果：返回“name属性“

链接Email地址

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：

功能属性值举例
收件邮箱mailto:<a href="mailto:zhangsan@gaotf.tk>发送邮件</a>
抄送地址cc=<a href="mailto:zhangsan@gaotf.tk?cc=lisi@gaotf.tk">发送邮件</a>
密件抄送bcc=<a href="mailto:zhangsan@gaotf.tk?bcc=wanger@gaotf.tk">发送邮件</a>
多收件人;<a href="mailto:zhangsan@gaotf.tk;lisi@gaotf.tk">发送邮件</a>
邮件主题subject=<a href="mailto:zhangsan@gaotf.tk?subject=代码演示">发送邮件</a>
邮件内容body=<a href="mailto:zhangsan@gaotf.tk?body=邮件内容">发送邮件</a>

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

下面是一个完整的实例:

<a href="mailto:zhangsan@gaotf.tk?cc=lisi@gaotf.tk&bcc=wanger@gaotf.tk&subject=代码演示&body=这里是邮件的内容">发送邮件</a>

在浏览器中显示的结果：

发送邮件

点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：

<img src=”https://i.loli.net/2018/05/25/5b080c59550a6.png" alt=”邮件代码演示图片”title =”邮件演示”>

<img> 标签

使用<img>标签来插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本"title ="提示文本">

举例：

<img src="myimage.gif" alt="My Image" title="My Image"/>

<img src="https://i.loli.net/2018/05/25/5b08142ae3706.jpg" alt="章首图" title="我的文章配图"/>

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

注释标签

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。

代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：<!--注释文字 -->

版权声明：
文章作者：gaotf-xj
许可协议：署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者
本文链接：https://gaotf.github.io/21f4f4f0/