HTML基本标签归纳总结

2019-02-01  本文已影响0人  Ivannnx

1. HTML发展史

2. HTML中的文本标签

3. HTML链接

<a href="http://www.google.com">google</a>
复制代码

4. HTML图片

    <img src="path/img.jpg" alt="替代文字" width="300" height="200">
    <!--图片未加载时先占位 防止加载变形 有时CSS中指定宽高不合适-->
    <figure>
        <img src="path/img.jpg" alt="替代文字">
        <figcaption>图片说明</figcaption>
    </figure>
复制代码

5. HTML表格

<table border="1">
    <thead>
        <tr>
            <th>浏览器</th>
            <th>渲染引擎</th>
            <th>JS引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Opera</th>
            <td>Blink</td>
            <td>V8</td>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
        <tr>
            <th>Edge</th>
            <td>EdgeHTML</td>
            <td>Chakra</td>
        </tr>
    </tbody>
</table>
复制代码

<table border="1">
    <thead>
        <tr>
            <th>浏览器</th>
            <th>渲染引擎</th>
            <th>JS引擎</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Chrome</th>
            <td rowspan="2">Blink</td>
            <td rowspan="2">V8</td>
        </tr>
        <tr>
            <th>Opera</th>
        </tr>
        <tr>
            <th>Firefox</th>
            <td>Gecko</td>
            <td>SpiderMonkey</td>
        </tr>
        <tr>
            <th>Edge</th>
            <td>EdgeHTML</td>
            <td>Chakra</td>
        </tr>
    </tbody>
</table>
复制代码

6. HTML表单

使用form获取让用户提供数据

    <form action="/echo" method="POST">
        <p>用户名: <input type="text" name="username"></p>
        <p>密码: <input type="password" name="password"></p>
        <p><button type="submit">登录</button>></p>
    </form>

GET请求:从服务器获取，安全，不会对服务器改动，每次操作返回结果相同，浏览器会缓存get请求，数据传输在url中用键值对拼接（一次性发送）

POST请求: 每次提交数据，会修改，浏览器不会缓存post请求，因为会提交改动，不会把数据放在路径中，会编码后放在http的body中（先发送head再body）

form表单中不写method默认是GET

点击label也可以切换选中元素状态
label也可以与input关联，方便读屏软件识别要求输入内容
label通过for和id进行关联

 <form action="/echo">
        <p>你最喜欢什么水果？</p>
        <p>
            <input type="checkbox" name="fruit" value="mango" id="mango">
            <label for="mango">芒果</label>
            <label>
                <input type="checkbox" name="fruit" valeu="apple">苹果
                <input type="checkbox" name="fruit" valeu="banana">香蕉
            </label>
        </p>
        <p>
            <label for="name">请输入你的名字：</label>
        </p>
        <p><input id="name"></p>
        <p><button>提交</button></p>
    </form>

<select name="fruit">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
            <option value="5">five</option>
            <option value="6">six</option>
        </select>

提交数据：fruit=3
select可以多选，需要command，size是显示个数，不写默认显示一个

<select name="fruit" multiple size="3">
</select>

<label>目的城市：</label>
    <select name="country">
        <optgroup label="美洲">
            <option>多伦多</option>
            <option >温哥华</option>
            <option>里约热内卢</option>
        </optgroup>
        <optgroup label="亚洲">
            <option>北京</option>
            <option >上海</option>
            <option>新加坡</option>
        </optgroup>
        <optgroup label="欧洲">
            <option>伦敦</option>
            <option >巴黎</option>
            <option>柏林</option>
        </optgroup>
    </select>
select分组效果.png 
<form action="/echo" method="POST" enctype="multipart/form-data">
        <p>
          <label>您的姓名：</label>
          <input name="fullname">
        </p>
        <p>
           <label>请选择简历：</label>
           <input type="file" name="resume">  
        </p>
        <p><button>提交</button></p>
    </form>

multipart分割文件提交接收后再合成

POST /echo
------WebKitFormBounadryMTXE8T65X0       //分割标识+乱码（起始标识）
Content-Disposition: from-data; name="fullname"     //form-data表示form表单提交的数据， 第一个input里是fullname

aa                            //input框的值是aa 会空一行
------WebKitFormBounadryMTXE8T65X0       //第一段结束
Content-Disposition: from-data; name="resume"; filename="resume.txt"
Content-Type: text/plain          //文件上传格式

This is my resume.                  //文件正文上下会空行
   
------WebKitFormBounadryMTXE8T65X0       //第二段结束

input中加multiple属性可以多选上传
accept 接收文件格式设置

<input type="file" name="resume" multiple accept="image/*">  

<form action="/echo">
       <p>date:<input type="date"></p>
       <p>datetime-local: <input type="datetime-local"></p>
       <p>month: <input type="month"></p>
       <p>week: <input type="week"></p>
       <p>time: <input type="time"></p>
    </form>

<form action="/echo">
       <p>
            <label>身高(m):</label>
            <input type="number" min="0.5" max="2.5" step="0.01" name="height" value="1.7">
       </p>
       <p>
            <label>体重(kg):</label>
            <input type="range" min="10" max="150" step="0.1" name="weight" value="62">
            <output for="weight"></output>   <!--显示拖动数值 for表示源自哪里输入-->
       </p>
       <p>
            <label>BMI:</label>
            <output for="weight height"></output>
       </p>
    </form>

<input type="color">   //以#xxxx输出

不指定type 提交 => GET/echo?fullname=xxx&fruit=xxx&fruit=yyy
不写type默认submit
type="button" 行为要js实现
type="reset" 清空到最初状态

如果多个button 会默认触发第一个button的submit

上一篇 下一篇

猜你喜欢

热点阅读