2016.9.15 HTML3

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？

• 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于
  标签。每个列表项始于
  • ，语法为：
    
    
    
    • 第一行
    
    
    • 第二行
    
    
  • 有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。
    有序列表始于
    标签。每个列表项始于
    1. 标签。语法为：
       
       
       
       1. Coffee
       
       
       2. Milk
       
       
       
       在实际应用中我们很少使用有序列表，为了美观，一般将列表序号替换为图片等。
    2. 定义列表语义上表示项目及其注释的组合，它以

       标签（definition lists）开始，自定义列表项以

       （definition title）开始，自定义列表项的定义以

       （definition description）开始。语法为：
       

       
       

       CSS

       
       

       CSS概念

       
       

       CSS应用

       
       

       CSS hacks

       
       

       
       

       

       2010041800122977.png

       
       从语义上来讲，三组标签分别对应不同具有含义的列表：无序列表适合成员之间无级别顺序关系的情形；有序列表适合各项目之间存在顺序关系的情形；定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，也就是说

       与

       在其中数量不限、对应关系不限。

  2.如何去除列表前面的点或者数字？

  list-style-type为列表显示类型 ，它共有9种常见属性值：

  元素	样式
  disc默认值	实心圆
  circle	空心圆
  square	实心方块
  decimal	阿拉伯数字
  lower-roman	小写罗马数字
  upper-roman	大写罗马数字
  lower-alpha	小写英文字母
  upper-alpha	大写英文字母
  none	不使用项目符号

  去除列表标记的样式，使用：list-style-type：none；

  3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？

  css选择器	符号	作用
  class	.	可以应用到任何结构和内容上
  id	#	区分不同结构和内容，优先级高于class选择器

  4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

  HTML中大部分元素被分为块元素block level element和行内元素 inline element

  • 块级元素会独占一行，其宽度自动填满其父元素宽度。行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
  • 块级元素可以设置 width, height属性，行内元素设置width, height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】
  • 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果即（水平方向有效，竖直方向无效）
    相关对应标签
  

  ](http://upload-images.jianshu.io/upload_images/2957656-056f8ad6999e6cd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  4.display: block、display: inline、display: inline-block分别有什么作用?

  display: block是将元素呈递为块元素，高度、行高、顶部和底部的边距都是可控的。
  display: inline是将元素呈递为内联元素，高度、上下边距不可控，元素高度为文字或图片高度。
  display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性。

  5.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节?

  • 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

  6.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

  表单用于向后台提交数据,并且接受数据.
  type 属性规定 input 元素的类型 语法如下
  type的属性值如下:

  值	描述
  button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
  checkbox	定义复选框。
  file	定义输入字段和 "浏览"按钮，供文件上传。
  hidden	定义隐藏的输入字段。
  image	定义图像形式的提交按钮。
  password	定义密码字段。该字段中的字符被掩码。
  radio	定义单选按钮。
  reset	定义重置按钮。重置按钮会清除表单中的所有数据。
  submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
  text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

  举一例: I have a bike

  • 其中name的值为控制台查看时的左侧,value的值是输入值,也就是提交的值.具体提交为name=value.
  • 在对付checkbox时,name的值相同时则分为一组.

  7.post 和 get 方式的区别？

  GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

  1. GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中）如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII.
  2. GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了,IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持.
  3. 理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力。
  4. POST的安全性要比GET的安全性高.通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击.

  总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET".

  8.在input里，name 有什么作用？

  name 属性规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值.

  9.提交 提交 三者有什么区别？

  提交是一个普通按钮,一般用于js的事件触发.
  提交是一个链接按钮进入到新的页面或者是同一页的锚点.
  成为一个提交表单的按钮.

  10.radio 如何 分组?

  name是表单提交数据的标示,相同的name则为一组.

  11.placeholder 属性有什么作用?

  在用户需要输入的地方写入默认的字符用于提示输入内容.placeholder 属性提供可描述输入字段预期值的提示信息（hint）.该提示会在输入字段为空时显示，并会在字段获得焦点时消失.

  12.type=hidden隐藏域有什么作用? 举例说明

  用于暂存数据,或者是安全校验

  代码题1

  大多数情况id标签用于构建网页的逻辑结构,将网页分为 header标题,content内容和footer页脚.在标题下用nav类构建了一个导航栏.在内容区构建了侧边栏和主内容区.整个页面宽度900px,居中,同时语义化非常好,很清晰.