HTML学习

一、简介

• 什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
html使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

• 标签

HTML 标签通常是成对出现的，比如 < b > 和 < /b >
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

二、基础

• 标题

标题是通过< h1 > ---------< h6> 来定义的
是由大到小的的
< hr /> -----添加水平线
< ! ---- --> -=-----注释

• 段落

< p>l来定义段落

• 图像

<img src ='源’ alt =" title=" width=" height="*/>
【src -----图片的地址】
【alt -----当图片无法显示时，将文字显示在图片位置上】
【title-----鼠标在图上时显示文字

三、元素

• 元素语法

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

• 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
< br> 就是没有关闭标签的空元素（< br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 < br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。
即使 < br> 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。

四、属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

五、段落

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br> 标签
eg:< p>这个< br>段落< br>演示了分行的效果< /p>

六、文本格式化

< b> 定义粗体文本
< em> 定义着重文字
< i> 定义斜体字
< small> 定义小号字
< strong> 定义加重语气
< sub> 定义下标字
< sup> 定义上标字
< ins> 定义插入字
< del> 定义删除字
< code> 定义计算机代码
< kbd> 定义键盘码
< samp> 定义计算机代码样本
< var> 定义变量
< pre> 定义预格式文本
< abbr> 定义缩写
< address> 定义地址
< bdo> 定义文字方向
< blockquote> 定义长的引用
< q> 定义短的引用语
< cite> 定义引用、引证
< dfn> 定义一个定义项目。

七、链接

HTML使用标签 < a>来设置超文本链接
在标签< a> 中使用了href属性来描述链接的地址
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带有下划线；点击链接时，链接显示为红色并带有下划线。（如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。）

• 链接语法

使用 target 属性，你可以定义被链接的文档在何处显示。
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

< p> < a href="/index.html">本文本< /a> 是一个指向本网站中的一个页面的链接。< /p>
< p>创建图片链接:
< a href="//www.runoob.com/html/html-tutorial.html">
< img border=“10” src=“smiley.gif” alt=“HTML 教程” width=“32” height=“32”>< /a>< /p>

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

八、头部

使用 < base> 定义页面中所有链接默认的链接目标地址;
使用 < meta> 元素来描述HTML文档的描述，关键词，作者，字符集等;
< head> 元素包含了所有的头部标签元素。在 < head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息；可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。

• title 标签

定义了浏览器工具栏的标题；
当网页添加到收藏夹时，显示在收藏夹中的标题；
显示在搜索引擎结果页面的标题；

• base标签

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

• link标签

< link> 标签定义了文档与外部资源之间的关系。
< link> 标签通常用于链接到样式表:

• style标签

标签定义了HTML文档的样式文件引用地址.
在< style> 元素中也可以直接添加样式来渲染 HTML 文档

• mate标签

meta标签描述了一些基本的元数据。
< meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
< meta> 一般放置于 < head> 区域

• script标签标签用于加载脚本文件

九、HTML&CSS

• 使用css

CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 < head> 区域使用< style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件;最好的方式是通过外部引用CSS文件
[eg:
< head>
< link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
< /head>]

十、图像

< img src=“smiley.gif” alt=“Smiley face” style=“float:left” width=“32” height=“32”> 一个带图片的段落，图片浮动在这个文本的左边。
< map> 定义图像地图
< area> 定义图像地图中的可点击区域
【< map name=“planetmap”>
< area shape=“rect” coords=“0,0,82,126” alt=“Sun” href=“sun.htm”>
< area shape=“circle” coords=“90,58,3” alt=“Mercury” href=“mercur.htm”>
< area shape=“circle” coords=“124,58,8” alt=“Venus” href=“venus.htm”>
< /map>
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

十一、表格

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

单元格合并
< h4>单元格跨两列:< /h4>
< table border=“1”>
< tr>
< th>Name< /th>
< th colspan=“2”>Telephone< /th>-----colspan合并列
< /tr>
< tr>
< td>Bill Gates< /td>
< td>555 77 854< /td>
< td>555 77 855< /td>
< /tr>
< /table>
< h4>单元格跨两行:< /h4>
< table border=“1”>
< tr>
< th>First Name:< /th>
< td>Bill Gates< /td>
< /tr>
< tr>
< th rowspan=“2”>Telephone:< /th> ----rowspan-合并行
< td>555 77 854< /td>
< /tr>
< tr>
< td>555 77 855</ td>
< /tr>
< /table>

单元格跨两列:

Name	Telephone
Bill Gates	555 77 854	555 77 855

单元格跨两行:

First Name:	Bill Gates
Telephone:	555 77 854
	555 77 855

十二、列表

• 有序列表

有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。
列表项使用数字来标记。
< ol>
< li>Coffee< /li>
< li>Milk< /li>
< /ol>
< ol type=“A”>----用来定义类型

• 自定义列表

每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。

• 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 < ul> 标签，内容用< li>进行编写

十三、布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"></div>
 
</div>
 

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;"></td>
</tr>
</table>
</body>
</html>

十四、表单

• 文本

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

• 密码

<input type="password" name="pwd">

• 单选按钮

<input type="radio" name="sex" value="male">Male<br>

• 复选框

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

• 提交按钮

<input type="submit" value="Submit">

表单标签

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

十五、框架

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>/*设置高度宽度*/
<iframe src="demo_iframe.htm" frameborder="0"></iframe>/*移除边框*/
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

十六、脚本

<script> doument.write("HELLO")</script>
<noscript>不支持脚本</noscript>

十七、插件

插件可以通过 < object> 标签或者 < embed> 标签添加在页面中。
我们可以使用 < video> 和 < audio> 标签来显示视频和音频

< object>元素：

<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>

< embed> 元素【< embed>没有关闭标签】