HTML笔记-CSDN博客

本文链接：https://blog.csdn.net/hyp233/article/details/70599618

一、HTML简介

1.什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2. HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3. HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

二、HTML编辑器

三、HTML基础--基本的四个HTML 标签

1. HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

2. HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

3. HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<ahref="http://www.w3school.com.cn">This is a link</a>

4. HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

图像的名称和尺寸是以属性的形式提供的。

四、HTML 元素

HTML 文档是由 HTML 元素定义的。

1. HTML 元素

HTML 元素指的是从开始(开放)标签（start tag）到结束(闭合)标签（end tag）的所有代码。<a>…….</a>

2. HTML 元素语法

HTML 元素以开始标签起始以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

3. 嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

<html>

<body>

<p>This is my firstparagraph.</p>

</body>

</html>

以上包含三个HTML元素, 即三个完整的标签.

4. <p> 元素：

<p>This is my first paragraph.</p> 横线为元素的内容.

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

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

5.<body> 元素：

<body>

<p>This is my firstparagraph.</p> 元素内容是另一个 HTML 元素（p 元素）。

</body>

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

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

6. <html> 元素：

<html>

<body>

<p>This is my firstparagraph.</p> 元素内容是另一个 HTML 元素（body 元素）

</body>

</html>

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

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

不要忘记结束标签. 要规范写法.

HTML使用小写标签 , <p> 不用<P>

7. 空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br>标签定义换行）。

在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法.

五、HTML 属性

1. HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

