一、网页和浏览器
1、认识网页
网页主要由文字，图像和超链接等元素构成。当然，除了这些元素，网页还可以包含音频，视频等。网页是程序员写的代码经过浏览器的渲染，呈现在用户眼前的界面。
网页三剑客：
- HTML:超文本标记语言【结构】
- CSS:层叠样式表【样式】
- javascript:js【交互】
2、浏览器
- 常用浏览器
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
国内浏览器有360浏览器、QQ浏览器、搜狗浏览器、遨游浏览器等。
- 浏览器内核
内核：可大概为“渲染引擎”，不过我们一般习惯将之称为‘浏览器内核’。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript），并渲染网页
四大内核：
（1）Trident：IE
（2）Gecko：Firefox
（3）Webkit：Safari
（4）Blink：Chrome ，Opera
不同的内核在渲染同一内容的时候会有差别。国内浏览器内核：
（1）360浏览器、猎豹浏览器内核：IE+Chrome双内核；
（2）搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
（3）百度浏览器、世界之窗内核：IE内核；
（4）2345浏览器内核：IE+Chrome双内核；
二、HTML的基本概念
1、HTML的定义
Htyper Text Markup Language 即超文本标记语言。
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言。
2、HTML结构
<!-- <!doctype>标记:位于文档最前面，用于向浏览器说明当前文档使用的HTML标准。 -->
<!DOCTYPE html>
<!-- <html>标记:也称为根标记，用于告知浏览器其自身是一个HTML文档。 -->
<!-- <html>标记标志着HTML文档的开始，</html>标记着HTML文档的结束。 -->
<html lang="en">
<!-- <head>标记:用于定义HTML文档的头部信息，称为头部标记。主要用来封装其他位于文档头部的标记。 -->
<head>
<!-- <meta>：定义页面元信息标记，用于定义页面的元信息,可重复出现在<head>头部标记中，是一个单标记。 -->
<!-- 常见的几种设置，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词 -->
<!-- <meta charset="UTF-8"> 定义编码格式为utf-8 -->
<meta charset="UTF-8">
<!-- <meta name="名称" content="值"> 可以为搜索引擎提供信息。 -->
<meta name="keywords" content="html">
<meta name="description" content="html基础">
<meta name="author" content="everydawn">
<!-- <link>：引用外部文件标记 -->
<!-- rel:指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表 -->
<!-- type:指定所连接文档的MIME类型，css的MIME是type/css,一般使用type="text/css" -->
<!-- href -- 指定需要加载的资源(CSS文件)的地址URI -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- <style>:内嵌样式标记 -->
<!-- 用于为HTML文档定义样式信息，在HTML中使用style标记时，常常定义其属性为type,相应属性值为text/css。 -->
<style type="text/css">
h1{
color:red;
}
</style>
<!-- <script>:标签用于定义客户端脚本，比如 JavaScript。 -->
<!-- script 元素既可以包含脚本语句 -->
<script type="text/javascript">
document.write("Hello World!")
</script>
<!-- script 也可以通过 src 属性指向外部脚本文件。 -->
<script type="text/javascript" src="main.js"></script>
<!-- <title>：设置页面标题标记，用于定义HTML页面的标题，即给网页取一个名字。 -->
<title>Document</title>
</head>
<!-- <body>标记:用于定义HTML文档索要显示的内容,也称为主体标记。<body>标记中的信息才是最终要显示在网页上的。 -->
<body>
<h1>hello world</h1>
</body>
</html>
三、标签的概念、写法
1、标签的概念
HTML是网页的基本结构，标签就是组成网页基本结构的元素。
标签：html、head、meta、title、body、h1等等我们都称为html的标签，简称标签即可。
元素：一对标签所表示的东西，我们称为元素。
2、标签的写法
<标签名>content</标签名>
<html></html>
<!-- 标签的嵌套 -->
<标签名>
<标签名2>content</标签名2>
</标签名>
四、标签的属性和注释的作用
1、HTML标签的属性
标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性写在标签里面的，而且是开始标签内。
<标签名 属性名1="value1" 属性名2="value2">content</标签名>
每一个标签都会拥有一堆属性，来描述这个标签的一些功能。所有标签共有的属性：
| 属性名 | 含义 |
|---|---|
| class | 为html元素定义一个或多个类名(classname)（类名从样式文件引入） |
| id | 定义元素的唯一id |
| style | 定义元素的行内样式 |
| title | 描述了元素的额外信息（作为工具条使用） |
2、HTML注释
合理的注释可以增加对于代码的理解。
<!-- 这是一个注释 -->
五、常用的标签
1、结构标签
<html></html> 根标签
<head></head> 头部标签
<body></body> 主体标签
<title></title> 标题标签
<meta> 元标签
2、标题标签
<h1>-<h6>
基本语法格式为：
<h1>HTML标题一</h1>
<h2>HTML标题二</h2>
<h3>HTML标题三</h3>
<h4>HTML标题四</h4>
<h5>HTML标题五</h5>
<h6>HTML标题六</h6
属性：
align:值：center、left、right、justify
| 值 | 描述 |
|---|---|
| center | 居中对齐内容。 |
| left | 左对齐内容。 |
| right | 右对齐内容。 |
| justify | 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 |
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style=" 280px;background-color: pink;float: left;">
<h1 align="center">这是标题一居中</h1>
<h1 align="left">这是标题一居左</h1>
<h1 align="right">这是标题一居右</h1>
<h1>不使用align:justify飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</h1>
</div>
<div style=" 280px;background-color: skyblue;float: left;margin-left:10px">
<h1 align="center">这是标题一居中</h1>
<h1 align="left">这是标题一居左</h1>
<h1 align="right">这是标题一居右</h1>
<h1 align="justify">使用align:justify飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</h1>
</div>
</body>
</html>
页面显示：
3、功能标签
<b>加粗</b>
<strong>加粗强调</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<s>删除线</s>
<sup>上角标</sup>
<sub>下角标</sub>
<!-- br:换行 -->
<br>
<!-- hr:水平线 -->
<hr>
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>b加粗</b>
<strong>strong加粗强调</strong>
<i>i斜体</i>
<em>em斜体</em>
<u>u下划线</u>
<s>s删除线</s>
<sup>sup上角标</sup>
<sub>sub下角标</sub>
<!-- br:换行 -->
<br>
<!-- hr:水平线 -->
<hr>
</body>
</html>
页面显示：
4、段落标签
用于定义一个独立的段落，每个段落独占一行，并且段落之间回有一定的间隙。
语法格式为：
<p align="center">这是一个段落</p>
属性：
align:值：center、left、right、justify
| 值 | 描述 |
|---|---|
| center | 居中对齐内容。 |
| left | 左对齐内容。 |
| right | 右对齐内容。 |
| justify | 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 |
5、图像标签
在网页中显示一张图片，常见的图片格式有JPEG(JPG)，PNG，GIF...
基本语法格式：
<img src="gaoyuanyuan.jpg">
属性：
| 属性 | 值 | 说明 |
|---|---|---|
| src | url | 图像资源的地址 |
| alt | 替代文字 | 图片没有加载成功时的提示 |
| title | 图片信息 | 鼠标悬浮时的提示信息 |
| width | 像素（px） | 图像宽度 |
| height | 像素（px） | 图像高度 |
代码示例
<img src="gaoyuanyuan.jpg" alt="高圆圆" title="高圆圆" width="100px" height="100px">
绝对路径和相对路径:
- 绝对路径是指一个完整的可以从开头找到这个图片的路径
- 相对路径是指相对于当前的页面所在的路径
绝对路径的写法：
<img src="E:htmlimagesgaoyuanyuan.jpg">
相对路径的写法：
<!--当前目录:图片和html文件在同一个文件夹下-->
<img src="gaoyuanyuan.jpg">
<!--当前目录:图片和html文件在同一个文件夹下-->
<img src="./gaoyuanyuan.jpg">
<!--当前目录:存储图片的文件夹和html文件在同一个文件夹下-->
<img src="images/gaoyuanyuan.jpg">
<!--当前目录:存储图片的文件夹和html文件在同一个文件夹下-->
<img src="./images/gaoyuanyuan.jpg">
<!--上一级目录:存储图片的文件夹和存储html的文件夹在同一个文件夹中 -->
<img src="../gaoyuanyuan.jpg">
相关说明：
./ 当前目录
../ 回到上一层目录
images/ 进入一层目录
../images/ 回到上一层目录，然后再进入images目录
6、超链接标签（锚标签）
- 超链接，是给任何的html元素添加链接，可以被点击，跳转到某个地址。
基本语法格式:
<a href="http://www.baidu.com>百度一下</a>
属性：
| 属性 | 值 | 说明 |
|---|---|---|
| href | URL | 规定链接指向的页面的 URL。 |
| target | _self | 默认值，在原窗口中打开。 |
| target | _blank | 在新窗口中打开。 |
| target | _top | 在原窗口中打开。 |
- 锚点链接
通过创建锚点链接，用户能够快速定位到目标的内容。
创建步骤：
（1）使用"<a href="#id名">链接文本</a>"创建链接文本。
（2）使用相应的id名称注跳转目标的位置。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#html">html基础知识</a>
<a href="#css">css基础知识</a>
<a href="#js">js基础知识</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="html">HTML</h3>
<p>这里是关于html基础知识的介绍</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="css">CSS</h3>
<p>这里是关于css基础知识的介绍</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="js">JS</h3>
<p>这里是关于js基础知识的介绍</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
7、列表标签
- 无序列表
Html中列表也是常用的元素。无序列表用<ul><li></li></ul>表示。
属性：
| 属性 | 值 | 说明 |
|---|---|---|
| type | disc | 默认值，实心圆点 |
| type | circle | 空心圆点 |
| type | square | 方形 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
</body>
</html>
页面显示:
- 有序列表
有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
属性：
| 属性 | 值 | 说明 |
|---|---|---|
| type | 1、a、A、i、I | 用来设置项目前面的标记 |
| start | 数值 | 排序的起点数值 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="1" start="2">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="a" start="5">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
</body>
</html>
页面显示：
- 自定义列表
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
页面显示：
8、表格标签
表格由 <table> 标签以及一个或多个 tr、th或td 元素组成。每一个<td></td>称为一个单元格，单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
基本语法：
<table>
<tr>
<th>头部一</th>
<th>头部二</th>
</tr>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
table属性：
| 属性 | 值 | 含义 |
|---|---|---|
| border | 像素值(默认为0) | 设置表格的边框宽度 |
| cellspacing | 像素值(默认为2像素) | 设置单元格与单元格边框之间的空白间距宽度 |
| cellpadding | 像素值(默认为1像素) | 设置单元格内容与边框线之间的空白间距宽度 |
| width | 像素值 | 设置表格的宽度 |
| height | 像素值 | 设置表格的高度 |
| align | left、center、right | 设置表格在网页中的水平对齐方式 |
td/th标签常用属性：
| 属性 | 值 | 含义 |
|---|---|---|
| width | 像素值 | 设置单元格的宽度 |
| height | 像素值 | 设置单元格的高度 |
| align | left、center、right | 设置单元格中的内容的水平对齐方式 |
| valign | top、middle、bottom | 设置单元格中的内容的垂直对齐方式 |
| rowspan | 要合并的数量 | 设置要跨行（纵向）合并的单元格数 |
| colspan | 要合并的数量 | 设置要跨列（横向）合并的单元格数 |
table相关标签
caption 标签定义表格标题，必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
thead 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tfoot 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
thead、tbody、tfoot 元素结合起来使用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0" align="center">
<caption><h1>帅哥排行</h1></caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td >彭于晏</td>
<td>男</td>
<td>49</td>
</tr>
<tr align="center">
<td>2</td>
<td>刘德华</td>
<td>男</td>
<td>55</td>
</tr>
<tr align="center">
<td>3</td>
<td>周杰伦</td>
<td>男</td>
<td>45</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td >总结</td>
<td colspan="3"></td>
</tr>
</tfoot>
</table>
</body>
</html>
页面显示：
9、表单标签
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、select、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
基本语法：
<form action="/index" name="registerForm" method="POST" enctype="application/x-www-form-urlencoded">
username: <input type="text" name="username"><br>
password: <input type="password" name="password"><br>
<input type="submit">
</form>
可选属性：
| 属性 | 值 | 说明 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| name | form_name | 规定表单的名称。 |
| method | get、post | 规定用于发送 form-data 的 HTTP 方法。 |
| target | _blank、_self（默认）、_parent、_top、framename | 规定在何处打开 action URL。 |
| enctype | application/x-www-form-urlencoded（默认）、multipart/form-data、text/plain | 规定在发送表单数据之前如何对其进行编码。 |
input标签常用属性
| 属性 | 值 | 说明 |
|---|---|---|
| type | buttoncheckboxfilehiddenimage password adio esetsubmit ext |
规定 input 元素的类型。 分别是：按钮复选文件隐藏图片密码单选重置提交文本 |
| name | field_name | 定义 input 元素的名称。 |
| value | value | 规定 input 元素的值。 |
| required | required | 指示输入字段的值是必需的。 |
| readonly | readonly | 规定输入字段为只读。 |
| size | characters/pixels | input 元素的宽度。 |
| maxlength | number | 规定输入字段中的字符的最大长度。 |
| max | number、date | 规定输入字段的最大值。与 "min" 属性配合使用，来创建合法值的范围。 |
| min | number、date | 规定输入字段的最小值。与 "max" 属性配合使用，来创建合法值的范围。 |
| step | number | 规定输入字的的合法数字间隔。 step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"） |
| checked | checked | 规定此 input 元素首次加载时应当被选中。 |
| disabled | disabled | 当 input 元素加载时禁用此元素。 |
| src | URL | 定义以提交按钮形式显示的图像的 URL。 |
| width | pixels | 定义 input 字段的宽度。（适用于 type="image"） |
| height | pixels | 定义 input 字段的高度。（适用于 type="image"） |
label标签的常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| for | id | 规定 label 绑定到哪个表单元素。 |
| form | formid | 规定 label 字段所属的一个或多个表单。 |
select标签的常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| name | name | 规定下拉列表的名称。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| size | number | 规定下拉列表中可见选项的数目。 |
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表。 |
| required | required | 规定文本区域是必填的。 |
select标签内部option标签的常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| disabled | disabled | 规定此选项应在首次加载时被禁用。 |
| selected | selected | 规定选项（在首次显示在列表中时）表现为选中状态。 |
| value | text | 定义送往服务器的选项值。 |
textarea标签的常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| name | name_of_textarea | 规定文本区的名称。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| cols | number | 规定文本区内的可见宽度。 |
| rows | number | 规定文本区内的可见行数。 |
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该文本区。 |
| required | required | 规定文本区域是必填的。 |
| maxlength | number | 规定文本区域的最大字符数。 |
| placeholder | text | 规定描述文本区域预期值的简短提示。 |
| readonly | readonly | 规定文本区为只读。 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/index" name="registerForm" method="POST" enctype="application/x-www-form-urlencoded" target="_top">
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" name="username" placeholder="username" required></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="password" name="password" placeholder="password" required></td>
</tr>
<tr>
<td><label for="email">邮箱：</label></td>
<td><input type="text" name="email" placeholder="email" required pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"></td>
</tr>
<tr>
<td><label for="age">年龄：</label></td>
<td><input type="number" max="120" min="0" step="1"></td>
</tr>
<tr>
<td><label for="mobilephone">手机：</label></td>
<td><input type="text" placeholder="mobilephone" pattern="^1[3|4|5|7|8][0-9]{9}$"></td>
</tr>
<tr>
<td><label for="gender">性别：</label></td>
<td><input type="radio" name="gender" checked>男<input type="radio" name="gender">女</td>
</tr>
<tr>
<td><label for="hobby">爱好</label></td>
<td><input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">篮球<input type="checkbox" name="hobby">排球</td>
</tr>
<tr>
<td><label for="address">地址</label></td>
<td>
<select name="address" id="address">
<option value="请选择一个省份" disabled>请选择一个省份</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
<option value="山东省">山东省</option>
<option value="福建省">福建省</option>
</select>
</td>
</tr>
<tr>
<td><label for="avatar">默认头像：</label></td>
<td><input type="image" src="gaoyuanyuan.jpg" width="100px" height="100px"></td>
</tr>
<tr>
<td><label for="newavatar">修改头像：</label></td>
<td><input type="file"></td>
</tr>
<tr>
<td><label for="introduction">自我介绍：</label></td>
<td><textarea name="introduction" id="introduction" cols="22" rows="10" placeholder="自我介绍"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
页面显示：
10、特殊字符
在html中，有些特殊字符是需要用html语言表示出来的。如下表格所示：
| HTML 原代码 | 含义 |
|---|---|
| 空格 | |
| > | 大于号 (>) |
| < | 小于号 (<) |
| " | 引号 (") |
| ® | 注册商标(®) |
| © | 版权(© ) |
11、iframe
iframe 框架用于在网页内显示网页。
基本语法格式：
<iframe src="URL"></iframe>
属性：
| 属性 | 值 | 含义 |
|---|---|---|
| width | px , % | 指定框架的宽度 |
| height | px , % | 指定框架的高度 |
| scrolling | yes,no,auto | 是否显示滚动条 |
| frameborder | 1, 0 | 是否显示边框 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" frameborder="0" height="500px" width="500px"></iframe>
<iframe src="http://www.taobao.com" frameborder="1" height="500px" width="500px" scrolling="no"></iframe>
</body>
</html>
页面显示：
12、块级标签和内联标签
body里面分为两类标签：块级标签和内联标签。
-
块级标签：<p><h1><table><ol><ul><form><div>
特点：
（1）总是在新行上开始；
（2）高度，行高以及外边距和内边距都可控制；
（3）宽度缺省是它的容器的100%，除非设定一个宽度。
（4）它可以容纳内联元素和其他块元素 -
内联标签：<a><input><img><sub><sup><textarea><span>
特点：
（1）和其他元素都在一行上；
（2）高，行高及外边距和内边距不可改变；
（3）宽度就是它的文字或图片的宽度，不可改变
（4）内联元素只能容纳文本或者其他内联元素
内联元素：
（1）设置宽度width 无效。
（2）设置高度height 无效，可以通过line-height来设置。
（3）设置margin 只有左右margin有效，上下无效。
（4）设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。