HTML快速入门

好久不见. 提交于 2020-02-05 03:40:15

html

概念

HTML (Hyper Text Markup Language) 超文本标记语言:使用标记标签来描述网页的一种语言。

元素

概念

  • 一个HTML元素 (element) 的基本组成:
    在这里插入图片描述
  • 属性值用“双引号”,若属性值内包含双引号,则用“单引号”。
  • 多个属性声明之间用“空格”隔开。
  • HTML参考手册:提供详细的HTML标签及其属性的用法。
  • 适用于大多数HTML标签的属性:
    在这里插入图片描述

分类

top-level element (顶级元素)
  • 包括html, head, body, frameset等。
  • 属于高级块级元素。
block-level element (块级元素)
  • 包括div, p(段落), h1~h6(标题), ul(无序列表), ol(有序列表), table(表格), form(表单), hr(水平线)等;更多块级元素
  • 新行开始并以块显示,高度宽度可设置,可用Box model说明。
inline element (内联元素)
  • 包括span, a(链接), img(图片), li(列表的项), em(强调), br(换行)等。
  • 不换行显示,高度不可设置,宽度是自身宽度;一言以蔽之:“任何不是块级元素的可见元素都是内联元素”。

形式

<!DOCTYPE html>  <!--HTML5文档声明-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <!--说明文档类型和字符集-->
    <meta name="revised" content="Tianyu Chen,2/3/20">    <!--说明作者和编辑时间-->
    <meta name="description" content="HTML examples">    <!--文档描述-->
    <title>test</title>    <!--文档标题-->
    <style>
        h1 {background-color: red;}
        p {background-color: blue;}
    </style>
</head>
<body>
    <h1>My First Header.</h1>  <!--标题-->
    <br />  <!--换行-->
    <p>My First Paragraph.</p>   <!--段落-->
    </body>
</html>

查询

<!DOCTYPE html>  <!--HTML5文档声明-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <!--说明文档类型和字符集-->
    <meta name="revised" content="Tianyu Chen,2/3/20">    <!--说明作者和编辑时间-->
    <meta name="description" content="HTML examples">    <!--文档描述-->
    <title>test</title>    <!--文档标题-->
    <style>
        h1 {background-color: red;}
        p {background-color: blue;}
    </style>
</head>

<body>
    <h1>My First Header.</h1>  <!--标题-->
    <br />  <!--换行-->
    <p>My First Paragraph.</p>   <!--段落-->
    <br />
    <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>
    <br />
    <ul>   <!--无序列表-->
        <li>Unordered List1-1</li>
        <li>Unordered List1-2</li>
    </ul>
    <br />
    <ol>  <!--有序列表-->
        <li>Ordered List2-1</li>
        <li>Ordered List2-2</li>
    </ol>
    <form>  <!--表单-->
        First name:  <br>
        <input type="text" name="firstname">  <br>
        Last name:  <br>
        <input type="text" name="lastname">
    </form> 
    <br />

    <hr />  <!--水平线-->

    <a href>My First Link.</a>   <!--链接-->
    <br /><br />
    <img src="/picture/test.jpg" width="128" height="128" />   <!--图像-->
    <br /><br />
    <embed height="100" width="100" src="song.mp3" />    <!--音频,HTML5 标签-->
    <br /><br />
    <embed height="100" width="100" src="movie.mp4" />    <!--视频,HTML5 标签-->
</body>
<html>

补充

W3C

  • W3C (World Wide Web Consortium) 万维网联盟:Web技术领域最具权威和影响力的国际中立性技术标准机构。
  • 创建于1994年,已发布了200多项影响深远的Web技术标准及实施指南,如HTML、XML等。

参考

HTML 教程
万维网联盟

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!