学习笔记—HTML标签

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

• a
• form
• input
• select
• textarea
• table

a标签(HTTP GET 请求)

a标签的属性

• target
• download
• href

a标签的target属性

英文	翻译
blank	空白的
self	自己

target的属性值

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

a的download属性

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

下载

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

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

a的href

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

操作如下:

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

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

1. QQ 使用http协议
2. QQhref里写的是无协议地址，意思是当前页面用的是什么协议,就会用什么协议
3. QQ锚点,点击之后不会发起请求,因为锚点仅仅是在当前页面内跳转
4. QQ点击之后会在当前面页面发起?username=ojl&psd=123456的请求
5. QQ点击后浏览器会发起GET请求,路径是/index.html,协议是HTTP/1.1
6. 点击之后不会发生任何事
7. 点击之后弹出1

form标签(HTTP POST请求)

form标签主要是发起POST请求

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

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

代码展示

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

image

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

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表单里面只有一个按钮,它会自动升级为提交按钮
• 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

    -
    第一组
    第二组
    第三组
    第四组

小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(单元格)

    
        
        
        
    
    

        

            
姓名
            
简介
        
    
    

        

            
凶真
            
拯救世界的中二病少年
        
        

            
助手
            
傲娇助手，学霸属性
        
        

            
真由理
            
喜欢吃banana和炸鸡便当的少女
        
        

            
桶子
            
变态绅士
        
 
    

简介.png

小Tips:

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