HTML及HTML基础标签

HTML

  1. HTML全称是超文本标记语言,英文全称为:HyperText Markup Language。
  2. HTML的整体框架包括顶层标签()、头部标签()、体标签()。
  3. html的各种标签均为尖括号,一般情况标签都是成对出现,如果标签没有内容的话,则会出现单个,并且标签会有结尾符,如:
  4. html使用形式来进行注释,标签之间可以嵌套,但不可以交错,注释标签之内不可以嵌套注释标签。
  5. 标签不区分大小写。
  6. 空格使用&nbsp来表示。小于号用&lt来表示,大于号用&gt来表示,不等号用&ne来表示。引号用&quot来表示。
  7. html的头标签内使用来让浏览器以utf-8的方式解析页面,使得中文可以正常被识别。

HTML基本标签



 1. <p>:段落标签。
 2. <hr>:单行横线。
 3. <h1>到<h6>:六种不同的标题字体。
 4. <br>:换行。
 5. <b>:粗字体。
 6. <i>:斜字体。
 7. <del>:删除线字体。
 8. <small>:小字体。
 9. <em>:重点文字。
 10. <strong>:加重字体。
 11. <sub>:下标。
 12. <sup>:上标。
 13. <ins>:插入。
 14. <abbr>:缩写。<abbr title="">文本</abbr>,鼠标移到文本上不离开,会显示出来提示符,内容是title里的内容。
 15. <bdo>:可以定义方向的字。<bdo dir="ltr">文本</bdo>,表示文本是从左向右显示,ltr表示从左向右,rtl表示从右向左。
 16. <blockquote>:长的引用。表示标签内的这部分文本是一个引用,在某些浏览器内会自动改变字体、样式等。
 17. <q>:短的引用。表示标签内的这部分文本是一个引用,在某些浏览器内会自动改变字体、样式等。
 18. <cite>:引用、引证。表示标签内的这部分文本是一个引用,在某些浏览器内会自动改变字体、样式等。
 19. <dfn>:一个自定义的项目。<dfn title="">文本</dfn>,表示文本是一个自定义的项目,在某些浏览器内会改变字体、样式等,并且鼠标移到文本上不离开,会显示出来提示符,内容是title里的内容。
 20. <var>:变量。表示标签内的这部分文本是一个变量,在某些浏览器内会自动改变字体、样式等。
 21. <a>:超链接。<a href="" target="">文本</a>,表示点击文本会进行跳转,跳转的地址为href属性内的地址,跳转的方式由target属性决定,target可以为以下几种情况:_self:表示在当前页面打开(默认),_blank表示在新页签打开,_parent表示在父窗口打开,_top表示在包含这个超链接的窗口打开。
 22. <img>:图片拆连接。<img src="" alt=""/>,src表示显示的图片地址,alt表示图片加载失败时替换的文本。
 23. <table>:表格声明。
 24. <tr>:表格的行。
 25. <td>:表格的单元格。常用的属性为border:设置边框的宽度,colspan:跨列单元格,rowspan:跨行单元格。
 26. <th>:表格的表头。
 27. <ul>:无序列表。
 28. <ol>:有序列表。
 29. <dl>:定义列表。<dt>表示定义的词,<dd>表示定义的描述。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单网页测试</title>
</head>
<body>
<p>第一段</p>
<hr/>
<h1>不同字体</h1>
<h2>不同字体</h2>
<h3>不同字体</h3>
<h4>不同字体</h4>
<h5>不同字体</h5>
<h6>不同字体1</h6>
<br/>
<b>粗字体</b>
<i>斜字体</i>
<del>删除字体</del>
<small>小字体</small>
<em>重点文字</em>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<abbr title="这是一个缩写">这是要缩写的内容</abbr>
<bdo dir="rtl">可定义方向的文字,这段是从右到左。</bdo>
<blockquote>长的引用
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
<q>短的引用</q>
<cite>引用、引证:《富春山居图》</cite>
<dfn title="这是一个定义的项目">一个定义项目:定义的项目名称</dfn>
<var>变量</var>
<br/>
<a href="https://www.baidu.com" target="_self">
    <img src="http://www.123.com/qqq.png" alt="图片显示失败了。"/>
</a>
<br/>
<h3>无边框表格</h3>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<h3>有边框,有表头,有夸单元格</h3>
<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
    <tr>
        <td>!</td>
        <td colspan="3">@</td>
    </tr>
</table>
<br/>
<h3>列表</h3>
<table>
    <tr>
        <td>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <ol>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ol>
        </td>
    </tr>
    <tr>
        <td>
            <dl>
                <dt>爸爸</dt>
                <dd>111111111</dd>
                <dt>爸爸2</dt>
                <dd>22222222</dd>
            </dl>
        </td>
    </tr>
</table>
<br/>
<object></object>
</body>
</html>

效果

简单网页测试

第一段


不同字体

不同字体

不同字体

不同字体

不同字体
不同字体1

粗字体 斜字体 删除字体 小字体 重点文字 加重语气 下标字 上标字 插入字 这是要缩写的内容 可定义方向的文字,这段是从右到左。
长的引用 Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
短的引用 引用、引证:《富春山居图》 一个定义项目:定义的项目名称 变量
图片显示失败了。

无边框表格

1 2 3 4
a b c d

有边框,有表头,有夸单元格

1 2 3 4
a b c d
! @

列表

  • 1
  • 2
  • 3
  • 4
  1. a
  2. b
  3. c
  4. d
爸爸
111111111
爸爸2
22222222

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章