任务7-HTML4

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

• 有序列表：按照字母或数字等顺序排列的列表项目。 注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。有序列表始于
  标签。每个列表项始于
  1. 标签。
     如：

有序列表

有序列表

的属性标记：、。是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在
1. 标签中设定value＝"n"改变列表行项目的特定编号，例如
7. 。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。使用这些属性，把它们放在
   或
   1. 的的初始标签中。
      如：
      

      Paste_Image.png
      • 无序列表：“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是在各条列前面使用●□◇◆等符号以示区隔。无序列表始于
        标签。每个列表项始于
        • 标签。
          如：
        

        无序列表

        无序列表

        的type属性有三个数值可选，这三个选项分别为：disc实心园、circle空心园、square小方块。 默认属性是disc实心园。
        如：
        
        Paste_Image.png
        • 自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

          标签开始。每个自定义列表项以

          开始。每个自定义列表项的定义以

          开始。
          如：

        
        自定义列表

        • 区别及使用场景：对于一个列表项目，三种方法都可以实现，但是在有严格顺序要求的情况下，使用有序列表最好。在内容是并列的情况下，最好用无序列表，不需要非常注意次序，只需要列出即可。自定义列表用法和无序列表一样，不过比无序列表更便捷。

        • 嵌套：

        
        简单的嵌套

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

        使用list-style:none；

        
        Paste_Image.png

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

        • 区别：
          a. class在样式可以使用多次，而id只能使用一次。
          b. class书写前缀使用“.”，而id的前缀使用“#”。
          c. id是一个标签，用于区分不同的结构和内容，就像名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，使用时并没有规定次数和使用条件。
        • 用法：
          id在页面中是独一无二的，在划分页面的大区块的时候使用，这样大的区块不会受其他的样式的影响。比如地图上的省份，就是独一无二的。
          class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。

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

        • 定义：
          块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。行内元素，也叫内联元素或者内嵌元素，只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。
        • 区别：
          a. 块级元素可以包含行内元素，也可以包含块级元素，行内元素不能包含块级元素，块级元素在浏览器显示时通常会以新行来开始或者结束，内联元素在显示时通常不会以新行开始。
          b. 块级元素可以设置宽高，内联元素在没有将其转换成块级元素之前是无法设置它的宽高的，内联元素的宽高总是随着自身内容的增减去扩大缩小.
          c. 块级元素与行内元素的属性不一样，块级元素设置margin和padding是正常的， 内联元素设置margin和padding的上下是无效的，但是可以使用（line-height）设置它的行高，将其撑开。
        • 常用标签
          块级元素：div、p、h1...h6、table、tr、ol、ul、li、dl、dt、form
          行内元素：a、span、img、input、button、em、textarea

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

        display:block就是将元素显示为块级元素
        display:inline就是将元素显示为行内元素
        display:inline-block表示此块级元素既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置上下左右的边距，但缺点是IE8以下不能使用。当然要实现这样的效果也可以使用浮动来实现。

        
        display属性

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

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

        这个页面里面有头部（header），内容（content），页脚（footer）三大块，用id标识，头部里面有无序的三个导航链接，内容部分由一个侧边栏和一个中间区组成。在这三大块中均有一个使用wrap作为class的类名的类选择器，在css样式里面对wrap进行统一设置，用margin:0 auto的方法，使页面大于固定宽度900像素时，自动居中。

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

        语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理。
        在平时写代码中要规范格式，统一风格。对于单词的命名大小写要统一，需要连接的地方用“-”不要用下划线“_”。

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

        标签用于为用户输入创建 HTML 表单。它可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
        属性：

        属性	值	描述
        accept-charset	charset-list	规定服务器可处理的表单数据字符集。
        action	URL	规定当提交表单时向何处发送表单数据。
        autocomplete（H5新增）	on off	规定是否启用表单的自动完成功能。
        enctype	见说明	规定在发送表单数据之前如何对其进行编码。
        method	get post	规定用于发送 form-data 的 HTTP 方法。
        name	form_name	规定表单的名称。
        novalidate（H5新增）	novalidate	如果使用该属性，则提交表单时不进行验证。
        target	_blank _self _parent _top	规定在何处打开 action URL。

        说明：

        • application/x-www-form-urlencoded
        • multipart/form-data
        • text/plain

        input输入表单有以下几种类型：

        • type="text"，用于输入文本，placeholder属性（可选）展示的是输入框的提示，maxlength（可选）限制最大的输入长度；

        

        文本

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

        

        密码

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

        

        单选按钮

        • type="checkbox" 复选框。加上checked属性会默认选上；

        

        复选框

        • type="textarea" 文本域，用于输入多行文本；

        

        文本域

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

        

        隐藏域

        • type="submit" 提交按钮，把form表单的所有内容发送给服务器。

        

        提交按钮

        • select:选择列表，selected属性会默认选中该项目

        

        选择列表

        9. post 和 get 方式的区别？

        方面	GET	POST
        后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
        书签	可收藏为书签	不可收藏为书签
        缓存	能被缓存	不能缓存
        编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
        历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
        对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
        对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
        安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
        可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

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

        name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
        当name的值相同时表示一组，可以实现单选。复选框中，可以把name值设置成一个数组，比如：

        男
        女

        旅游
        宠物

        11. 提交、提交、 三者有什么区别？

        提交标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。但是它存在一定的缺陷就是是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。
        提交这是一个文本链接，点击提交会跳转到另一个页面，但是不会向后台提交数据。这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。

        12. radio 如何分组?

        radio是单选类型，当name相同时说明他们是同一组，可以实现单选。

        男
        女

        13. placeholder 属性有什么作用?

        placeholder 属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。
        只有IE8以上的浏览器才支持此功能。

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

        隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。它可以用于暂存数据以及安全性校验认证。
        如：

        

        代码

        

        效果

        本教程版权归本人和饥人谷所有，转载须说明来源