发表于: 2018-07-16 00:24:17
1 760
一、Do
1. 任务2的提交
2. 任务4代码的编辑:表单标签中的input的用法,placeholder属性设置样式,a标签的用法及去除样式
3. Github page的成功搭建
今天回家耽搁了好久,几乎没怎么学习,羞愧~
二、Plan
1. 任务3的修改与浏览器兼容性调试、知识点整合、无误后上传
2. 自适应的学习
3. 盒子模型
三、Problem
1. 输入框右边图片布局:迟迟不敢动手,还悄咪咪跑到官网查看了源码,看能不能学到点什么,实际上并没有。最后在输入框前面插图片,使得图片与输入框一行排列,再修改样式,看起来就像是输入框部分的左边插入了图标。
2. 图片 | 文字的实现,使用了障眼法,在placeholder属性设置了“|空格空格文字”的方式凑合实现了。
3. 为placeholder设置属性,简单百度了下,妈呀,还要分浏览器内核,看着就很恐怖,现在退坑还来得及么。第一次接触到了::这个符号的样式,不懂。
4. 两个按钮与一行文字一行排列的时候,中间的文字下意识采用了<h>标签, 结过排成了一列,各种inline、block、flex其上阵,都不得其法,后来发现用<span>标签就可以完美解决了。总之,要时刻考虑块元素与行内元素,标签不是你想用,想用就能用。
四、Gain
1. 表单标签<form action="" method="" name="">的学习:
form中有两个必备属性,action | method
action : 用于说明数据提交的地址;
method : 用于规定发送表单数据的两种HTTP方法,有get | post两个值。
其中 get (默认值)将表单数据名称和值转换为文本形式的参数直接加到原地址后面(可以在浏览器地址栏查看数据),因此get方法适用于安全级要求不高的数据(有传输大小限制:不超过2KB)。
而 post 会将表单数据放在HTML表头,用户无法查看参数内容。因此,适用于安全系数比较高的数据传输,对客户端也没有传输容量限制(至于容量大小取决于服务器)。
此外还有name属性(表单名称),target属性(何处打开action中的地址,默认值_self本窗口打开,此外还有_blank空白窗口打开,_parent | _top | iframename)以及enctype(不太懂,先放着,用到了再说~)
2. <input type="" name="">标签(需放在form中使用)
目前HTML4中支持的有10种type类型:text | password | submit | redio(单选按钮) | checkbox(复选按钮) | reset | button | image | file | hidden(隐藏输入字段)
新HTML5中新增type类型:tel | email | url | number | range | datetime | datetime-local | time | date | week | month | search | color(许多浏览器都不支持,谨慎使用~)
本来打算用tel类型,结果五大主流浏览器都不支持,好气哦~
3. placeholder属性设置样式: https://blog.csdn.net/qinjm8888/article/details/79047638
4. 形成按钮的几种方式: div+a标签、button标签、form中的input标签;
5. text-decoration:none(用于去除a标签文字下划线的格式再好不过啦~) | underline | overline | line-through | blink | inherit 文本修饰
word-spacing: normal | length | inherit 字间隔(不知道为什么用在button按钮的文字上就不可以)
6. 接触过的行内元素与块级元素以及空白元素:
行内元素: | <span> | <a /> | <b> | <br /> | <code> | <em> | <i> | <img> | <strong> | <input> | <q> | <sub> | <sup> | <textarea>
块级元素:<div> | <dd> | <dt> | <dl> | <form> | <h> | <hr /> | <ol> | <ul> | <li> | <p> | <table> | <td> | <th> | <tr> | <pre>
空元素 ( 没有内容的 HTML 元素被称为空元素 ):<br/> | <hr /> | <input> | <img> | <link> | <meta>
9. 三问三答:
img是什么元素?行内元素。
- 判断一个元素是行内元素,还是块元素,无非就是看它是否是独占一行。img标签显然没有独占一行,固它是行内元素。
- 既然img是行内元素,那为什么可以通过CSS设置框高呢?
- 尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高。
- <img src="/i/mouse.jpg" height="200" width="200" />
- 什么是“置换元素”呢?
- 置换元素就是会根据标签属性来显示的元素。反之就是非置换元素了。
- 比如img根据src属性来显示,input根据value属性来显示,因此可知道img和input是置换元素,当然同理textarea, select,也是置换元素
10. <button>是可变元素,既可以是行内元素,又可以是块元素,取决于上下文语境。
评论