任务七
1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?####
答:
QQ截图20160921191242.png
语义上的区别:有序列表有编号(比如默认的1,2......)来排列列表项目的内容;无序列表有粗体实心黑圆圈来排列列表项目,自定义列表分为列表项目和项目描述;
在列表有明显的顺序的情况下使用有序列表,在列表项目并列的情况下试用无序列表,比如网站的导航条,自定义列表与无序列表用法差不多,但会比无序列表便捷一点。
嵌套:
QQ截图20160921194131.png
2.如何去除列表前面的点或者数字?####
答:使用list-style:none去除。
3.class 和 id 有什么区别?什么时候用 class 什么时候用 id?####
答:class定义一类元素,而id定义独一无二的元素,id的优先级要高于class。一个html的头、内容和尾部这些独特的用id,同类元素用class,尽量少用id。
4.块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?####
答:块级元素占用的是一整行,而行内元素占用的是它自身内容的宽度,块级元素不能同行排列,而行内元素是一并排列的;行内元素设置宽高对它自身没有影响,而块级元素可以设置宽高,块级元素可以设置padding和margin,而padding-top、padding-bottom、margin-top和margin-bottom对其没有影响。
Paste_Image.png
5.display: block、display: inline、display: inline-block分别有什么作用?####
答:display:block定义元素为块级元素;display:inline定义元素为行内元素;display:inline-block定义元素为行内块元素,可以使元素定义margin,width等,又可以使元素不换行。
6.下面代码是做什么的?抄写一遍下面的代码,注意class和id的使用及命名方式####
QQ截图20160921214210.png这个代码做了一个最基本的网页布局,值得注意的是{width:900px;margin:0 auto;}这段代码表示当宽度大于900px时,左右则根据宽度自适应相同值实现居中,当小于900px时,会出现滑条,且块内元素紧贴浏览器边框。
7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节####
答:语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。在平时写代码时要注意命名以及大小写,还要注意标签的合理使用等。
8.form表单有什么作用?有哪些常用的input 标签,分别有什么作用?####
答:form表单将用户提交的数据交到后台;
<imput type="text">用于文本输入的单行输入字段(默认只有20字符);
<input type="password">用于输入密码;
<input type="radio">用于创建单选按钮;
<input type="checkbox">用于创建复选框,加入checked会默认选取哪个;
<input type="hidden">隐藏域,用于隐藏数据,可作为缓存以及校验;
<textarea>文本域,用于写入多行文本;
<select><option>定义下拉列表,加上selected可以默认选取哪个;
9.post 和 get 方式的区别?####
答:1.数据提交方式不同,get提交的数据会出现在url中,而post是看不见的;2.get用于提交少量数据,而post用于提交大量数据;3.get最多提交1K的数据,post理论上没限制,受服务器控制;4.get提交的数据在浏览器记录里看的到,安全性不好。
10.在input里,name 有什么作用?####
答:name 属性规定 input 元素的名称,name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别?####
答:<button> 标签定义一个按钮,在 button 元素内部,你可以放置内容,比如文本或图像,这是该元素与使用 input 元素创建的按钮之间的不同之处。但是如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值;<a class="btn" href="#">提交</a>这是链接,点上去会转到相应的页面,没有提交数据;<input type="submit" value="提交"> 可以将表单的数据提交给后台。
12.radio 如何 分组?####
答:radio中name相同的可以实现单选,且要给value值。
13.placeholder 属性有什么作用?####
答:placeholder属性可描述提供输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
14.type=hidden隐藏域有什么作用? 举例说明####
答:隐藏域用户看不到,可以用作缓存数据和安全校验
下图的secret极为隐藏域。
Paste_Image.png