声明

告诉浏览器用哪个版本进行编写这个是HTML5的声明方式

标准模式与怪异兼容模式

输出 document.compatMode CSS1Compat w3c的标准模式 BackCompat 浏览器的怪异兼容模式

HTML基本结构

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />    
    </head>
    <body>
    </body>
</html>

这里html为根标签，每个html文档只有一个

head标签用来存储网页的基本信息

title:

主页：网站名称 + 主要关键字/关键词描述
详情页：详情名称 + 网站名称 + 简介
列表页：分类名称 + 关键字 + 网站名称
文章页：标题 + 分类 + 网站名称

meta：

chrset：设置编码字符集
- gb2312 中国信息处理国家标准码，解析简体中文编码
- gbk 汉字扩展规范，扩大汉字收录，增加了繁体中文，增加了藏蒙维等少数民族的文字
- UTF-8 万国码，认识全世界基本所以在使用的文字
keywords 100个字符
description 描述信息 80-120汉字综合title + keywords的简单描述（与SEO相关）

搜索引擎认知的优先级（title > description > keywords[前认可度比较低])

body是网页的主体，网页真正显示的部分。

推荐使用语义化的标签

<table border="1" cellpadding="10" cellspacing="10">
    <thead>
      <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Tel</td>
        <td>备注</td>
    </tr>  
    </thead>
    <tbody>
        <tr>
        <td>1</td>
        <td>aaa</td>
        <td>13333333333</td>
        <td>大队长</td>
    </tr>
    <tr>
        <td>信息</td>
        <td>2018.3班</td>
        <td colspan="2">13位学生</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bbb</td>
        <td>13333333333</td>
        <td>大队长</td>
    </tr>
    <tr>
        <td>3</td>
        <td>ccc</td>

        <td>13333333333</td>
        <td>大队长</td>
    </tr>
    <tr>
        <td>4</td>
        <td>ddd</td>
        <td>13333333333</td>
        <td rowspan="2">小队长</td>
    </tr>
    <tr>
        <td>5</td>
        <td>eee</td>
        <td>13333333333</td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">
            学生都要成为前端工程师
            </td>
        </tr>
    </tfoot>
</table>

表格的加载机制：如果一个普通的表格没有thead、tbody、tfoot这三个标签的话，等数据全部加载完成后才会显示出来，如果这张表里面数据很多，就会等待很长时间，不合理，当加上这三个标签后，就会页眉和页尾会先加载，最后再加载表格中的数据。
cellpadding 单元格的内边距
cellspacing 单元格间距
border 边框
colspan 列合并 td个数 + colspan数 = 最多列数
rowspan 行合并下面要少写一个td 上面要合并的哪个td写rowspan属性合并几行就写几
align left right center 写在td上设置居中
标签内部的像素值不用＋px
caption标题标签
thead 表格的页眉标签
tfoot 表格的页尾标签
tbody 表格的主体标签
tr 表格行标签
th 表头标签
td 单元格

<ifream src="https://www.baidu.com" width="100%" height="100%" scrolling="no" name="mainFrame" frameborder="1"></ifream>

 <frameset rows="10%,90%">
    <frame src="top.html"></frame>
    <frame>
        <frameset clos="20%, 80%">
            <frame src="left.html"></frame>
            <frame name="mainFrame" src="http://www.jd.com"></frame>
        </frameset>
    </frame>
 </frameset>

不可以放在body中
target="mainFrame" 在left的a标签上写可以实现点左侧切换右侧

用户提交数据数据名称 + 数据的值

<form method="get|post" action="后端的地址url">
        <p>
        账号：<input type="text" name="username" maxlength="5"
        readonly="readonly"
        value="123"
        disabled="disabled" /> maxlength="5" 只表示5个字符，不管中文还是英文
        readonly 与 disabled 的区别：禁用不可读取，只读可以读取。提交表单时禁用（disabled）不会提交，只读（readnoly）会提交。
        </p>
        <p>密码：
        <input type="password" name="password" />
        </p>
        <p> 
        <input type="submit" value="登录" />
        </p>
        <label for="username"></label>
        <input type="text" id="username" name="username" />
        label 的 for 属性值与input的id值一样时，点击label可以聚焦input
        md5：消息摘要的算法，也叫不可逆加密算法 第一不可逆是指一旦加密之后无法再解密 第二是这种加密算法加密时不需要密钥

        单选按钮
        <input type="radio" id="male" name="sex" value="male" />
        <label for="male">男士</label>
        <input type="radio" id="female" name="sex" value ="female" />
        <label for="female">女士</label>
        name 写同一个可以实现单选
        value值可以作为值进行传递

        多选
        <input type="checkbox" id="js" name="myFavoriteLan" value="js">
        <label for="js">Javascript</label>
        <input type="checkbox" id="java" name="myFavoriteLan" value="java">
        <label for="java">java</label>
        <input type="checkbox" id="php" name="myFavoriteLan" value="php">
        <label for="php">php</label>

        <select name="lang">
            <option value="js">JavaScript<option>
            <option value="java">Java</option>
            <option value="php">php</option>
            <option value="python">python</option>
        </select>

        <textarea cols="30" rows="20" placeholder="请输入文本"></textarea>
        cols 可见宽度 8px(英文字符) * cols + 17px / 20px
        rows 可见行数
        为什么在多行输入的文本框中有空格的现象
        是因为 textarea 不可以换行和空格 它的value在双标签中间
        如果它的内容为"123123<div>"
        输出其value 就是123123<div>
        输出其innerHTML 则是 123123lt;divgt;
        输出其innerText 是空
        placeholder 为什么不用这个而去模拟 浏览器兼容性不行 自己写兼容性更强，可以实现更多的动态效果
        fieldset: 用来分组的
        <fieldset>
            <legend>用户登录</legend>
            <p>
                <label for="username">用户名</label>
                <input type="text" id="username" placeholder="密码"/>
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="密码"/>
            </p>
        </fieldset>
    </form>

元素

内联元素行间元素行内元素 inline

不独占一行，无法定义宽高
strong em del ins

块级元素 block

不独占一行，可以定义宽高
img

元素之间的嵌套关系

内联元素可以嵌套内联元素内联块元素，块级元素可以嵌套任何元素
p标签不可以嵌套div
a标签不可以嵌套a标签

注释

方便后期维护，增加代码可读性
找bug（通过多次注释代码查看）

总结

内联元素： span strong em del ins label a sub sup
块级元素：div hx p address ul ol li dl dt dd table form fieldset legend
内联块元素：input img select textarea iframe
html5：是新的标准
有哪些更新：
- 1.声明html的方法改变了简化了
- 2.简化了编码的声明方式以前要先声明
- 现在是
- 3.删除了一些旧的标签 center font big small frameset frame s u ...
- 4.增加了音频视屏标签 video audio
- 5.增加了结构化标签 header footer section nav aside
- 6.增加了JavaScript的API 地理定位离线存储 canvas 应用缓存
html5技术：比html5规范要大他是一门技术，结合了各种不同小技术点，比如开发手机app 手机端网站单页面应用游戏。
- 移动端使用结构化标签
- JavaScript api 拖拽 web存储 video audio
- css3 过渡转换动画
- 综上所有东西开发出来的游戏，单页面应用移动端前端框架 vue react angular h5 app（web app） html5+
html5 开发app ：
- angular2 + ionic typescript
- react native
- dcloud html5 +
- weex
- vue

HTML基础

声明

标准模式与怪异兼容模式

HTML基本结构

标签

元素

注释

总结