标题 <h1>
段落<p>
链接< href="">
图像<img src="">自关闭元素，不需要结束标记
换行标志<br>
HTML 元素以开始标签起始
HTML 元素以结束标签终止
HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成
<html>
<head>
<meta charet="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>标题<\h1>
<p>段落<\p>
<\body>
<\html>

标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题
<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>，--Html标题
<p> 标签作为一个段落显示，该标签的结束标志为 </p>

HTML 空元素
空元素即没有内容的HTML
对大小写不明确

HTML属性：提供附加信息
<a href="http://www.w3cschool.cn">这是一个链接</a>

class 为html元素定义一个或多个类名 类名能在样式文件中引入
id 定义元素的唯一id
style 规定元素的行内样式
title 描述了元素的额外信息 (作为工具条使用) 更多属性如下表
属性 描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制，移动，或链接，或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translateNew 指定是否一个元素的值在页面载入时是否需要翻译

<body> 标签表示 HTML 网页的主体部分，该标签内的内容使用户可以看到的。

一个 HTML 文件只能存在一个 <body> 标签。
标题是 <h1>
段落是<p>This is another paragraph</p>
<p style="font-family:times;color:green">
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色

文本格式化标签
标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。

eg.
<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<a href="url">Link text</a>
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：

锚点跳转
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在指定位子插入图片
<html>

<body>

<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>

<p>
来自 W3School.com.cn 的图像：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>

表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序是<ol>
HTML 块元素<h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

使用 <div> 元素的 HTML 布局
注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

HTML标签速记整理W3C的更多相关文章

  1. HTML基本结构与标签总结整理篇

    HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...

  2. HTML5 <Audio/>标签Api整理（二）

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  3. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  4. Input标签使用整理

    0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...

  5. HTML常用标签（整理）

    超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言.现在应用主流是HTML 4.01版本,发布于1999年,为W3C推荐标准.HTML ...

  6. Thymeleaf 常用th标签基础整理

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...

  7. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  8. phpcms v9 标签含义整理

    {template "content","header"}   ----------  调用根目录下phpcms\template\content\header ...

  9. phpcms v9 模板标签说明整理

    1.{template "content","header"} 2.网站网址调用:{siteurl($siteid)}: 3.标签get:分页,{pc:get ...

随机推荐

  1. vim常用快捷汇总

    移动光标的方法 h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移动一个字符 k 或 向上箭头键(↑) 光标向上移动一个字符 l 或 向右箭头键(→) 光标向右移动一 ...

  2. Android实现身份证拍摄框

    http://blog.csdn.net/lhbtm/article/details/55505668 最近项目需要实现身份证拍照的功能,系统的相机并不能满足需求,故需要自定义相机,先上效果图,使用了 ...

  3. Asp.Net MVC4 系列-- 进阶篇之路由

    原文  http://blog.csdn.net/lan_liang/article/details/22993839 创建一个路由 打开 RouteConfig.cs  ,发现已经创建了一个默认路由 ...

  4. xss challenges平台学习

    虽然在很早之前就接触过xss,有一段时间还就着一本书研究过,但是始终没有实感,掌握的也不够系统,所以现在借着这几个平台再学习一遍 首先来玩一玩xss challenge平台 第一关:http://xs ...

  5. Monster: half man, half beast and very scary.

    Monster: half man, half beast and very scary. 怪物,半人半兽很吓人.

  6. [T-ARA][TIAMO]

    歌词来源:http://music.163.com/#/song?id=439915067 改了一版格式,先尝试一下,考虑到总不能永远只看着拼音读,所以想把发音按照韩文字来写,以后争取看着韩文字唱. ...

  7. 缓存MEMCACHE php调用

    在项目中,涉及大访问量时,合理的使用缓存能减轻数据库的压力,同时提升用户体验.即在非实时性的需求的前提下,一小段时间内(若干秒),用于显示的数据从缓存中获取的,而不用直接读取数据库,能有效的减少数据库 ...

  8. Who are you, What is the science

    Please read:  地球月球有多大? 我们乃至我们赖以生存的地球, 甚至是我们硕大的银河系放到茫茫大宇中真的不过是一粒尘埃, 我们司空见惯的事物,我们习以为常的生活,我们笃定信奉的科学, 是不 ...

  9. UVa 10735 - Euler Circuit（最大流 + 欧拉回路）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. linux 根据端口号查看占用进程的pid

    1.netstat -nap | grep 端口号 2.第一种的可以查看端口号对应的pid,但是会出现pid为空的情况,这种时候用:lsof -i:端口号 3.根据pid查看端口号 netstat - ...