Haste makes waste

HTML 基础教程(1)

Posted on Aug 31, 2017 By lijun

掌握HTML的基础，了解HTML的基本结构，常用标签，需要使用的时候知道如何去查的程度就OK了，不需要精通，毕竟自己的目的并不是精通web前端。 下面的内容，来自w3school cn。

1. HTML介绍

1.1 html / css / javascript 三者关系

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Html和CSS的关系</title>
        <style type="text/css">
        h1{
            font-size:12px;
            color:#930;
            text-align:left;
        }
        h2{
            font-size:18px;
            color:#930;
            text-align:left;
        }
        </style>

        <script type="text/javascript">
            var mystr="我是";
            var mychar="JavaScript";
            document.write(mystr + "<br>")
            document.write(mystr + mychar + "的忠实粉丝")
        </script>

    </head>

    <body>
        <h1>Hello World!</h1>
        <h2>Hello World!</h2>
    </body>
</html>

显示效果如下:

image

1.2 基本的 HTML 标签

  • HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
  • HTML 段落是通过 <p> 标签进行定义的。
  • HTML 链接是通过 <a> 标签进行定义的。(在 href 属性中指定链接的地址。)
<a href="http://www.w3school.com.cn">This is a link</a>
  • HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />

1.3 HTML 属性

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


<body bgcolor="yellow">
  <a href="http://www.w3school.com.cn">This is a link</a>
  <h1 align="center">This is heading 1</h1>
  <table border="1">
  </table>
</body>
  • href / align / border 是其对应标签的属性。
  • 下面列出了适用于大多数 HTML 元素的属性：
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）

2. 参考 w3school-html 篇

html中有太多记忆的东西，在这里罗列出来并不能保证记忆下来，要灵活应用还是需要实践，需要使用时参考上面的网址。