HTML基础知识HTML基本概念什么是HTML HTML是一种用来告知浏览器如何组织页面的标记语言,它的全称是 Hyp

HTML基本概念

什么是HTML

HTML是一种用来告知浏览器如何组织页面的标记语言,它的全称是 HyperText Markup Language,它由一系列的元素(elemnets)组成

元素

一个元素一般有以下部分

开始标签(opening tag)

开始标签包含元素的名称(上图为p),被左右尖括号所包围,表示元素从这里开始或者开始起作用
结束标签(Closing tag)

与开始标签相似,但是会在元素的名称前面加了一个斜杠
内容(Content)

元素嵌套

元素嵌套是指把元素放在其他元素之中,

所有的元素都需要正确的打开和关闭,嵌套要遵循开始和结束成对出现

块级元素和内联元素

块级元素
- 块级元素在页面中以块的形式展开,相对于它前面的内容,它会出现在新的一行,它后面的内容也会被挤到下一行展示,块级的元素通常用于展示页面上结构化的内容,例如段落,列表,导航菜单,页脚登
- 一个以block形式展示的块级元素不会被嵌套进内联元素中,但是可以嵌套在其他块级元素中
- 块级元素只能出现在body元素内
- 块级元素列表
  - <address> 联系方式信息
  - <article> 文章内容
  - <aside> 伴随内容
  - <blockquote> 块引用
  - <dd> 列表中定义条目描述
  - <div> 文档分区
  - <dl> 定义列表
  - <fieldset> 表单元素分组
  - <figcaption> 图文信息组标题
  - <figure> 图文信息组
  - <footer> 区段尾或页尾
  - <h(1~6)> 标题
  - <form> 表单
  - <header> 区段头或页头
  - <hgroup> 标题组
  - <hr> 水平分割线
  - <ol> 有序列表
  - <p> 行
  - <pre> 预格式化文本
  - <section> 一个页面区段
  - <table> 表格
  - <ul> 无序列表
内联元素
- 内联元素通常会出现在块级元素中并环绕文档内容的一小部分
- 内联元素不会导致文本换行
- 内敛元素列表
  - b, big, i, small, tt
  - abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  - a, bdo, br, img, map, object, q, script, span, sub, sup
  - button, input, label, select, textarea

空元素

不是所有元素都拥有开始标签内容和结束标签,一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西,例如通过img 插入一张图片

<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

属性

属性包含元素额外的信息,这些额外的信息不会出现在内容中一个属性必须包含如下内容

在属性名称和元素名称之间必须有空格,多个属性之间也需要有空格
属性名和属性值用等号链接,属性值需要用引号引起来

HTML的结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

一个html由几部分组成

声明文档类型
根元素
head元素
body元素

声明文档类型

<!DOCTYPE html>是最简单的文档声明如果不写文档声明,有些浏览器会进入一种怪异模式,导致有些浏览器无法正常显示

根元素

<html>元素,这个元素包裹了整个完整的页面,一个页面只能有一个根元素

可以在根结点中为文档设定语言

<html lang="zh-CN">

如果HTML文档的语言设置好了,那么HTML文档就会被搜索引擎更有效的索引

还可以将文档的分段设置为不同的语言

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

head元素

在页面加载完成的时候 head 标签的内容是不会在页面显示出来了,它的作用是保存页面的一些元数据

title 元素

title 可以为文档添加标题

title 是文档标题,h1是为body 添加标题

h1在页面加载完成时,显示在页面上,通常只出现一次

title元素是一项元数据,用于表示HTML文档的标题

title 元素可以用作其他的方式,当尝试为某个页面添加书签的时候,title的内容被作为建议的书签名

meta 元素

meta 元素也称为元数据,元数据就是描述数据的数据,常用的几种类型如下

指定文档中字符的编码

<mata charset="utf-8">

添加作者和描述
许多的meta元素包含了name和content属性
- name 指定了meta元素类型,说明该元素包含了什么类型的信息
- content 指定了实际的元数据内容指定包含页面内容的关键字的页面内容描述是很有用的,因为它可能让页面在搜索引擎相关的搜索出现的更多很多meta特性已经不再使用了,例如keyword,这个是提供关键词给搜索引擎,根据不同的搜索词,查找到相关的网站,但是这个特性已经被搜索引擎给忽略了,因为可以在keyword中填充大量的关键词,错误的引导搜索引擎的搜索结果

link元素

为站点增加自定义图标

<link rel="icon" href="favicon.ico" type="image/x-icon">

这种图标出现在浏览器打开的标签页以及书签中,一般是16*16像素

应用CSS

<link rel="stylesheet" href="my-css-file.css">

rel="stylesheet" 表示这是文档的样式表

script元素

<script src="my-js-file.js" defer></script>

