美文网首页前端学习笔记饥人谷技术博客
2-HTML基本结构及常用的标签

2-HTML基本结构及常用的标签

作者: 饥人谷_刘冲 | 来源:发表于2016-12-20 23:53 被阅读32次

    一.网页是什么

    • 网页的组成部分
      一个网页由Html+CSS+JavaScript三部分构成。
      Html: 定义网页元素内容
      CSS: 控制网页样式
      JavaScript:操作网页内容,实现功能或者效果

    • 网页的基本格式
      如下面的代码就是一个标准的HTML网页,里面包含Html,CSS,JavaScript三部分:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"/>
      <title>选项卡标题</title>
      <style>
        h1{
            color: red;
        }
        p{
            background-color: #ff00ff;
        }
      </style>
    </head>
    <body>
      <h1>这里是文章标题</h1>
      <p>这是一个段落</p>
      <script>
        alert(1);
      </script>
    </body>
    </html>
    

    二.HTML的基本结构

    • HTML的最简单格式:
      一个最基本的HTML页面由文档申明如<!DOCTYPE html>和一个HTML容器组成。而HTML容器里面由<head>部分和<body>两部分组成。所有其他标签都在这两个标签里面:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8"/>
      <title>Document</title>
    </head>
    <body>
      </body>
    </html>
    

    三.HTML基本语法规则

    1.所有标签都必须包含在<html></html>容器中。
    2.HTML中的标签一般都是成对出现的,一个是开始标签一个是结束标签。如<html></html> <body></body>,但也有单标签,如<meta charset="UTF-8"/>
    3.结束标签必须有“/”,若是单标签则用“/>”来结束开始标签。例如<br /> <hr />.
    4.属性的引用必须要有双引号。例如<td rowspan="3">
    5.所有的标签必须合理地嵌套,如<body><p>这是段落</p></body>


    四.HTML的常用标签概览

    • [<!DOCTYPE>]
      单独列出说明:[<!DOCTYPE>]是HTML的文档声明,用于定义文档的类型。但是根据W3C官方定义它不是一个HTML标签。

    • 基础标签
    标签 描述
    <html> 定义 HTML 文档。
    <title> 定义文档的标题。
    <body> 定义文档的主体。
    <h1>-<h6> 定义 HTML 标题。
    <p> 定义段落。
    <br> 定义简单的折行。
    <hr> 定义水平线。
    <!--....--> 定义注释。

    注:上述标签引用于w3c


    • 其它常用标签
    标签 描述
    <div> 定义文档中的节,即页面的一个区块。
    <span> 定义文档中的节,组合行内元素,以便通过样式来格式化它们
    <img> 定义图像
    <ol> 定义有序列表
    <ul> 定义无序列表
    <dl> 定义定义列表
    <a> 定义超链接
    <button> 定义按钮
    <table> 定义表格
    <form> 定义输入的HTML表单

    • HTML全局属性
    属性 描述
    accesskey 规定激活元素的快捷键
    class 规定元素的一个或多个类名(引用样式表中的类)
    contenteditable 规定元素内容是否可编辑
    data 自定义属性
    dir 规定元素中内容的文本方向
    draggable 规定元素是否可拖动
    id 规定元素的唯一 id
    lang 规定元素内容的语言
    spellcheck 规定是否对元素进行拼写和语法检查
    style 规定元素的行内 CSS 样式
    tabindex 规定元素的 tab 键次序
    title 规定有关元素的额外信息
    translate 规定是否应该翻译元素内容

    注:以上属性引用于饥人谷课件


    *** 此文章著作权由饥人谷_刘冲饥人谷(QQ 群: 222459918) 所有。转载须说明来源。***

    相关文章

      网友评论

        本文标题:2-HTML基本结构及常用的标签

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