学习笔记—HTML标签

暂时学了这么些个标签，做一下记录。

a
form
input
select
textarea
table

a标签(HTTP GET 请求)

a标签的属性

target
download
href

a标签的target属性

英文	翻译
blank	空白的
self	自己

target的属性值

_blank ：新窗口打开
_self ：当前页面打开/加载

a的download属性

这个链接时用来下载,不是用来展示的

<a href="http://www.qq.com" download>下载</a>

如果不想通过这个download下载文件,还可以:

通过http响应以下载的形式接收请求Content-type: application/octet-stream

a的href

讲这个之前,先在本地开启服务器

操作如下:

mkdir demo
touch index.html
npm install -g http-server
http-server . -c-1(注意中间有一个空格一个点再加一个空格）实现不缓存

然后就可以直接访问 http://localhost:8080/index.html 来预览index.html

<a href="http://www.qq.com">QQ</a> 使用http协议
<a href="//qq.com">QQ</a>href里写的是无协议地址，意思是当前页面用的是什么协议,就会用什么协议
<a href="#xxx">QQ</a>锚点,点击之后不会发起请求,因为锚点仅仅是在当前页面内跳转
<a href="?username=ojl&psd=123456">QQ</a>点击之后会在当前面页面发起?username=ojl&psd=123456的请求
<a href="./index.html">QQ</a>点击后浏览器会发起GET请求,路径是/index.html,协议是HTTP/1.1
<a href="javascript:;"></a> 点击之后不会发生任何事
<a href="javascript:alert(1);"></a> 点击之后弹出1

form标签(HTTP POST请求)

form标签主要是发起POST请求

表单中有name属性的数据都会被提交

form的action属性：告诉表单需要提交到哪个服务器

代码展示

<form action="users" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
    <!-- form表单里面一般要有submit按钮才能提交 -->
</form>

如果填写的信息是英文,数字或特殊符号的话

image

如果是填写的信息是中文的话,会出现不一样的效果

image

上图中展示的数据并没有显示"小帅"两个字,而是出现了%E5%B0%8F%E5%B8%85

这是因为Content-Type: application/x-www-form-urlencoded中的x-www-form-urlencoded规定所有英文字符/键盘上的字母之外,都要经过转译,将"小帅"变成对应的UTF-8,可以搜索character utf-8 E5 B0 8F,得出"小"这个字对应的utf-8就是E5 B0 8F,如果发现中文,就把utf-8中的每一个字节前面加个%,所以就有上图这个效果了

小Tips:

如果form表单没有提交按钮,无法提交数据,除非用JS
如果一个form表单里面只有一个按钮<button></button>,它会自动升级为提交按钮
form表单里面的表单元素input等,里面的name会被带到请求的第四部分那里的key
utf-8中英文是占一个字节,中文占3个字节
GET不会把那个参数作为第四部分,默认会把参数放到查询参数,而且不能通过任何方法让GET有第四部分
POST请求上传的数据会出现在第四部分,默认会把参数放到第四部分
POST请求若想有查询参数，可以直接写在action里action="users?zzz=333

input标签

(name必须写，提交数据的时候要用到)

type="checkbox" 复选框

石头门.png

如果想默认选中最后一个，就可以在它的input标签上给checked属性
老司机的写法是用label把input包裹起来，传统方法是给label一个for属性，给input一个id，让它俩的值相同。
同组选项，name要一致。

type="radio" 单选框

同组选项，name要一致。

select

<select name="group" multiple>
    <option value="">-</option>
    <option value="1">第一组</option>
    <option value="2">第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4" selected>第四组</option>
</select>

小Tips:

multiple 可以同时选中几项
disabled 默认不能被选中
selected 默认被选中

image

textarea

resize设置为none，用户就不能随意更改输入框的大小

table

表格的基本元素

基本元素	翻译/含义
caption	标题
thead	table head(表头)
tbody	table body(表格主体)
tfoot	table foot(表格的底部)
tr	table row(表格行)
th	table header(表格页眉)
td	table data(单元格)

<table border="1" style="font-size: 12px;border-collapse: collapse;margin: 0 auto;margin-top:100px;" >
    <colgroup>
        <col width="74">
        <col width="180">
        <col width="497">
    </colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>简介</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>凶真</td>
            <td>拯救世界的中二病少年</td>
        </tr>
        <tr>
            <td>助手</td>
            <td>傲娇助手，学霸属性</td>
        </tr>
        <tr>
            <td>真由理</td>
            <td>喜欢吃banana和炸鸡便当的少女</td>
        </tr>
        <tr>
            <td>桶子</td>
            <td>变态绅士</td>
        </tr>
 
    </tbody>
</table>

简介.png

小Tips:

th和td的区别是:th里面不是放数据,td里面全是数据
thead tbody tfoot书写的顺序颠倒没关系,浏览器会自动纠正顺序(头->身体-->脚)
border-collapse: collapse;合并边框
col可以规定每一列的宽