任务7_HTML4

课程目标

• 熟悉列表的使用场景和用法
• 理解HTML语义化
• 理解行内元素、块级元素概念
• 熟悉常见input表单的使用方式
• 掌握 POST 与 GET 方式的区别

学习建议

语义化、行内元素块级元素、POST 和 GET 的区别这是面试必问的知识点

预习视频

• 课程视频-HTML-列表|块级元素|行内元素
• 课程视频-HTML-Form表单
• 课程视频-HTML-input类型|GET&POST
• 课程视频-HTML-input&iframe

课程任务

问答

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

有序列表、无序列表、自定义列表如何使用？写个简单的例子。

• 有序列表

• 定义和用法

  • 标签定义有序列表。有序列表可以是数字或字母顺序。
    1. 请使用
    2. 标签来定义列表项。

• 属性

  • 

    有序列表的属性

以下为代码实例：

有序列表
有序列表
有序列表

• 无序列表（使用频率最多的列表）
• 定义和用法
  • 标签定义无序列表
  • 提示与注释
    • 即使有属性来约束其外表，但是不建议属性，推荐用CSS去实现这一效果
  • 可选的属性
    • 

      无序列表可选的属性

  以下为代码实例：

  
  
  一个嵌套列表：
  
    
  咖啡
    
  茶
      
  
      
  红茶
      
  绿茶
        
  
        
  中国茶
        
  非洲茶
        
      
      
    
    
  牛奶
  
  
  
  

  • 自定义列表
  • 定义与用法
    • 定义一个定义列表，
      为表头
      为列表内容

  以下为代码实例：

  
  
  一个定义列表：
  
     
  计算机
     
  用来计算的仪器 ... ...
     
  显示器
     
  以视觉方式显示信息的装置 ... ...
  
  
  
  

  以下为简单的例子：

  

  列表方面的简单的例子

  三者在语义上有什么区别？在哪些情况下使用哪种（重要）？

  • 标签定义有序列表，强调的是先后次序之分
    1. 标签定义无序列表，大多对顺序没有要求或者为并列的关系

       • 标签定义自定义列表，表现为自己定义项目，并对该项目进行说明，有时更简单精确，语义化更好

       如何嵌套？

       直接在

    2. 标签里面再写入
       等标签，以下为简单的代码展示

       
       
       一个嵌套列表：
       
         
       咖啡
         
       茶
           
       
           
       红茶
           
       绿茶
           
         
         
       牛奶
       
       
       
       

       详见图“列表方面的简单例子”实例

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

       调研得到去除列表前面的样式有两种途径

       • 在head里的style内，写入如下代码
       • 在body内部的ul,ol内部写入如下代码

       
       
       你
       我
       他
       
       
       

       参考文章：

       • Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

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

       class 和 id 有什么区别？

       • class的定义和用法

       • class 选择器设置标签的类，用于指定元素属于何种样式的类。

       • id的定义和用法：

       • id选择器设置标签的标识，用于定义一个元素的独特的样式。

       • 两者的区别

       • class可以反复使用而id在一个页面中仅能被使用一次

       • id具有唯一性，而class是一个类

       • class类选择器的权重没有id选择器的权重大

       什么时候用 class 什么时候用 id？

       • 什么时候用class
       • 由于class可以在页面中被无限使用，所以可以尽可能多的利用class
       • class标签定义一类的属性，当网页中好多内容需要利用同一样式时，请利用class来减小工作量，简化代码
       • 什么时候用id
       • 在页面较大的模块里可用id来来
       • 由于id在网页中是唯一的，可用id来区分不同的模块，比如页面中有如下模块时：今日要闻、推荐新闻、最新新闻...时可用id来区分
       • 另外由于id在页面内是唯一的，最好留给js去用

       参考文章：

       • HTML中id、name、class 区别
       • CSS中ID与CLASS的区别

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

       块级元素、行内元素是什么？

       • 块级元素的定义和用法：
       • 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
       • 行内元素定义和用法：
       • 行内元素只占据它对应标签的边框所包含的空间。
       • 有什么区别
       • 块级元素会占据一整行，行内元素只会占据自身内容的宽度（可利用chorme的开发者工具去检查元素是块级还是行内的，具体表现为鼠标悬停在上面是一整行（块级元素）还是一小区域（行内元素））
       • 行内元素可以并排显示，块级元素不会
       • 默认情况下，块级元素会新起一行，行内元素不会
       • 块级元素可以包含行内元素和其他块级元素，而行内元素只能包括数据和其他行内元素

       分别对应哪些常用标签

       • 块级元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form
       • 行内元素：a、span、img、input、button、em、textarea

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

       • display: block的定义和用法
       • 此元素将显示为块级元素，此元素前后会带有换行符。
       • display: inline定义和用法：
       • 默认。此元素会被显示为内联元素(也称作内嵌元素、行内元素)，元素前后没有换行符。
       • display: inline-block的定义和用法：
       • 行内块元素，既能像行内元素一样水平排列，又有块级元素的特性，
         注：IE8以下不能用

       下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

       
       
       
           
           
       
       
           
       
               
       
                   
                   
       
                       
       导航1
                       
       导航2
                       
       导航3
                   
               
           
           
       
               
       
                   
       侧边栏
                   
       中心区块
               
           
           
       
               
       这里是 footer
           
       
       
       

       以上代码做了如下的几件事：

       • 利用id将整个页面分为了header/content/footer三个部分
       • content和footer里面都有利用class定义的"wrap"类
       • CSS将wrap类的类型设置为900px宽，可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

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

       HTML语义化表现为选择合适的标签，使用合理的代码结构，这样可以将页面合理的分层，使其更加清晰明了，而且便于开发者阅读，同时能够让浏览器的爬虫和机器更好地去解析

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

       form表单有什么作用？

       用于把用户输入的数据提交到后台

       有哪些常用的input 标签，分别有什么作用？

       input的定义和用法：用于搜集用户的信息等，他有如下常用的标签

       • checked：规定此 input 元素首次加载时应当被选中
       • disabled：规定此 input 元素首次加载时应当被选中
       • maxlength：规定输入字段中的字符的最大长度
       • name：定义 input 元素的名称，所有的input必须有name
       • placeholder：规定帮助用户填写输入字段的提示
       • value：规定 input 元素的值
       • type
         • type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；

       placeholder的作用是为了在输入框里输入一些提示信息
       maxlength的作用是限制了最大输入的字符数

       • type="password": 用于输入密码，输入的内容显示为星号。
         

       • type="radio": 单选圆圈按钮。注意：name要相同才能实现单选，value要有值

        男
        女
       

       • type="checkbox":复选框。加checked属性会默认选上。提交时，如果选中（如bike），则bike=on

       自行车
       汽车```
         - type="textarea": 文本域，用于输入多行文本
       

         - type="hidden": 隐藏域，用户看不到，用于暂存数据。或者安全性校验
       

       
       

        - type="submit"
       

       
       > ### post 和 get 方式的区别？
       
       |比较方面|post|get|
       |:--:|:--:|:--:|
       |数据提交方式|看不到|提交的数据url可以看到|
       |数据量|提交大量数据，从而得到少量的提示|提交少量数据，从而得到大量数据（比如搜索和查询）|
       |数据量限制|理论上无限制，受服务器限制|最多提交1k数据，受浏览器的限制|
       |安全性|安全性较好|提交的数据在浏览器历史记录中，安全性不好|
       
       注：若method没写，则默认get
       
       > ###在input里，name 有什么作用？
       
       name属性的定义和用法：用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
       - 在单选框中如果name相同，则他们为一组
       - 复选框中name可相同
       以下为实例：
       

       爱好
       篮球
       足球

       
       > ###```提交```、```提交```、``````三者有什么区别？
       
       - ```提交```没有任何作用，只是单纯的两个字
       - ```提交```虽然是一个链接，但是他并没有把数据提交到后台，点击效果仅仅是跳转到了当前的页面
       - ``````提交了一个表单的数据
       以下为实例：
       ![提交按钮三者的区别.png](http://upload-images.jianshu.io/upload_images/2331515-ba7a50ea1a914c93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
       
       > ### radio 如何分组?
       
        type="radio"为标签里的属性: 代表单选圆圈按钮。
       name要相同才能实现单选的分组，并且value要有值
       

       男
       女

       
       > ### placeholder 属性有什么作用?
       
       placeholder的作用是为了在输入框里输入一些提示信息
       以下为实例：
       ![placeholder.png](http://upload-images.jianshu.io/upload_images/2331515-5f0b4b84fcfea843.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
       
       > ### type=hidden隐藏域有什么作用? 举例说明
       
       "type=hidden"为隐藏域，用户看不到，用于暂存数据。或者安全性校验
       以下为实例，只有后台接收到hidden里的正确的数字时，才会接受其所提交的数据
       

       
       
       
       用户名：
       
       
       
       
       
       密码：
       
       
       
       
       
       
       
       
       
       

       ![hidden.png](http://upload-images.jianshu.io/upload_images/2331515-00ffa192df2de521.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
       
       ***
       
       > ###代码
       
       - [task_07_01](https://github.com/jirengu-inc/jrg-renwu5/blob/master/%E5%88%98%E6%B1%9F/task_07/task_07_01.html)
       
       ***
       
       ***本教程版权归本人和饥人谷所有，转载须说明来源***