(输入完整的网址 http：//www. xxxxxx)

更多属性:

(1) 居中排列 : align="center" 定义标题开始 <h1align="center"> \ <p align="center">

(2) 背景颜色:<bodybgcolor="颜色英文"> 只能放body, 定义文档主体

(3) <table> 定义 HTML 表格

六、HTML 标题

1. HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。只有h1 – h6

标题很重要:

确保将 HTML heading 标签只用于标题，不要仅仅是为了产生粗体或大号的文本而使用标题。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

2. HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。

<p>This is a paragraph</p>

<hr /> 这里中间会被水平线隔开

<p>This is a paragraph</p>

3. HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。

浏览器会忽略注释，也不会显示它们。

注释是这样写的：

左边的开始括号需要紧跟一个叹号，结束括号之前（右边的括号）不需要

凡是带<xx>, 表示一种标签。

七、HTML段落

通过<p>来定义.

一些注意的点：

<p>是块级元素、不能省略结束标签、用<br/>换行,在段落文字中直接插入..

排版问题：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

八、HTML 样式

style 属性用于改变 HTML 元素的样式。

通过 HTML 样式，能够通过使用style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

应该避免使用下面这些标签和属性：

标签	描述被style淘汰
<center>	定义居中的内容。
<font> 和 <basefont>	定义 HTML 字体。
<s> 和 <strike>	定义删除线文本
<u>	定义下划线文本
属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色 background-color
color	定义文本颜色

1.background-color 属性为元素定义了背景颜色：

<html>

<body style="background-color:yellow"> 文本背景颜色

<h2 style="background-color:red">This isa heading</h2> 标题head背景颜色

<p style="background-color:green">Thisis a paragraph.</p> 段落p背景颜色

</body>

</html>

以前的颜色属性只能定义body背景颜色，现在可以定义多个元素的背景色

2.font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>

<body>

<h1 style="font-family:verdana">Aheading</h1>

<p style="font-family:arial; color:red; font-size:20px;">Aparagraph.</p>

</body>

</html>

3.text-align属性规定了元素中文本的水平对齐方式：

<html>

<body>

<h1 style="text-align:center">This is a heading</h1>

<p>上面的标题相对于页面居中对齐.</p>

</body>

</html>

九、HTML 文本格式化

1.文本格式化标签

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。
<s>	不赞成使用。使用 <del> 代替。
<strike>	不赞成使用。使用 <del> 代替。
<u>	不赞成使用。使用样式（style）代替。

2. “计算机输出”标签

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。
<listing>	不赞成使用。使用 <pre> 代替。
<plaintext>	不赞成使用。使用 <pre> 代替。
<xmp>	不赞成使用。使用 <pre> 代替。

3. 引用、引用和术语定义

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

十、引用

HTML 引文、引用和定义元素

标签	描述
<abbr>	定义缩写或首字母缩略语。
<address>	定义文档作者或拥有者的联系信息。
<bdo>	定义文本方向。
<blockquote>	定义从其他来源引用的节。
<dfn>	定义项目或缩略词的定义。
<q>	定义短的行内引用。
<cite>	定义著作的标题。

1. HTML <q> 用于短的引用

HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

<!DOCTYPEhtml>

<html>

<body>

<p>浏览器通常会在 q 元素周围包围引号。</p>

<p>WWF的目标是 <q>构建人与自然和谐相处的世界。</q> </p>

</body>

</html>

2. 用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<!DOCTYPEhtml>

<html>

<body>

<p>浏览器通常会对blockquote 元素进行缩进处理。</p>

<blockquotecite="http://www.worldwildlife.org/who/index.html">

五十年来，WWF 一直致力于保护自然界的未来。

WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

</blockquote>

</body>

</html>

不懂？？？

3. 用于缩略词的 HTML<abbr>

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

4. 用于联系信息的 HTML <address>

HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

Writtenby Donald Duck.<br/>

Visit usat:<br/>

Example.com<br/>

Box 564,Disneyland<br/>

USA

</address>

5. 用于著作标题的 HTML<cite>

HTML <cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。

<p><cite>TheScream</cite> by Edward Munch. Painted in 1893. </p>

6. 用于双向重写的 HTML<bdo>

HTML <bdo> 元素定义双流向覆盖（bi-directionaloverride）。

<bdo>元素用于覆盖当前文本方向：

<bdo dir="rtl">This text will be written from right to left</bdo>

十一、HTML 计算机代码元素

HTML 计算机代码元素

标签	描述
<code>	定义计算机代码文本
<kbd>	定义键盘文本
<samp>	定义计算机代码示例
<var>	定义变量
<pre>	定义预格式化文本

1. HTML 键盘格式

HTML <kbd> 元素定义键盘输入：

<p>Toopen a file, select:</p>

2. HTML 样本格式

HTML <samp> 元素定义计算机输出示例：

<samp>

demo.example.comlogin: Apr 12 09:10:17

Linux2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

</samp>

3. HTML 代码格式

HTML <code> 元素定义编程代码示例：

<code>

varperson = { firstName:"Bill", lastName:"Gates", age:50,eyeColor:"blue" }

</code>

4.HTML 变量格式

HTML <var> 元素定义数学变量：

<p>Einsteinwrote:</p>

<p><var>E = mc<sup>2</sup></var></p> <sup> </sup>上标

十二HTML 注释

注释标签  用于在 HTML 插入注释。

1. HTML 注释标签

您能够通过如下语法向 HTML 源代码添加注释：

注释：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。可以利用注释在 HTML 中放置通知和提醒信息：

注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误：

<!-- 此刻不显示图片：

<imgborder="0" src="/i/tulip_ballade.jpg"alt="Tulip">

-->

十三、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

1. HTML 链接语法

链接的 HTML 代码很简单。它类似这样： <ahref=" url "> Link text </a>

url 必须要http：//www.xxxx.com

2. HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<ahref="http://www.w3school.com.cn/" target="_blank">VisitW3School!</a>

十四HTML 图像

1. 如何将其他文件夹现实到网页中 ???

<bodybackground="/i/eg_background.jpg">

2. 图像标签（<img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指"source"。

源属性的值是图像的 URL 地址。

定义图像的语法是： <img src="url" />

URL 指存储图像的位置。如果名为"boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

3. 替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="BigBoat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图片无法显示, 用文字表示

添加背景图片: <bodybackground="/i/eg_background.jpg">

设置图像的位置: <img src=”地址” align=”位置”>

设置图像大小: <img src=”地址” height=” ” width =” ”>

把图像作为链接来使用:

<p>

您也可以把图像作为链接来使用：

<ahref="/example/html/lastpage.html"> 点击图像转到的链接

<imgborder="0" src="/i/eg_buttonnext.gif" /> 图像来源

</a>

</p>

http://www.w3school.com.cn/tiy/t.asp?f=html_ismap

没看到效果

十五. HTML 表格

1. 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.表格边框属性

<h4>带有普通的边框：</h4>

<tableborder="1"> border 表示边框属性: 粗细

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

3. 表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Heading</th>

<th>AnotherHeading</th>

</tr>

显示效果: Heading Another Heading

4. 表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

十六.HTML 列表

1. 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

</ul>

浏览器显示如下：

Coffee
Milk

两者之间差别在于序号的有无, 自动排列

2. 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于<li> 标签。

<ol>

<li>Coffee</li>

</ol>

浏览器显示如下：

Coffee
Milk

有序列表与无序列表可以共同用. 一个无序列表里面还可以有一个无序列表

3. 定义列表(一般用于内容解释,一问一答)

<dl>

</dl>

还可以在<ol>.<ul><dl> 括号里加 type=”格式”

十七.HTML<div> 和<span>

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

1. HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 blocklevel element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>,<p>, <ul>, <table> ,<div> 相当于自带分行

2HTML内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>,<td>, <a>, <img>

3. HTML <div> 元素

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

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

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

4.HTML<span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span>元素也没有特定的含义。

当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

5. HTML 分组标签

标签描述

<div> 定义文档中的分区或节（division/section）。

<span> 定义 span，用来组合文档中的行内元素。

十八 HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

1. 分类块级元素

HTML<div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类： --相当于格式刷

2. 分类行内元素

HTML<span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的<span> 元素设置相同的样式。

<!DOCTYPEhtml>

<html>

<head>

<style>

span.red {color:red;}

</style>

</head>

<body>

</body>

</html>

十九.HTML 布局

网站常常以多列显示内容（就像杂志和报纸）。

1. 使用<div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div>元素来创建多列布局：

2. 使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素:

header 定义文档或节的页眉

nav 定义导航链接的容器

section 定义文档中的节

article 定义独立的自包含文章

aside 定义内容之外的内容（比如侧栏）

footer 定义文档或节的页脚

details 定义额外的细节

summary 定义 details 元素的标题

HTML文档类型HTML<!DOCTYPE>

<!DOCTYPE>声明帮助浏览器正确地显示网页。

1.<!DOCTYPE>声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。

<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

2.常用的声明

HTML5

<!DOCTYPEhtml>

HTML4.01

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

腾讯课堂内容

前端--------------------------- 后台-------------------------数据库

Html标签网页内容

Css 界面

Js 执行网页动作

<p>标签、

<br/>标签自动换行

html注释, 没有网页显示效果. 相当于删除

<u>下划线标签</u>

p<sup>2</sup>

p<sub>2</sub>

预定义文本标签<pre>只是保留换行和空格<pre>

对HTML的转义:<body>在浏览器中不被识别,要想显示要改为<body> 对尖括号进行转义

缩写说明:

<abbrtitle=”解释文字”>缩写</abbr> 浏览器中会显示缩写与原文意

Table-标签表示表格几行几列 <table border=”间距”>

<th>加粗

<tr><tb></tb></tr> 多少行就有多少<tr>

a标签 :超链接 <a href=”http:// ”>xxx</a>

img标签: 图片 <img src=”图片地址”>

图片地址:一种叫绝对路径,是完整路径;

一种是相对路径:如果两个图片是在同一级目录,可以直接调用; 如果不在同一级目录, 调用地址 ../1/2/3/1.jpg

<iframesrc=”iframe.html”> </iframe> 一个网页镶嵌到另一个网页上去

常用表单元素:

form

标签的语义化: 把你想要的东西更加容易的被搜索引擎理解和重视, SEO

HTML笔记

“相关推荐”对你有帮助么？