script 元素不一定非要放在文档的head标签中,src 用来指定需要加载的JS的文件路径,defer用来告诉浏览器在解析完成HTML后再加载JS,这样可以确保在加载脚本之前浏览器已经解析了所有HTML内容,如果脚本尝试访问某个不存在的元素,浏览器会报错

body元素

<body> 元素,这个元素是访问页面的所有的内容.

HTML标签

列表

无序列表(UnOrdered List)

无序列表使用ul标签,每一个item使用li标签

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序列表(Ordered List)

有序列表使用ol标签,每一个Item 也是li标签

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

嵌套列表(Nesting List)

<ol>
  <li>做的第一件事情</li>
  <li>做的第二件时间</li>
  <ul>
    <li>可以选择这样做</li>
    <li>也可以选择那样做</li>
  </ul>
  <li>做的第三件时间</li>
  <li>做的第四件时间</li>
  <li>做的第五件时间</li>
</ol>

强调

<em> 标签
<strong> 标签

表象元素

上面的元素都是意义清楚的语义元素,但是有些元素出现在CSS还不被支持的时期,那时这些语义仅仅是影响表现而且没有语义,这样的元素就是表象语言,常见的有

b 表达粗体
i 用来表达斜体
u 表达下划线这种没有语义的元素不被建议使用,都是用CSS来表达

超链接

元素<a>的属性:

href:这个属性声明超链接的web地址,当这个超级被点击的时候浏览器会跳到href声明的web地址
title: 这个属性为超链接声明了额外的信息,当鼠标悬停在超级链接的上面的时候,title会以工具的形式显示
target:这个属性用来指示链接如何呈现出来,如果target="_blank"将会在新标签中显示链接,模式在当前标签中显示链接

块级链接

如果想要一个图片转化成为链接,只需要饮用图像文件的的<img>放在a标签中

<a href="https://www.baidu.com">
  <img src="mozilla-image.png" alt="去百度">
</a>

文档片段

超链接除了可以链接到文档外部,也可以链接到文档的特定部分,要做到这一点需要给要链接的元素分配一个id属性

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到这个特定的id,可以在url的结尾用一个#id来指向他

<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>

对于同一份文档,直接使用#id来链接他

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>

链接到非HTML资源

给出清晰的指示

<p><a href="https://www.example.com/large-report.pdf">
  下载销售报告（PDF, 10MB）
</a></p>

<p><a href="https://www.example.com/video-stream/" target="_blank">
  观看视频（将在新标签页中播放，HD 画质）
</a></p>

<p><a href="https://www.example.com/car-game">
  进入汽车游戏（需要 Flash 插件）
</a></p>

使用download属性

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

电子邮件链接

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

文本格式

描述列表

dl 标记一组项目以及相关的描述
dt 标记项目
dd 标记每个表述

浏览器默认样式会在描述列表的术语及其定义之间产生缩紧

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

内心独白: 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
语言独白: 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
旁白: 戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

引用

块引用

如果一个块级内容从其他地方被引用,应该使用<blockquote>元素包裹起来,并在cite属性里用url来指向引用的资源

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

下面是呈现的样子:

Here is a blockquote:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

浏览器的默认样式会将其呈现为缩紧的段落

行内引用

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

行内引用会将普通的文本放入引号内表示引用

缩略语

<p>
  我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。
</p>

<p>
  第 33 届<abbr title="夏季奥林匹克运动会">奥运会</abbr>将于 2024 年 8 月在法国巴黎举行。
</p>

我们使用 HTML 来组织网页文档。

第 33 届奥运会将于 2024 年 8 月在法国巴黎举行。

标记联系方式

<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

Chris Mills
Manchester
The Grim North
UK

Tel: 01234 567 890
Email: me@grim-north.co.uk

上标和下标

<p>
  咖啡因的化学方程式是
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

咖啡因的化学方程式是 C₈H₁₀N₄O₂。

如果 x² 的值为 9，那么 x 的值必为 3 或 -3。

展示计算机代码

code 用于标记计算机通用代码
pre 用于保留空白字符(通常用于代码块)
var 用于标记具体变量名
kdb 用于标记电脑的键盘输入
samp 用于标记程序的输出

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>
  请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。
</p>

<p>
  在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。
</p>

<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}

请不要使用 <font> 、 <center> 等表象元素。

在上述的 JavaScript 示例中，para 表示一个段落元素。

按 Ctrl/Cmd + A 选择全部内容。

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

标记时间和日期

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

2016 年 1 月 20 日

文档和网站架构

header 页眉
nav 导航栏
main 主内容,主内容中还可以有各种子内容的区段,可以用article section 和div 等元素表示
aside 侧边栏经常嵌套在main 中
footer 页脚