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> 元素来创建多列布局:

原文地址:https://www.cnblogs.com/illusory/p/9812474.html

时间: 2024-11-08 21:17:49

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

HTML5/HTML - meta标签的整理

(文章还在修改完善中,文中只整理出了部分标签)需要的可以参考下 : html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息.下面是一些有关标记的例子及解释. meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.声明文档使用的字符编码 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&

html5 meta标签属性整理

html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下,终于找个个描述得比较全的网站(点击进入),本人有点强迫症,硬是把它写进自己的博客,当然这还不是最全的,以后会慢慢修改至完整. 基本标签 声明文档使用的字符编码 <meta charset='utf-8'> 声明文档的兼容模式 //指示IE以目前可用的最高模式显示内容 <meta http-

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

推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一个滚动的文本字幕,应用于文字.图片.表格. DIV+CSS图片不间断滚动jquery特效,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片). 使用方法如下: 1.加载JavaScript. 1 <script type=&qu

Thymeleaf 常用th标签基础整理

(一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签

CSS3的几个标签速记3

transition:CSS3过渡     css3里很好的一个标签,可以非常方便的完成需要很多JS才能完成的动态效果 例语法:transition:width 2S,height 2S,transform 2S; CSS3动画 @keyframes:使一种样式逐渐变为另一种样式的过程 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div 6 { 7 width:100px; 8 height:100px;

html中必备标签及引用W3C标准

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <!--一般用于引用CSS样式和JS脚本语言--> <

最常用的HTML标签 总结整理

body:在网页上要展示出来的页面内容一定要放在body标签中 p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中.标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它. hx:标题标签一共有6个,h1.h2.h3.h4.h5.h6分别为一级标题.二级标题.三级标题.四级标题.五级标题.六级标题.并且依据重要性递减.h1是最高的等级. strong em:标签是为了强调一段话中的关键字时使用,它们的语义是强调.但两者在强调的语气上有区别:e

phpcms v9 模板标签说明整理

{template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字符集 (gbk或者utf-8) {if isset($SEO['title']) && !empty($SEO['title'])} {$SEO['title']}{/if} {$SEO['site_title']} {$SEO['keyword']} {$SEO['description']

phpcms v9 标签含义整理

{template "content","header"}   ----------  调用根目录下phpcms\template\content\header文件{CHARSET}  -------------------------------------字符集 (gbk或者utf-8) {if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['sit