前端日记 - 2019年1月10日

超文本引用,表单,简单搜索框

想法

早上去健身房练了肩,下午又是实验室的汇报。

又是被实验室汇报PPT压迫的一周,随便从CVPR和github上捡个模型来炼丹,再简单阐述一下原理,做个对比实验。这完全不是我想象的研究生该有的样子。飘在天上的感觉太奇怪了,不如前端来的脚踏实地,就算毕业后搬砖,我干的也踏实。

和老司机聊了一段时间,也在知乎上逛了很久,前端不像当年,现在的“大前端”是一个很好的方向,既然兴趣就在这儿了,就安安稳稳的学吧。

别想些没用的,嗯。

笔记

超文本引用

1
2
3
4
5
6
7
8
9
10
<!-- 1. 超链接 -->
<a href="https://www.baidu.com" target="_blank">
<img src="">
</a>
<!-- 2. 打电话: 移动端打电话的功能就是这么实现的 -->
<a href="tel:13012345678"></a>
<!-- 3. 发邮件 -->
<a href="mailto:xxx@xx.com"></a>
<!-- 4. 协议限定符: 没什么实际应用 -->
<a href="javascript:while(1){alert('让你手欠')}">点我。</a>

a(anchor)标签能够包裹任何东西,比如放一个图片,就能让图片拥有引用的功能。

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form method="get" action=".php">
<p>
username: <input type="text" name="username">
</p>
<!-- 这里用br换行不好,语义化不好,p标签就是换行用的,所以这里用p标签更好 -->
<p>
password: <input type="password" name="password">
</p>
<!-- 单选框 -->
<input type="radio" name="单选框的name要保持一致" value="">
<!-- 复选框 -->
<input type="checkbox" name="同上" value="">
<!-- 下拉菜单 -->
<select name="province">
<option value="可选,默认是北京">北京</option>
<option>上海</option>
<option>天津</option>
</select>
<input type="submit" value="提交">
</form>

一个简单搜索框的实现:

1
2
3
4
<!-- 没内容的时候鼠标聚焦,“请输入关键字"会消失 -->
搜索:<input type="text" name="search" style="color:#999" value="请输入关键字"
onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#424242'"
onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#999'}">

哈哈哈,这个真的是硬核html,不过管用。

有个小bug就是输入“请输入关键字”的时候点出去再点回来内容会消失,sina和58的搜索框都有这个bug :-D

一个好的产品要有“懒操作”的习惯,单选框要有默认选中,节省用户操作。

1
2
3
<!-- 复选框也能用 -->
male: <input type="radio" name="sex" value="male" checked="checked">
female: <input type="radio" name="sex" value="female">

其他

2G网对数据是没有加密的,在无线传输过程中容易被拦截破解,手机信号退化到2G的时候要注意了哦。

北京很多地方2G都已经停用了。

现在学的HTML版本是4.0.1,学HTML5.0之前要学好CSS3。