HTML标签速记整理W3C
标题 <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的更多相关文章
- HTML基本结构与标签总结整理篇
HTML基本结构与标签总结整理篇 前言:这是笔者的学习总结与整理,如果有错误或疑问的地方,欢迎指正与讨论!另:此文会不定时更新~ 1.了解HTML 学习前端技术,必然涉及三个方面:html(结构).c ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- Input标签使用整理
0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...
- HTML常用标签(整理)
超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言.现在应用主流是HTML 4.01版本,发布于1999年,为W3C推荐标准.HTML ...
- Thymeleaf 常用th标签基础整理
(一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- phpcms v9 标签含义整理
{template "content","header"} ---------- 调用根目录下phpcms\template\content\header ...
- phpcms v9 模板标签说明整理
1.{template "content","header"} 2.网站网址调用:{siteurl($siteid)}: 3.标签get:分页,{pc:get ...
随机推荐
- return, break and continue
最近学习多线程看到了一个描述不太准确的地方,让我对return break continue个语句的不同开始详细了解了一番,之前只是知道怎么使用,不是很深入研究,基本遇到了跳出就用return来解决全 ...
- 第一个JavaScript代码
既然我们的CSS就必须要要放再专门的style标签内 那么javascript也需要放在子级的标签内,那就是script标签内 在页面中,我们可以在body标签中放入<script type= ...
- Azure 负载均衡器介绍
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. Azure 负载均衡器 ...
- linux下的线程学习(二)
#include <iostream> #include <pthread.h> void cleanup(void *arg) { printf("cleanup: ...
- 微软Charting图表控件 System.Web.UI.DataVisuliztion.Charting
一.概述 基于.NET Framework 3.5 SP1的图表控件--Chart,可在WinForm和WebForm下使用!需要引入System.Web.DataVisualization.dll ...
- MD5随机盐值生成法
public class Test3 { /** * 生成含有随机盐的密码 */ public static String generate(String password) { Random r = ...
- cocos2d-x3.0 后配置信息重置
原文地址:http://blog.csdn.net/qqmcy/article/details/37722689 近期遇到这种一个问题,cocos设置setup.py中ndk.sdk.ant时设置的路 ...
- android中反射技术使用实例
在计算机科学领域.反射是指一类应用,它们能够自描写叙述和自控制.也就是说,这类应用通过採用某种机制来实现对自己行为的描写叙述(self-representation)和监測(examination), ...
- CSS样式命名规则
1.样式命名外 套: wrap主导航: mainnav子导航: subnav页 脚: footer整个页面: content页 眉: header页 脚: footer商 标: label标 题: t ...
- 1588. [HNOI2002]营业额统计【平衡树-splay 或 线段树】
Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...