AA.png
该<!DOCTYPE html>声明定义这个文件是HTML
该<html>元素是HTML页面的根元素
该<head>元素包含有关该文档的元信息
该<title>元素指定文档的标题
该<body>元素包含可见页面内容
该<h1>元素定义了一个大的标题
该<p>元素定义了一个段落
换行
HTML标题
HTML标题由<h1>至<h6>标签定义。
<h1>定义了最重要的标题。<h6>定义了最不重要的标题：
HTML段落
HTML段落使用<p>标记定义：
HTML链接
HTML链接使用<a>标签定义：
<a href="https://www.w3schools.com">This is a link</a>
HTML图片
HTML图像使用<img>标签定义。
源文件（src），替代文本（alt），宽度和高度作为属性提供：
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
[尝试自己»
](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img)
HTML元素
HTML元素通常由起始标记和结束标记组成，其中插入的内容包括：
< tagname >内容到这里... < / tagname >
嵌套HTML元素
HTML元素可以嵌套（元素可以包含元素）。
所有HTML文档都由嵌套的HTML元素组成。
此示例包含四个HTML元素
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
空HTML元素
没有内容的HTML元素称为空元素。
是没有结束标记的空元素（
标记定义换行符）。
空元素可以在开始标签中“关闭”，如下所示：<br />。
HTML5不需要关闭空的元素。但是，如果要更严格的验证，或者如果您需要使XML解析器可读取文档，则必须正确关闭所有HTML元素。
HTML属性
所有HTML元素都可以有属性
属性提供有关元素的其他信息
属性始终在开始标签中指定
属性通常来自名称/值对，如：name =“value”
href属性
HTML链接使用<a>标签定义。链接地址在href属性中指定：
<a href="https://www.w3schools.com">This is a link</a>
src属性
HTML图像使用<img>标签定义。
图像源的文件名在src属性中指定：
宽度和高度属性
HTML中的图像具有一组大小属性，指定图像的宽度和高度：
alt属性
当不能显示图像时，alt属性指定要使用的替代文本。
属性的值可以由屏幕阅读器读取。这样，有人“听”网页，例如盲人，可以“听到”元素。
HTML标题
标题由<h1>至<h6>标签定义。
<h1>定义了最重要的标题。<h6>定义了最不重要的标题。
a.png
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
标题很重要
搜索引擎使用标题来索引您的网页的结构和内容。
用户按标题浏览您的页面。使用标题显示文档结构很重要。
主要标题应使用<h1>标题，后跟<h2>标题，然后不太重要的<h3>等等。
更大的标题
每个HTML标题都有一个默认大小。但是，您可以使用style属性指定任何标题的大小：
<h1 style="font-size:60px;">Heading 1</h1>
HTML水平规则
标签定义HTML页面中的专题中断，并且通常以水平规则的形式显示。
元素用于分隔HTML页面中的内容（或定义更改）：
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML段落
HTML <p>元素定义一个段落：
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML显示
您无法确定HTML的显示方式。
大屏幕或小屏幕，并且调整大小的窗口将创建不同的结果。
使用HTML，您不能通过在HTML代码中添加额外的空格或额外的行来更改输出。
当页面显示时，浏览器将删除任何额外的空格和额外的行：
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
不要忘记结束标签
大多数浏览器会正确显示HTML，即使您忘记了结束标签
<p>This is a paragraph.
<p>This is another paragraph.
HTML <pre>元素
HTML <pre>元素定义了预格式化的文本。
<pre>元素中的文本以固定宽度字体（通常为Courier）显示，并保留空格和换行符：
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML样式属性
设置HTML元素的样式，可以使用style属性。
HTML样式属性具有以下语法：
<tagname style="property:value;">
该属性是一个CSS属性。该值是一个CSS值。
HTML背景颜色
的背景颜色属性定义HTML元素的背景颜色。
此示例将页面的背景颜色设置为蓝色：
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML文本对齐
的文本对齐属性定义HTML元素水平文本对齐：
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
使用样式属性来设置HTML元素
使用背景色作为背景色
使用颜色的文字颜色
为文字字体使用font-family
对于文字大小使用font-size
使用text-align进行文本对齐
HTML格式元素
在上一章中，您了解了HTML 样式属性。
HTML还定义了用于定义具有特殊含义的文本的特殊元素。
HTML使用像<b>和<i>这样的元素来格式化输出，比如粗体或斜体文字。
格式化元素旨在显示特殊类型的文本：
<b> - 粗体文字
<strong> - 重要文字
<i> - 斜体文字
<em> - 强调文字
标记文字
<small> - 小文字
<del> - 已删除的文字
<ins> - 插入的文字
<sub> - 下标文字
<sup> - 上标文字
HTML文本格式元素
[<b>] Defines bold text
[<em>] Defines emphasized text
[<i>] Defines italic text
[<small>] Defines smaller text
[<strong>] Defines important text
[<sub>] Defines subscripted text
[<sup> Defines superscripted text
[<ins>] Defines inserted text
[<del>] Defines deleted text
[<mark>] Defines marked/highlighted text
HTML <q>用于简短报价
HTML <q>元素定义了一个简短的引号。
浏览器通常在<q>元素周围插入引号。
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <abbr>缩写
HTML <abbr>元素定义缩写或首字母缩略词。
标记缩写可以为浏览器，翻译系统和搜索引擎提供有用的信息。
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <cite>作品标题
HTML <cite>元素定义了作品的标题。
浏览器通常以斜体显示<cite>元素。
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo>用于双向覆盖
HTML <bdo>元素定义了双向覆盖。
<bdo>元素用于覆盖当前文本方向
<bdo dir="rtl">This text will be written from right to left</bdo>
<!-- Write your comments here -->
内联CSS
内联CSS用于将唯一样式应用于单个HTML元素。
内联CSS使用HTML元素的style属性。
此示例将<h1>元素的文本颜色设置为蓝色：
<h1 style="color:blue;">This is a Blue Heading</h1>
内部CSS
内部CSS用于为单个HTML页面定义样式。
内部CSS在HTML页面的<head>部分中定义，在<style>元素中：
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部CSS
外部样式表用于定义许多HTML页面的样式。
使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！
要使用外部样式表，请在HTML页面的<head>部分添加一个链接：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以写入任何文本编辑器。该文件不能包含任何HTML代码，并且必须使用.css扩展名保存。
以下是“styles.css”的样子：
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS字体
CSS 颜色属性定义要使用的文本颜色。
CSS font-family属性定义要使用的字体。
CSS font-size属性定义要使用的文本大小。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS边框
CSS 边框属性定义HTML元素周围的边框：
p {
border: 1px solid powderblue;
}
CSS填充
CSS 填充属性定义文本和边框之间的填充（空格）：
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS保证金
CSS 边距属性定义了边框外的边距（空格）：
p {
border: 1px solid powderblue;
margin: 50px;
}
id属性
要为一个特殊元素定义特定样式，请向元素添加一个id属性：
<p id="p01">I am different</p>
然后为具有特定ID的元素定义样式：
#p01 {
color: blue;
}
类属性
要为特殊类型的元素定义样式，请向元素添加类属性：
<p class="error">I am different</p>
然后为具有特定类的元素定义样式：
p.error {
color: red;
}
外部参考
可以使用完整的URL或相对于当前网页的路径引用外部样式表。
此示例使用完整的URL链接到样式表：
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
此示例链接到位于当前网站的html文件夹中的样式表：
<link rel="stylesheet" href="/html/styles.css">
此示例链接到与当前页面位于同一文件夹中的样式表：
<link rel="stylesheet" href="styles.css">
使用HTML 样式属性进行内联样式
使用HTML <style>元素定义内部CSS
使用HTML <link>元素来引用外部CSS文件
使用HTML <head>元素来存储<style>和<link>元素
对文本颜色使用CSS 颜色属性
将CSS font-family属性用于文本字体
将CSS font-size属性用于文本大小
对边框使用CSS 边框属性
对边框内的空格使用CSS padding属性
对边框外的空格使用CSS margin属性
网友评论