1、HTML嵌入CSS样式
HTML仅仅只能呈现一些信息，表现能力很有限，需要结合CSS来一起使用，这样可以使页面更加的精美。
CSS 样式既可以作为单独的文件引入到 HTML 文档中，也可以直接写在 HTML 文档中。如下所示：
行内样式（内联样式）：就是把 CSS 样式直接放在HTML的标签（<em>、<strong>、<div>、<p>）中，一般都是放入style属性中，修改不方便，而且每一个标签要设置样式都需要添加 style 属性。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p style="background-color: aqua;">段落1</p>
<p style="background-color: blue;">段落2</p>
<div style="background-color: aquamarine;">块级</div>
<strong style="font-size: 45px;">学习</strong>
</body>
</html>
运行结果如下：
内嵌样式：使用 <style> 标签在 HTML 文档头部（<head> 和 <head> 之间）定义 CSS 样式，这样可以解决行内样式多次书写的弊端（减少代码量）以及行内样式带来样式修改的不方便。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
text-align: left;
font-size: 20px;
text-indent: 2em;
margin-bottom: 25px;
}
</style>
</head>
<body>
<p>
C语言代码由固定的词汇按照固定的格式组织起来，简单直观，程序员容易识别和理解，
但是对于CPU，C语言代码就是天书，根本不认识，CPU只认识几百个二进制形式的指令。
这就需要一个工具，将C语言代码转换成CPU能够识别的二进制指令，也就是将代码加工成 .exe 程序；
</p>
<p>
我们平时所说的程序，是指双击后就可以直接运行的程序，这样的程序被称为可执行程序（Executable Program）。
在 Windows 下，可执行程序的后缀有 .exe 和 .com（其中 .exe 比较常见）；在类 UNIX 系统（Linux、Mac OS 等）下，
可执行程序没有特定的后缀，系统根据文件的头部信息来判断是否是可执行程序。
</p>
</body>
</html>
运行结果如下：
从这个例子我们可以知道，<style>标签有多个属性，如下所示：
必须属性：
<style type="text/css">
可选属性：
<style madia="screen">
<style madia="tty">
<style madia="tv">
<style madia="projection">
<style madia="handheld">
<style madia="print">
<style madia="braille">
<style madia="aural">
<style madia="all">
链接式：使用 <link> 标签引入外部 CSS 样式表文件，这是网站应用最多的方式，也是最实用的方式。它可以将HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。同样也是在<head></head>标签进行的。
导入样式：使用 @import 命令导入外部 CSS 样式表文件。它有6种书写方式：
@import daoru.css
@import 'daomxss'
@mport "daoru.css"
@import url(daoru.css)
@import url('daoru.css')
@import url("daoru.css")
2、HTML块级元素和内联（行内）元素
HTML标签包括块级元素和内联元素两类。
块级元素
块级元素不管是否使用换行标签<br/>，它都会在新的一行上开始。它包括的标签有<div>（最具代表性，通过与CSS相结合可以实现不同的效果）、<p>、<nav>、<aside>、<header>、<footer>、<section>、<ul>、<address>、<h1>~<h6>。
内联元素（行内元素）
行内元素的高度、宽度（内容的宽度）以及外边距和内边距均不可改变。它包含的标签有<span>（最常用，可以HTML文档的内容进行修饰，也可以与CSS结合使用来美化网页）、<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>、<var>
元素嵌套：块级元素和内联元素可以相互嵌套，也可以自己嵌套自己。
3、HTML布局
为了改进传统布局模式，就会使用到各种不同的布局标签，如下所示：
<header>：定义网页的头部。
<nav>：定义网页的导航栏。
<section>：定义网页中的单独部分，包括图像、文本、表格。
<article>：定义文章或其他独立信息。
<aside>：表示网页以外的部分。
<footer>：表示网页的底部。
<detail>：定义详细信息，即可以隐藏详细信息，也可以显示详细信息。
<summary>：用于为<details>标签定义标题。
4、内联框架标签<iframe>
<iframe>标签：把另外一个网页嵌套到当前网页中；定义一个矩形区域，浏览器可以在这个区域内显示另一个网页的内容。它的具体语法格式如下：
<iframe src="url" width="m" height="n"></iframe>
src属性：表示为要嵌入的网页的地址。
<iframe>标签的属性:
align="left、right、top、middle、bottom"：设置如何来对齐 <iframe>。
frameborder="1、0"：设置是否显示 <iframe> 周围的边框。
height=" px"：设置高度。
longdesc="URL"：设置页面，该页面中包含了有关 <iframe> 的描述。
marginheight=" px"：设置顶部和底部的边距。
marginwidth=" px"：设置 左侧和右侧的边距。
name="text"：设置 名称
sandbox=" 、allow-forms、allow-same-origin、allow-scripts、allow-top-navigatio"
scrolling="yes、no、auto"：设置是否在 <iframe> 中显示滚动条
seamless="seamless"
src="URL"：设置要在 <iframe> 中显示的文档地址（URL）
srcdoc="HTML代码 "
width=" px"：设置宽度。
5、头部标签<head>
<title>标签：定义HTML文档的标题，一个HTML文档只允许一个<title>标签存在，必须在<head></head>标签中。如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>
</body>
</html>运行结果如下：
<base> 标签：用于为页面中所有相对链接指定一个基本链接；意思就是如果设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀。与<title>标签一样，只能在<head></head>标签中使用，只能有一个。如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
<base href="../" />
</head>
<body>
<ul>
<li><a href="https://www.runoob.com"</li>
</ul>
</body>
</html>
<link> 标签：用于引用外部 CSS 样式表。它有两个重要属性，是rel（指示引用文件的类型）和href（设置外部文件的路径）。
<style>标签
<meta> 标签：提供有关 HTML 文档的元数据
<script> 标签
<noscript> 标签
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
