zoukankan      html  css  js  c++  java
  • HTML

    一、什么是 HTML?

    HTML 是用来描述网页的一种语言。

    · HTML 指的是超文本标记语言 (Hyper Text Markup Language)

    · HTML 不是一种编程语言,而是一种标记语言 (markup language)

    · 标记语言是一套标记标签 (markup tag)

    · HTML 使用标记标签来描述网页

    二、HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    · HTML 标签是由尖括号包围的关键词,比如 <html>

    · HTML 标签通常是成对出现的,比如 <b> 和 </b>

    · 标签对中的第一个标签是开始标签,第二个标签是结束标签

    · 开始和结束标签也被称为开放标签闭合标签

    <标签>内容<标签>

    三、HTML 文档 = 网页

    · HTML 文档描述网页

    · HTML 文档包含 HTML 标签和纯文本

    · HTML 文档也被称为网页

    Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

    <!DOCTYPE html>

    <html>

      <body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

    </body>

    </html>

    例子解释

    · DOCTYPE 声明了文档的类型

    · <html> 与 </html> 之间的文本描述网页

    · <body> 与 </body> 之间的文本是可见的页面内容

    · <h1> 与 </h1> 之间的文本被显示为标题

    · <p> 与 </p> 之间的文本被显示为段落

    四、HTML 标题

    HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

    <html>

      <body>

        <h1>This is heading 1</h1>

        <h2>This is heading 2</h2>

        <h3>This is heading 3</h3>

        <h4>This is heading 4</h4>

        <h5>This is heading 5</h5>

        <h6>This is heading 6</h6>

      </body>

    </html>

    请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们

    五、HTML 段落

    HTML 段落是通过 <p> 标签进行定义的。

    <html>

    <body>

      <p>这是段落。</p>

      <p>这是段落。</p>

      <p>这是段落。</p>

      <p>段落元素由 p 标签定义。</p>

    </body>

    </html>

    注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

    提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!

    六、HTML 链接

    HTML 链接是通过 <a> 标签进行定义的。

    <html>

    <body>

      <a href="http://www.baidu.com">百度一下,你就知道</a>

    </body>

    </html> 注释: href 属性中指定链接的地址。

    七、HTML 图像

    HTML 图像是通过 <img> 标签进行定义的。

    <html>

    <body>

    <img src="/i/eg_w3school.gif" width="300" height="120" />

    </body> 注释:/i/eg_w3school.gif表示图像所在的地址,

    </html> width表示图像的宽度,height表示图像的高度。

        上例显示如左图

    注释:图像的名称和尺寸是以属性的形式提供的。

    八、HTML 元素

    1、HTML 文档是由 HTML 元素定义的。

    HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    开始标签

    元素内容

    结束标签

    <p>

    This is a paragraph

    </p>

    <a href="default.htm" >

    This is a link

    </a>

    <br />

    注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。

    2、HTML 元素语法

    · HTML 元素以开始标签起始

    · HTML 元素以结束标签终止

    · 元素的内容是开始标签与结束标签之间的内容

    · 某些 HTML 元素具有空内容(empty content)

    · 空元素在开始标签中进行关闭(以开始标签的结束而结束)

    · 大多数 HTML 元素可拥有属性

    3、嵌套的 HTML 元素

    大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

    HTML 文档由嵌套的 HTML 元素构成。

    例如:<html>

     <body>

     <p>This is my first paragraph.</p>

    </body>

    </html>

    上面的例子包含三个 HTML 元素。

    4、HTML 实例解释

    <p> 元素:

    <p>This is my first paragraph.</p>

    这个 <p> 元素定义了 HTML 文档中的一个段落。

    这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。

    元素内容是:This is my first paragraph。

    <body> 元素:

    <body>

      <p>This is my first paragraph.</p>

    </body>

    <body> 元素定义了 HTML 文档的主体。

    这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

    元素内容是另一个 HTML 元素(p 元素)。

    <html> 元素:

    <html>

    <body>

    <p>This is my first paragraph.</p>

    </body>

    </html>

    <html> 元素定义了整个 HTML 文档。

    这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。

    元素内容是另一个 HTML 元素(body 元素)。

    5、空的 HTML 元素

    没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

    <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

    XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

    在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

    即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

    注意:在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭,即使是空元素。

    6、HTML 提示:使用小写标签

    HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

    九、HTML 属性

    HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息

    属性总是以名称/值对的形式出现,比如:name="value"

    属性总是在 HTML 元素的开始标签中规定。

    属性实例

    HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

    <html>

    <body>

    <a href="http://www.baidu.com">百度一下</a>

    </body>

    </html>

    属性例子 :

    <h1> 定义标题的开始。

    <h1 align="center"> 拥有关于对齐方式的附加信息。

    <html>

    <body>

    <h1 align="center">This is heading 1</h1>

    <p>上面的标题在页面中进行了居中排列</p>

    </body>

    </html>

    十、HTML 标题

    标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

    <h1> 定义最大的标题。<h6> 定义最小的标题。

    注释:浏览器会自动地在标题的前后添加空行。

    注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

    标题很重要

    请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

    搜索引擎使用标题为您的网页的结构和内容编制索引。

    因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

    应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

    十一、HTML 水平线

    <hr /> 标签在 HTML 页面中创建水平线。

    hr 元素可用于分隔内容。

    <html>

    <body>

    <p>hr 标签定义水平线:</p>

    <hr />

    <p>这是段落。</p>

    <hr />

    <p>这是段落。</p>

    <hr />

    <p>这是段落。</p>

    </body>

    </html>

    提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

    十二、HTML 注释

    可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

    注释是这样写的:<!--这是一段注释。注释不会在浏览器中显示。-->

    注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

    提示:合理地使用注释可以对未来的代码编辑工作产生帮助。

    十三、HTML 折行

    如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

    <p>

    To break<br />lines<br />in a<br />paragraph,<br />use the br tag.

    </p>

    <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

    <br> 还是 <br />

    您也许发现 <br> 与 <br /> 很相似。

    XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。

    即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障

    注意:所有连续的空格或空行都会被算作一个空格需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

    十二、HTML 样式

    style 属性用于改变 HTML 元素的样式。

    style 属性的作用:通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素

    <html>

    <body style="

    <h2 style="This is a heading</h2>

    <p style="This is a paragraph.</p>

    </body>

    </html>

    background-color 属性为元素定义了背景颜色:

    ---------------------------------------------------------------------------------------

    font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

    <html>

    <body>

    <h1 style="font-family:verdana">A heading</h1>

    <p>style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

    </body>

    </html>

    ---------------------------------------------------------------------------

    text-align 属性规定了元素中文本的水平对齐方式:

    <html>

    <body>

    <h1 style="text-align:center">This is a heading</h1>

    <p>上面的标题相对于页面居中对齐。</p>

    </body>

    </html>

    十二、HTML 文本格式化实例

    <html>

    <body>

    <b>This text is bold</b>

    <br />

    <strong>This text is strong</strong>

    <br />

    <big>This text is big</big>

    <br />

    <em>This text is emphasized</em>

    <br />

    <i>This text is italic</i>

    <br />

    <small>This text is small</small>

    <br />

    This text contains

    <sub>subscript</sub>

    <br />

    This text contains

    <sup>superscript</sup>

    </body>

    </html>

    文本格式化标签

    标签

    描述

    <b>

    定义粗体文本。

    <big>

    定义大号字。

    <em>

    定义着重文字。

    <i>

    定义斜体字。

    <small>

    定义小号字。

    <strong>

    定义加重语气。

    <sub>

    定义下标字。

    <sup>

    定义上标字。

    <ins>

    定义插入字。

    <del>

    定义删除字。

    <s>

    不赞成使用。使用 <del> 代替。

    <strike>

    不赞成使用。使用 <del> 代替。

    <u>

    不赞成使用。使用样式(style)代替。

     

    十二、HTML 表格结尾有HTML表格标签

    表格由 <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>

     

    HTML 表格和边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

    使用边框属性来显示一个带有边框的表格:

    <table border="1"> 

    <tr> 

    <td>Row 1, cell 1</td>

      <td>Row 1, cell 2</td>

      </tr>

     </table>

    HTML 表格表头

    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本

    <table border="1"> 

    <tr> 

    <th>Header 1</th>

      <th>Header 2</th> 

    </tr>

      <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>

    HTML 表格标签

    标签

    描述

    <table>

    定义表格

    <th>

    定义表格的表头

    <tr>

    定义表格的行

    <td>

    定义表格单元

    <caption>

    定义表格标题

    <colgroup>

    定义表格列的组

    <col>

    定义用于表格列的属性

    <thead>

    定义表格的页眉

    <tbody>

    定义表格的主体

    <tfoot>

    定义表格的页脚

    十二、HTML 列表结尾附有标签描述

    HTML 支持有序、无序和定义列表:

    有序列表:

    <ol>

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ol>

    <ol start="50">

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ol>

    1. Coffee

    2. Tea

    3. Milk

    1. Coffee

    2. Tea

    3. Milk

    无序列表

    <ul>

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ul>

    · Coffee

    · Tea

    · Milk

    HTML 自定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

    浏览器显示如下:

    Coffee

    - black hot drink

    Milk

    - white cold drink

    注意事项 - 有用提示

    提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    HTML 列表标签

    标签

    描述

    <ol>

    定义有序列表

    <ul>

    定义无序列表

    <li>

    定义列表项

    <dl>

    定义列表

    <dt>

    自定义列表项目

    <dd>

    定义自定列表项的描述

    十二、HTML 区块元素

    大多数 HTML 元素被定义为块级元素内联元素

    块级元素在浏览器显示时,通常会以新行来开始(和结束)。实例: <h1>, <p>, <ul>, <table>

    HTML 内联元素

    内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>

    HTML <div> 元素

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

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

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title> 定义了浏览器工具栏的标题

    </head>

    <body>

    <p>这是一些文本。</p> 这是一些文本。

    <div style="color:#0000FF">

    <h3>这是一个在 div 元素中的标题。</h3>这是一个在 div 元素中的标题。

       <p>这是一个在 div 元素中的文本。</p>这是一个在 div 元素中的文本。

    </div>

    <p>这是一些文本。</p>这是一些文本。

    </body>

    </html>

     

     

     

    常用标签汇总

    HTML 基本文档

    <!DOCTYPE html>

     <html>

     <head>

     <title>文档标题</title>

     </head>

     <body> 可见文本... </body>

     </html>

    基本标签(Basic Tags)

    <h1>最大的标题</h1> 

    <h2> . . . </h2>

     <h3> . . . </h3>

     <h4> . . . </h4>

     <h5> . . . </h5>

     <h6>最小的标题</h6> 

    <p>这是一个段落。</p>

     <br> (换行)

    <hr> (水平线)

     <!-- 这是注释 -->

    文本格式化(Formatting)

    <b>粗体文本</b> 

    <code>计算机代码</code> 

    <em>强调文本</em> 

    <i>斜体文本</i> 

    <kbd>键盘输入</kbd> 

    <pre>预格式化文本</pre> 

    <small>更小的文本</small> 

    <strong>重要的文本</strong> 

    <abbr> (缩写) <address> (联系信息)

    <bdo> (文字方向)

    <blockquote> (从另一个源引用的部分)

    <cite> (工作的名称)

    <del> (删除的文本)

    <ins> (插入的文本)

    <sub> (下标文本)

     <sup> (上标文本)

    链接(Links)

    普通的链接:<a href="http://www.example.com/">链接文本</a>

    图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>

    邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a> 

    书签:  <a id="tips">提示部分</a> 

    <a href="#tips">跳到提示部分</a>

    图片(Images)

    <img src="URL" alt="替换文本" height="42" width="42">

    样式/区块(Styles/Sections)

    <style type="text/css">

    h1 {color:red;} p {color:blue;}

    </style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>

    无序列表

    <ul> 

    <li>项目</li>

      <li>项目</li> 

    </ul>

    有序列表

    <ol>

      <li>第一项</li>

      <li>第二项</li> 

    </ol>

    定义列表

    <dl>

      <dt>项目 1</dt>

     <dd>描述项目 1</dd>

     <dt>项目 2</dt>

     <dd>描述项目 2</dd>

    </dl>

    表格(Tables)

    <table border="1">

     <tr> 

    <th>表格标题</th> 

    <th>表格标题</th>

     </tr>

     <tr>

      <td>表格数据</td>

      <td>表格数据</td>

     </tr> 

    </table>

    框架(Iframe)

    <iframe src="demo_iframe.htm"></iframe>

    表单(Forms)

    <form action="demo_form.php" method="post/get"> 

    <input type="text" name="email" size="40" maxlength="50"> 

    <input type="password">

      <input type="checkbox" checked="checked">

      <input type="radio" checked="checked"> 

    <input type="submit" value="Send">

     <input type="reset">

      <input type="hidden"> 

    <select> 

    <option>苹果</option>

     <option selected="selected">香蕉</option>

    <option>樱桃</option>

    </select> 

    <textarea name="comment" rows="60" cols="20"></textarea> 

    </form>

  • 相关阅读:
    S3:代理模式 Proxy
    S2:外观模式 Facade
    S1:适配器 Adapter
    C5:单例模式 Singleton
    C4:原型模式 Prototype
    C3:建造者模式 Builder
    C2:抽象工厂 Abstract Factory
    C1:工厂模式 Factory
    设计模式分类
    数据访问对象模式
  • 原文地址:https://www.cnblogs.com/wdss/p/10764846.html
Copyright © 2011-2022 走看看