zoukankan      html  css  js  c++  java
  • HTML笔记——常用标签总结

    HTML

    先看下最简单的HTML文件。

    <!DOCTYPE HTML>
    <html>
    <body>
    
    <h1>最大号的标题</h1>
    
    <p>一个段落。</p>
    
    </body>
    </html>
    

    上面基本上就可以看到HTML的结构是怎么样的了。<body>标签主要用来放需要显示的内容,有点类似C文件中的程序部分,与之对应的<head>,主要用来引入写好的JavaScript脚本或者CSS文件等。<h1><p>分别是用于标记标题与段落的标签,分别是header与paragraph的简写,下面会着重介绍各类标签对应的含义与作用。

    HTML元素

    HTML元素指的是从开始标签到结束标签的代码,开始标签(start tag)也被称为开放标签(opening tag),结束标签(end tag)也被称为闭合标签(closing tag)。元素的内容就是开始和结束标签之间的内容,某些HTML元素的内容可以是空内容(empty content)。空元素在开始标签中进行关闭,如<br />,自己就是开始标签,也是结束标签。简单的元素例子:

    <p>HTML标签的例子,前面的是开始标签,后面这个是结束标签。</p>
    

    此外,大多数HTML元素可以拥有属性,例如<img src="w3school.jpg" width="104" height="142" />,这里的属性就是src

    大多数HTML元素可以嵌套,即包含其他HTML元素,如:

    <body>
    <p>first paragraph.</p>
    </body>
    

    另外,注意最好使用小写的标签,这是W3C万维网联盟建议的。

    下面详细介绍下一些常用的标签。

    标题

    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3> 三级标题 </h3>
    

    h+数字,用来标记标题,数字范围是1~6。浏览器会自动在标题前后添加空行,通常块级元素都会这样额外添加空行。

    另外,搜索引擎会根据标题来为网页编织索引,所以选好标题能够让你的网站更加容易出现在用户面前。

    段落

    <p> 段落 </p>
    

    用来标记段落。

    链接

    <a href="https://www.cnblogs.com/yejianying/">简单的链接</a>
    

    这个标签用来修饰链接,在href中填入想要跳转的地址。

    图像

    <img src="w3school.jpg" width="104" height="142" />
    

    这个标签用来显示图像。

    水平线

    <hr />标签用来在HTML页面中创建水平线,可以用来分隔内容。

    注释

    <!-- 这里写入HTML的注释 -->

    标签的属性

    这里补充一些关于标签的属性的信息。

    属性总是以名称/值的形式出现,例如name='value',注意属性值必须加引号,可以是单引号也可以是双引号,如果属性值中就包含了双引号,那么必须使用单引号,如:name='Bill "HelloWorld" Gates'

    常用的属性:

    截图来自W3School

    注意不是所有的属性都可以用的,下面的属性就应当避免使用:

    截图来自W3School

    上面这类属性应当使用样式代替。

    样式 style

    简单的style例子:

    <html>
    
    <body style="background-color:yellow">
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
    </body>
    
    </html>
    

    这里定义了不同的标签对应的背景颜色。

    背景色

    例子:

    <html>
    
    <body style="background-color:yellow">
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
    </body>
    
    </html>
    

    使用方式如上,这个样式替代了原本的bgcolor属性。

    字体颜色和尺寸

    例子:

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

    以上样式替换了原本的<font>标签。

    文本对齐

    <html>
    
    <body>
    <h1 style="text-align:center">This is a heading</h1>
    <p>The heading above is aligned to the center of this page.</p>
    </body>
    
    </html>
    

    这个样式替换了原本的align属性。

    格式化

    文本格式化标签

    标签 描述
    <b> 定义粗体文本。
    <big> 定义大号字。
    <em> 定义着重文字。
    <i> 定义斜体字。
    <small> 定义小号字。
    <strong> 定义加重语气。
    <sub> 定义下标字。
    <sup> 定义上标字。
    <ins> 定义插入字。
    <del> 定义删除字。
    <s> 不赞成使用。使用 <del> 代替。
    <strike> 不赞成使用。使用 <del> 代替。
    <u> 不赞成使用。使用样式(style)代替。

    表格来自W3School

    “计算机输出”标签

    标签 描述
    <code> 定义计算机代码。
    <kbd> 定义键盘码。
    <samp> 定义计算机代码样本。
    <tt> 定义打字机代码。
    <var> 定义变量。
    <pre> 定义预格式文本。
    <listing> 不赞成使用。使用 <pre> 代替。
    <plaintext> 不赞成使用。使用 <pre> 代替。
    <xmp> 不赞成使用。使用 <pre> 代替。

    表格来自W3School

    引用、引用和术语定义

    标签 描述
    <abbr> 定义缩写。
    <acronym> 定义首字母缩写。
    <address> 定义地址。
    <bdo> 定义文字方向。
    <blockquote> 定义长的引用。
    <q> 定义短的引用语。
    <cite> 定义引用、引证。
    <dfn> 定义一个定义项目。

    表格来自W3School

    短引用

    <q>定义短的引用,浏览器通常会为短引用加上引号。使用的例子:

    <p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>
    

    长引用

    <blockquot>,通常是长的引用,例如说段落,通常浏览器会缩进处理。

    注释

    <!-- 在此处写注释 -->
    

    就这样用,可以注释多行,相当于C/C++里面的/* */

    此外还有条件注释:

    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->
    

    这个就是只有在IE8浏览器条件下才会执行的代码,如果不是IE8浏览器,那么注释就会起作用,代码不执行。

    表格

    不建议直接手写表格,网络上有很多表格生成器,建议直接生成需要的表格。

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

    上面代码的效果:

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    <table>标签用来定义表格,每个表格的行对应<tr>,每行被分割为若干个单元格<td>td指表格数据table data,即数据单元格的内容,内容只要是前面提到的HTML元素基本都可以放进去。border是边框属性,用来决定要不要显示,显示多粗的边框。

    此外,可以在表格上方添加表头:

    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</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>
    
    Heading Another Heading
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    注意,如果需要显示空单元格的话不能够不填写内容,应该填写一个空占位符,否则在某些浏览器里面可能无法正常显示:

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td></td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    
    row 1, cell 1 row 1, cell 2
    row 2, cell 2
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    
    row 1, cell 1 row 1, cell 2
      row 2, cell 2

    列表

    无序列表

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    
    • Coffee
    • Milk

    有序列表

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    
    1. Coffee
    2. Milk

    定义列表(只是记录)

    <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

    自定义列表不只是一列项目,是项目和注释的组合,但是这个我也不太懂怎么用,平时也没怎么碰到,所以这里只是记录下存在这么个列表。

    参考

    W3School的HTML教程:绝大部分内容来自此网站,如果是初学者建议直接看这个网站的内容,我这里只是作为自己的笔记方便平时查东西用的

  • 相关阅读:
    两款命令行下的翻译工具: sdcv & translateshell
    谷歌语言标准中,C++成绝对的佼佼者 狼人:
    12个优秀的云计算操作系统 狼人:
    幻灯片在网页设计中应用的21个优秀案例 狼人:
    对Web开发人员有用的8个网站 狼人:
    网页设计师应向肖像画家吸取的11个理念 狼人:
    揭秘Facebook的系统架构 狼人:
    Chrome或取代Firefox成Ubuntu默认浏览器 狼人:
    Gnome 3.2 发布计划及新功能 狼人:
    MyFaces Core v2.0.7/2.1.1 发布,JSF框架 狼人:
  • 原文地址:https://www.cnblogs.com/yejianying/p/html_note.html
Copyright © 2011-2022 走看看