比较好的学习链接
块级元素和行内元素
1.行内元素
详细解释
一个行内元素只占据它对应标签的边框所包含的空间。
示例
<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
这里的span就是行内元素，他不会另起一行，
2.块级元素
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”
示例
<p>This is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>
说明：
格式
默认情况下，块级元素会新起一行，而行内元素不会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
一般情况下，行内元素只能包含数据和其他行内元素。
这里的p就是块级元素
块级元素只能出现在(<body>)中，不像行内元素可以出现在<head>等当中
基本元素介绍
1.基础元素：无论在什么 HTML document 里，基础元素都是其骨干。文档的根（root），其余都是这元素的后代
2.文档元素：源数据，文档的编码等内容，说明性的东西
<base> HTML中的Base元素(<base>)指定文档里所有相对URL地址的基础URL。一份文档最多一个<base>元素。
<head> HTML Head 元素 (<head>) 规定文档相关的通用信息（元数据），包括文档标题、样式或脚本的链接或定义。
<link> HTML 中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
<meta> HTML Meta 元素 (<meta>) 用来表达任何其他 HTML 元相关元素 (<base>, <link>, <script>, <style> 或者 <title>) 等无法表达的信息。
<style> HTML的<style>元素包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内，通常是CSS的格式。
<title> HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。
3.内容分区
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 标题(Heading)元素有六个不同的级别，<h1> 是最高级的，而 <h6> 则是最低的。 一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表（就
4.文本内容
<div> HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)
<dd> 用来指明一个描述列表 (<dl>) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt> 元素。
<dl> 描述列表元素 是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。
<dt> 用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素， 然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。
<ol> 或者 HTML 有序列表 Element 表示多个有序列表项。
<li> HTML 列表条目元素 用于表示列表里的条目。它必须被包含在一个父元素里：一个有顺序的列表(<ol>)，一个无顺序的列表(<ul>)
<p> HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素
5.脚本和图片以及超链接
<script src="脚本文件名"> <script src="jquery.js"> 引入脚本文件
<script type="text/javascript"> 自定义脚本文件
<image src = ""> html 中的图片
<a href="https://developer.mozilla.org">MDN</a> 通过href 属性定义了一个超链接，点击会进行跳转
6.表单
表单元素有
-
<form>表示了文档中的一个区域，这个区域中包含有交互控制元件，用来像web服务器提交信息 -
<input>输入文本框，根据其特性，也可能是按钮型显示 -
<button>按钮 -
<lable>定义一个标记 -
<option>：定义下拉悬着
-<select>：下拉框悬着性的东西
-<textarea>：文本区，文字是可以换行的，相对input可以展示的东西更多
<!-- 一个简单的表单，这个表单会发送一个 GET 请求 -->
<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- 一个简单的表单，发送 POST 请求 -->
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- 使用 fieldset, legend, and label 的表单 -->
<form action="" method="post">
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
</fieldset>
</form>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
效果：
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
效果：
更多表单的实例
7.表格
<table>表格最外层
<thead><td></td><td></td></thead>表头
<tbody>表格体，不定义的话浏览器会默认加上
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
8.框架元素
框架元素有ifame ,在页面中嵌入其他页面
<body>
<iframe src="http://www.runoob.com">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</body>
网友评论