美文网首页
HTML入门教程

HTML入门教程

作者: 唐朝洋葱 | 来源:发表于2017-11-30 10:25 被阅读0次

    一、开发网页的准备

    • HTML开发工具:记事本、Dreamweaver,Sublime text(任选一个)
    • HTML文件的扩展名:.htm 、.html
    • 浏览器:谷歌浏览器、360浏览器(任选一个)

    二、HTML的标签

    • HTML标签是用来标记HTML元素的。
    • HTML标签被 < 和 > 符号包围的。
    • 这些包围的符号叫做尖括号
    • 位于起始标签和终止标签之间的文本是元素的内容
    • HTML标签对大小写不敏感,<b> 和 <B> 的作用是相同的(建议小写)

    三、 HTML的基本结构

    HTML的基本结构

    <html> ...</html>、<head> ... </head>、<body> ... </body>
    上面都是HMTL语言的基本部分。元素总是成对出现的,每一对元素一般都有一个开始标签(如<body>),也有一个结束标签(如</body>)。始终要记住这样规定的结构文档写法。

    
    <!-- 复制以下代码 -->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>我的第一个网页</title>
        </head>
        <body >
                 Hello World!
        </body>
    </html>
    

    四、HTML的注释

    • 注释标签用于在HTML源码中插入注释。注释之后会被浏览器忽略。
    • 注释作用:增加代码的可读性,对日后的修改有很大的帮助
    注释代码如下:
    <html>
    ...省略代码
    <!-- 注释的内容 -->
    ...省略代码
    </html>
    

    五、HTML的声明

    • <!DOCTYPE html> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    • <!DOCTYPE html> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
    • 声明没有结束标签。
    • 提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。
    声明类型的区别

    六、HTML的head部分包含的主要元素

    • <title>内容</title> 文档标题,将内容显示在浏览器标题栏上。还有利于浏览器解析和搜索引擎收录。
    • <meta name="xxx" content="xxx"> 用于设置一些头信息,描述HTML的元信息。
    • <link src="xxxx"> 用于加载外部一些文档和其它脚本。
    • <style>....</style> 用于定义内联css样式。
    • <script> ...</script> 用于定义脚本javascript。
    代码如下示例
    <! -- 下面是声明文档类型 -->
    <!DOCTYPE html>
    <html>
        <head>
                <!-- 描述文档类型和字符编码,用来标记解码方式 -->
                <meta charset="utf-8" />
                <!-- 用来标记文档的作者 -->
                <mate name="author" content="sunyang">
                <!-- 提供搜索关键字,方便搜索引擎的搜索  -->
                <meta name="keywords" content="关键字" />
                <!- 提供内容描述,方便搜索引擎的搜索 -->
                <meta name="description" content="...描述内容..." />
                <title>我的第一个网页</title>
        </head>
        <body >
                 Hello World!
        </body>
    </html>
    

    七、HTML的body标签的属性

    • bgcolor 设定页面背景颜色
    • background 设定页面背景图像
    • leftmargin 设定页面的左边距(单位默认是像素)
    • topmargin 设定页面的上边距
    • text 设定页面文字的颜色
    代码如下:
    .....代码省略
    <body bgcolor=“#006633” text=“#ffffff”>
       hello word!
    </body>
    ......代码省略
    

    颜色代码大全安全颜色(共216种)

    安全颜色列表

    相关文章

      网友评论

          本文标题:HTML入门教程

          本文链接:https://www.haomeiwen.com/subject/tckcdxtx.html