html

a标签默认动作：1.打开页面 2.跳转锚点

html只管内容，css管样式

标签：

a：anchor 标记锚点，超链接。

form：表单，想提交内容时使用

input 用户输入 button 用户点击

h1：一级标题 

p：paragraph 段落

ul： un-ordered list  没有顺序的列表   ul与li（list item）必须配合使用ul儿子li

ol：ordered list 有顺序的列表

small：不重要的字

strong：重要的字

div：divide 划分   span：横向划分   要配class   除这两个其他标签有默认样式 保底用span？

kbd：keyboard 键盘键

video：网页上放视频   audio：音频

svg：不规则的图形

img：图片 有alt属性：alternative  标签内可写width、height，先占着空间，防止页面让后面的元素后退。图片width、height一般都要写

main：主要内容

hr： 水平分割线 horizon？             br：强制换行

dl：description list 描述列表，描述年龄电话地址等信息。dl中应该包括dt和dd两个标签，分别为description term 和description definition ，一个词语一个定义

footer：页角

只有表示文档属性的元素可以写到head里面

meta  后端在http响应中如果不指定content-type，则需要指定（html5似乎不用了）

section表示章节的意思

标签中有id，其css格式：

例如：<div id=xyz> </div>  其css:  #xyz{width:200px;}

一些较难的标签：

iframe标签：

历史遗留项目中常用，2012年及之前很多使用。当前页面嵌套其他网页

<iframe name="" src="" frameborder="0"></iframe>    frameborder="0"消除边框

a标签：

1.target属性  可以写以下（不只是  可以与iframe的name结合使用

<a href="http://qq.com" target="_blank"></a>  新开一个页面（喜欢这种

<a href="http://qq.com" target="_self"></a>    在当前页面打开

<a href="http://qq.com" target="_parent"></a>   在父亲页面打开

<a href="http://qq.com" target="_top"></a>       在祖宗页面打开

2. download属性

<a href="http://qq.com" download>下载</a>  点击会下载 而不是展示页面

还有一种情况，http响应中 Content-Type 为application/octet-stream   浏览器就以下载的形式接受此请求，而不是展示页面

3.href

<a href="qq.com"></a>  打不开，因为href是一个相对路径（qq.com为文件后缀可能）

要用：<a href="http://qq.com"></a>  或https（支持的话

<a href="//qq.com">QQ</a>也有这种有时是FILE协议      // 当前页面是什么协议就以什么协议打开   无协议绝对地址

写代码不准用FILE协议，预览html文件方式  1.上传GitHub，2.npm install -g http-server  不需要写代码，直接作为node.js server   注意切换目录到html

href中只有锚点 # 是不发请求的，<a href="#scfafafa">QQ</a>是为了页面内的跳转，其他要发请求GET等

href还可以javascript伪协议： 可以这样，执行js代码 <a href="javascript: alert(1);">QQ</a>

有什么用？    写一个点击后页面不动的a标签，而href=#的话页面可能会跳不写的话刷新页面，不写href的话a标签和span无异。 <a href="javascript: ;">QQ</a>可以解决。

href内容可以如下：

1. /qq.com  

2. #xxx    ?name=qqqq （?加查询字符串）      ./xxx.html

3.  javascript: alert(1);    javascript:;

form标签

form标签也是跳转页面，

form标签：HTTP POST 请求    POST上传内容  到服务器   但不管响应   （也可以get，但没必要）

a标签：HTTP GET 请求          GET 获取内容   获取这个网址内容

若form中无提交按钮，则无法提交form，除非用js。

    <form action="index2.html" method="POST">

        <input type="submit" value="提交">     input:submit +tab是type为submit

    </form>

html只可form标签上传内容

    <form action="users" method="POST">

        <input type="text" name="username">    作第四部分

        <input type="password" name="password">    作第四部分

        <input type="submit" value="提交">

    </form>

GET默认把查询参数放在查询参数，POST默认把参数放第四部分form data中，可以通过URL中加查询

 <form action="users?zzz=3" method="POST"> 让post有查询参数，但是不能通过任何方法让get有第四部分。

form标签也有target，和a标签类似。

input与button标签

二者均有很多type。 input没有子元素，button有一些子元素

如果一个form里只有一个button，type不为button，那么它会自动升级为submit按钮

<button>button</button>  可以作为submit，点了post

<button type="button">button</button>  只是个按钮，点了没用

label 标签for 与 input的id要一起出现如

<label for="a1">用户名</label><input type="text" name="username" id="a1">

也可以<label>用户名<input type="text "name="username"></label> 。。这么灵活吗 

注意input必须要有name，不然提交时不会带上这个值.

type为checkbox，可多个勾选

        喜欢的水果

        <label><input type="checkbox" name="lovefruit" value="orange">橙子</label>

        <label><input type="checkbox" name="lovefruit" value="banana">香蕉</label>

        <label><input type="checkbox" name="lovefruit" value="apple">苹果</label>

type为radio，name为同一个时可以只选一个，多选一

        爱我

        <label><input name="loveme" type="radio" value="yes"> yes</label>

        <label><input name="loveme" type="radio" value="no"> no</label>

type为password，输入密码时看不见，但实际上还是明文的

select下拉列表

select下拉列表，也要给name

        <select name="分组">

            <option value="">-</option>      空值什么也不选

            <option value="1">第一组</option>

            <option value="2">第二组</option>

            <option value="3" disabled>第三组</option>     满了

            <option value="4" selected>第四组</option>      默认选这个

        </select>

        <select name="group" multiple>  可以多选 按shift或ctrl

textarea标签

让用户输入多行文本。

<textarea style="resize: none;" name="爱好" cols="30" rows="10"></textarea>

table标签

用于展示数据，实例如下，注意th为表头，td为table data数据。

注意：table的border有空间空隙，在head标签中加

<style>

    table{

      border-collapse: collapse;

    }

  </style>

就没有空隙了

<body>

<table border=1>

  <colgroup>

    <col width=100>

    <col bgcolor=red width=200>

    <col width=100>

    <col width=70>

  </colgroup>

  <thead>

    <tr>

      <th>项目</th><th>姓名</th><th>班级</th><th>分数</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th></th><td>小明</td><td>1</td><td>94</td>

    </tr>

    <tr>

      <th></th><td>小红</td><td>2</td><td>96</td>

    </tr>

    <tr>

      <th>平均分</th><td></td><td></td><td>95</td>

    </tr>

  </tbody>

  <tfoot>

    <th>总分</th><td></td><td></td><td>190</td>

  </tfoot>

</table>

</body>

html给元素属性，并用js获取：

specialTags = document.querySelectorAll('[data-x]')   如果是只要section标签的需要写作'section[data-x]'