一、HTML简介

HTML的概念

HTML是HyperText Markup Language(超文本标记语言)的简写，超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、一个完善HTML的基本元素组成

1、 DOCTYPE

HTML5文档类型: <!DOCTYPE html>

2、 <html>

Html的根元素，用来包含html文档的所有元素


3、 <head>

包含在头部的内容不会被显示的页面中，这里通常包含页面的编码，作者，页面的描述信息，js的导入，css的导入等信息。


4、 <meta charset="utf-8">

用来声明当前文档的编码方式为utf-8


5、 <title>

用来声明当前文档的标题，标题将会出现在浏览器的选项卡中


6、<body>

所有想要显示在浏览器中的元素都被包含在该元素中。


三、 HTML元素

1）行内元素

  2. 与其他行内元素共享一行空间
  3. 默认清下，宽度和高度都由其内容所决定
  4. 不能为其指定宽和高
  5. 行内元素只能容纳文本或其他行内元素
  6. 设置行内元素，需要注意如下
    （1）设置宽度 width 无效。
    （2）设置高度 height 无效，但可以通过 line-height 来设置（当line-height = 行高时，显示上下居中）。
    （3）设置 margin 只有左右有效，上下无效。
    （4）设置 padding 只有左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
  7. HTML常用行内元素
    （1）​​<span></span>​​无意义的行内元素
    （2）​​<a></a>​​ 超链接
    （3）​​<img>​​ 图片

2）块级元素

  2. 独占一行空间
  3. 默认情况下，宽度占满整个父元素，高度由其内容决定
  4. 可以为其宽和高
  5. 块级元素可以容纳行内元素和其他块级元素
  6. HTML常用块级元素
    （1）​​<div></div>​​ 无意义的块级元素
    （2）h1~h6 标题
    （3）​​<ul>​​ 无序列表   ​​<li>​​ 列表项
    （4）​​<ol>​​ 有序列表   ​​<li>​​ 列表项
    （5）​​<dl>​​ 定义列表   ​​<dl>​​ 列表标题   ​​<dd>​​ 列表项
    （6）​​<p>​​ 段落

3）其他元素

1. table

caption 表格标题

    thead     表格的头部
        tr
            th / td     
    tbody (不可以省略的)    表格的体部
        tr
            td / th
    tfoot     表格的尾部
        tr
            td


    table属性
        border    边框线宽度，默认为0
        cellspacing    单元格之间的间距，默认为1
        cellpadding 单元格的内边距，文字距离单元格边框的距离
        width     宽度
        align     表格的排列方式
            center
            left        默认
            right

        colspan     跨列，向右跨
        rowspan     跨行，向下跨

        注意：每一行的列数在计算（rowspan,colspan）之后应该是相等的。如果不等，表格就会破裂


2. form

form 属性

  • action url后台服务地址
  • method 方法 GET POST put delete (REST)
  • enctype 编码格式

input 属性

- value
- name
- type     
    - text
    - password
    - radio 
    - checkbox
    - file
    - submit
    - reset


select>option

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>


textarea

多行文本域

属性      cols 列      rows 行

H5中form的新特性(浏览器支持程度不高，不可靠)

1) 新增的表单元素
    progress      进度条
    output        计算输出
    meter         刻度条
    datalist      下拉列表
2) input的type属性值
    search    搜索框     placeholder    提示输入内容
    日期相关
        date
        time
        datetime
        month
        week
    功能相关
        email
        url
        tel
3) 提交按钮上新增的属性（记忆）
    <input type="submit">
    formaction
    formmethod
    formenctype
    formtarget


未完待续. . .