HTML简述

HTML(超文本标记语言)

html规范

  1. 所有的标签都要正确的闭合
  2. 大小写要统一，所有的属性都要小写（建议小写，html不区分大小写）
  3. 注意缩进（关系结构要清晰）
  4. 所有的文本内容都要用标签包裹起来
  5. 同级标签，最好display相同
  6. 养成注释的习惯
  7. 命名要规范：不要数字开头；不要纯汉字；建议用字母开头，数字下划线中划线组合使用；命名要贴近语义
  8. 组合标签要正确的嵌套
    ul li;ol li;dl dt dd;select option;table tbody tr th td

html基础模板

  1. 创建html文档
    （1）command+N新建文档输入文件名和后缀，然后保存
    （2）通过slideBar插件，右键创建
    （3） 通过终端，touch+space+文件名和后缀创建
  2. 版本声明doctype
  3. 创建html标记
  4. html必须有head头部和body身体
  5. head有个必备标记叫title，文档标题
  6. 支持中文要有meta charset=”utf-8” 使文档支持中文
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>

        </body>
    </html>

html常用标签的特性

1.html分为单标签和双标签

单标签大致如下：

    <meta />
    <br />
    <hr />
    <img />
    <input />
    <link />

余下的都为双标签，在此就不一一熬述。

2.标签的默认样式

间距：        margin，padding

字体：        font-size

修饰：        font-weight，font-style，color，text-decoration

边框：        border

display：    none，block，inline，inline-block，list-item，table，table-row，table-cell，flex

3.标签的默认属性

charset=""

href=""

title=""

alt=""

src=""

target=""  主要针对a form

width=""

height=""

border=""

value=""

type=""

name=""

action=""

4.块级标签

也就是指属性为display:block;的标签，大致列举如下：

    标签名        默认属性
    div            display
    h1~h6        margin display
    p            margin display
    hr            border margin display
    ol            margin padding list-style-type display
    ul            margin padding list-style-type display
    dl            margin display
    dt            display
    dd            margin display
    form        margin display
    body        margin:8px display
    html        display
    option        padding font-weight display white-space min-height
其特点有：（1）默认独占一行（2）没有设置width，height的情况下，继承父级容器宽度，高度由内容撑开（3）可以设置margin:0 auto居中（4）支持所有样式属性（5）一般作用于容器 **5.行级标签** 也就是指属性为display:inline;的标签，大致列举如下： 
    标签名        默认属性
    a                color text-decoration cursor
    span
    strong            font-weight
    em(强调)            font-style
    var(变量声明)    font-style
    sub(上标字)        vertical-align font-size
    sup(下标字)        vertical-align font-size
    small(小字)
    del(删除)        text-decoration
    img                可以支持尺寸设置的行级标签
    br

其特点有：（1）不会独占一行（2）不可以设置尺寸，内容撑开宽度个高度img除外 width:auto;height:auto;（3）支持border,background,margin-left,margin-right,padding-left,padding-right

6.行块级标签

也就是指属性为display:inline-block;的标签，大致列举如下：

    input
    select
    textarea

其特点有：（1）不会独占一行，可以和行级标签、行块级标签并列一行（空间足够的情况下）（2）尺寸由内容撑开，没有默认的宽高度，可以设置尺寸