zoukankan      html  css  js  c++  java
  • 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> 元素来创建多列布局:

  • 相关阅读:
    在独立的文件里定义WPF资源
    Irrlicht 3D Engine 笔记系列 之 教程6- 2D Graphics
    Java实现二叉树的创建、递归/非递归遍历
    NDK在windows下的开发环境搭建及开发过程
    硬件路由转发原理浅析
    ubuntu下vim中内容拷贝到浏览器
    python调用Java代码,完毕JBPM工作流application
    C++组合通信
    linux杂谈(十八):DNSserver的配置(一)
    Codeforces 550D. Regular Bridge 构造
  • 原文地址:https://www.cnblogs.com/illusory/p/9812474.html
Copyright © 2011-2022 走看看