HTML笔记（一）

65 阅读 0 评论 43 点赞

我是靠谱客的博主听话花生，最近开发中收集的这篇文章主要介绍HTML笔记（一），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

不同计算机使用的快捷键不同，我的是apple+alt+i 看代码开发窗口，调试菜单,apple+alt+u 看源代码。

HTML都是成对出现的标签：<opening tag>..元素..</closing tag> ；有的元素具有 empty content(空内容)，空元素在opening tag中关闭，以开始标签的结束为结束；大部分HTML元素可拥有属性。

通常格式是：

<html>...

<head>..

</head>..

<body>..

</body>..

</html>

下面是对HTML的一些简单学习记录：

<body>的内容将在浏览器中显示;<h1>里面的数字显示字号大小。

<!DOCTYPE html> 浏览器中正确显示网页，这里是正确显示HTML5。<!DOCTYPE>没有结束标签，不区分大小写（推荐小写）, 写在第一行。

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

注意：一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）

HTML编辑器：

每一种操作系统都带有简单的文本编辑器：

Windows 用户可以使用记事本；

Linux 用户可以选择几种不同的文本编辑器，如 vi、vim 或者 emacs ；

Mac 用户可以使用 OS X 预装的 TextEdit

//吐槽一下自己，之前Linux的vi用的好好的，干嘛脑子进水换苹果。。。不会用emacs啊，啊，啊，啊

HTML基础：

<a href="http://www.csdn.net">这是一个链接使用了 href 属性</a>

中间文字“这是一个链接使用了 href 属性”有超链接下划线，点击之出现网站http://www.csdn.net

图像：地址，宽度，长度

1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下： <img src="file:///f:/*.jpg" width="300" height="120"/>

2、*.html 文件跟 *.jpg 图片在相同目录下： <img src="*.jpg" width="300" height="120"/>

3、*.html 文件跟 *.jpg 图片在不同目录下：

a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：

       <img src="image/*.jpg/"width="300" height="120"/>

b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：

       <img src="../image/*.jpg/"width="300" height="120"/>

4、如果图片来源于网络，那么写绝对路径：

// 网源：http://m.sohu.com/n/413278149/

属性：HTML可以设置属性

在opening tag中进行设置，属性总是以名称/值对的形式出现，比如： name="value"

常用双引号，但是单引号也没问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

按字母顺序排列

New : HTML5新标签

标签	描述
<!--...-->	定义注释
<!DOCTYPE>	定义文档类型
<a>	定义超文本链接
<abbr>	定义缩写
<acronym>	定义只取首字母的缩写，不支持HTML5
<address>	定义文档作者或拥有者的联系信息
<applet>	HTML5中不赞成使用。定义嵌入的 applet。
<area>	定义图像映射内部的区域
<article>New	定义一个文章区域
<aside>New	定义页面的侧边栏内容
<audio>New	定义音频内容
<b>	定义文本粗体
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	HTML5不支持，不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文字方向
<big>	定义大号文本，HTML5不支持
<blockquote>	定义长的引用
<body>	定义文档的主体
<br>	定义换行
<button>	定义一个点击按钮
<canvas>New	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	定义表格标题
<center>	HTML5不支持，不赞成使用。定义居中文本。
<cite>	定义引用(citation)
<code>	定义计算机代码文本
<col>	定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<command>New	定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>	定义定义列表中项目的描述
<del>	定义被删除文本
<details>New	用于描述文档或文档某个部分的细节
<dfn>	定义定义项目
<dialog>New	定义对话框，比如提示框
<dir>	HTML5不支持，不赞成使用。定义目录列表。
<div>	定义文档中的节
<dl>	定义列表详情
<dt>	定义列表中的项目
<em>	定义强调文本
<embed>New	定义嵌入的内容，比如插件。
<fieldset>	定义围绕表单中元素的边框
<figcaption>New	定义<figure> 元素的标题
<figure>New	规定独立的流内容（图像、图表、照片、代码等等）。
<font>	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<footer>New	定义 section 或 document 的页脚。
<form>	定义了HTML文档的表单
<frame>	定义框架集的窗口或框架
<frameset>	定义框架集
<h1> to <h6>	定义 HTML 标题
<head>	定义关于文档的信息
<header>New	定义了文档的头部区域
<hr>	定义水平线
<html>	定义 HTML 文档
<i>	定义斜体字
<iframe>	定义内联框架
<img>	定义图像
<input>	定义输入控件
<ins>	定义被插入文本
<kbd>	定义键盘文本
<keygen>New	规定用于表单的密钥对生成器字段。
<label>	定义 input 元素的标注
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目
<link>	定义文档与外部资源的关系
<map>	定义图像映射
<mark>New	定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>	不赞成使用。定义菜单列表。
<meta>	定义关于 HTML 文档的元信息。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<nav>New	定义导航链接的部分
<noframes>	定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>New	定义不同类型的输出，比如脚本的输出。
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>New	定义运行中的进度（进程）。
<q>	定义短的引用。
<rp>New	<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New	<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>	不赞成使用。定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>New	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>New	<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>	定义文档中的节。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。
<strong>	定义强调文本。
<style>	定义文档的样式信息。
<sub>	定义下标文本。
<summary>New	<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>New	定义日期或时间，或者两者。
<title>	定义文档的标题。
<tr>	定义表格中的行。
<track>New	<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<ul>	定义无序列表。
<var>	定义文本的变量部分。
<video>New	<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New	规定在文本中的何处适合添加换行符。