任务七~HTML4

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

有序列表、无序列表、自定义列表如何使用？简单例子如下:

代码



   
       
       任务7
   
   
       豆瓣电影评分
       
           肖申克的救赎
           这个杀手不太冷
           阿甘正传
           霸王别姬
       
       动漫人物
       
           蒙奇·D·路飞
           旋涡鸣人
           坂田银时
           旗木卡卡西
       
       进击的巨人角色
       
           艾伦·耶格尔
           《进击的巨人》中主人公，拥有强韧的精神力量与非凡的行动力，对墙壁外的世界拥有比任何人都要强烈的憧憬，从小便立志要加入调查兵团。
           三笠·阿克曼
           《进击的巨人》中女主角,以第104期训练兵团首席的身份毕业，性格沉稳冷静，有以一敌百的战斗力。
           利威尔·阿克曼
           《进击的巨人》中的角色，为调查兵团的士兵长、调查兵团特别作战班利威尔班班长，通称“利威尔兵长”或“里维士兵长”。

三种列表效果图

三种列表效果图

三者在语义上的区别是：

有序列表的列表项有先后次序之分
无序列表的列表项对顺序没有要求且大多处于并列关系
自定义列表则是自己定义项目并对项目进行说明

列表嵌套

在要嵌套的列表项里再加入列表，代码如下



   
       
       任务7-1~列表的嵌套
   
   
       动漫
       
           
               海贼王
               
                   蒙其·D·路飞
                   罗罗诺亚·索隆
                   娜美
                   GOD·乌索普
                   山治
                   托尼托尼·乔巴
                   妮可·罗宾
                   弗兰奇
                   布鲁克
               
           
           
               银魂
               
                   坂田银时
                   志村新八
                   神乐
                   桂小太郎
                   坂本辰马
                   高杉晋助

列表嵌套效果图

列表嵌套

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

在css样式里面加入如下代码就可以去除列表前面的点或者数字

ul,ol{
      list-style:none;/*或者list-style-type:none;*/
}

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

class和id的区别

class是类选择器，类选择器在一个页面中可以有多个相同的类名；id选择器具有唯一性，在一个页面中不会同时出现id相同的属性值；
class类选择器，需要在HTML给需要的元素设置属性值的前面加上.号,比如，.header{font-size:14px;};id选择器则需要在id属性值的前面加上#号，比如，#header{margin:0 auto;}
class类选择器的权重没有id选择器的权重大

class类选择器和id选择器的使用

class类选择器用于页面中重复出现，反复多次利用的html元素
id选择器用于页面中只出现一次的Html元素，也用于html主体结构的划分

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

块级元素、行内元素的定义（定义来自CSS权威指南）

块级元素指元素在正常流中时，会在其框之前和之后生成“换行”，所以处于正常流中的块级元素会垂直摆放
行内元素指在正常流中时，其不会在之前或之后生成“行分隔符”，它们是块级元素的后代

块级元素和行内元素的不同：

块级元素会独自占据一行；而行内元素所占据的空间仅仅是其自身内容的宽度
对于块级元素，可以设置margin,padding,width,height；而对于行内元素，设置width、height不起作用（行内元素的宽高只由其本身内容所决定），设置margin、padding只有水平方向有有效，但上下方向不占用空间，上下方向只看得到背景设置

块级元素、行内元素别对应哪些常用标签

块级元素对应的常用标签有：h1~h6、p、div、ul、ol、dl、table、form、blockquote、header、section、aside、footer、figure、article
行内元素对应的常用标签有：a、span、em、i、em、strong、img、input、textaera

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

display:block使元素成为块级元素
display:inline使元素成为行内元素
display:inline-block使元素成为行内块元素
display:block使元素成为块级元素

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

该代码布置了一个页面，该页面由三大部分组成，分别是header、content、footer，而这三个结构性的区块的元素则是用id选择器，因为其具有唯一性；在这三个区块下重复利用的元素则是使用的是类选择器；在header中，有一个图片链接，还有一个导航栏；在content中，有一个边栏和中心区块；footer在页面最下边；在.wrap中，设置了宽度为固定900px的区域且是水平居中的，直到页面宽度小于等于900px时，该区域直接铺满整个页面

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

语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，代码具有良好的可读性，搜索引擎更容易理解文档
平常写代码的时候要注意不要没有语义化的标签，比如各种各样的p、div等等；其次命名有规则且统一
知识拓展

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

form表单的作用：用于为用户输入创建 html表单，并向服务器传输数据
form标签属性介绍

属性	说明
action	表示表单提交的页面
method	表示表单的请求方式：有 POST 和 GET 两种，默认 GET
name	设置表单名称，以便程序调用
target	设置提交时的目标位置：_blank、_parent、_self、_top
enctype	表示浏览器对发送给服务器的数据所采用的编码格式,分别是application/x-www-form-urlencoded、multipart/form-data、text/plain
autocomplete	设置浏览器记住用户输入的数据，实现自动完成表单。默认为 on 自动完成，如果不想自动完成则设置 off
novalidate	设置是否执行客户端数据有效性检查

常用的Input标签（input都要有name属性）
文本输入

年龄：

密码

密码：

单选按钮

性别：男
     女

复选框

爱好：游戏
     足球
     旅游

多行文本输入

评论：

隐藏文本输入~用户看不到表单效果，但表单存在，可以向后台发送隐藏的value数据，用于安全校验，防止伪造表单数据

下拉选择框

九、post 和 get 方式的区别？

数据提交的方式不同，get提交数据的url可以看到，而post看不到；
get用于提交少量数据，post用于提交大量数据；
由于浏览器的限制，get最多提交1k数据；而post理论上无限制，受服务器限制；
get提交的数据在浏览器记录中，安全性不好

十、在input里，name 有什么作用？

name 属性规定了 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。（W3shool）

十一、、提交、三者有什么区别？

设置一个一般性按钮，没有任何作用
只是一个链接，点击链接到本页，无法提交数据
能够提交表单数据

十二、radio 如何分组?

把 name值设置为相同的即可分为一组

十三、placeholder 属性有什么作用?

placeholder是文本框中的预留信息，用于提示用户

十四、type=hidden隐藏域有什么作用? 举例说明

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



    
        
        任务7-1~列表的嵌套
    
    
        表单校验
        
            用户名：
            
            

            密码：

当点击提交的时候，后台如下图

hidden的作用

在代码里设置的type="hidden"信息,一同被发送到服务器校验，若检验满足，则才可以提交表单！
（注：其它更多用法）

任务七~HTML4

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

豆瓣电影评分

动漫人物

进击的巨人角色

动漫

海贼王

银魂

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

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

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

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

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

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

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

九、post 和 get 方式的区别？

十、在input里，name 有什么作用？

十一、提交、提交、 三者有什么区别？

十二、radio 如何 分组?

十三、placeholder 属性有什么作用?

十四、type=hidden隐藏域有什么作用? 举例说明

表单校验

你可能感兴趣的:(任务七~HTML4)

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

十一、、提交、三者有什么区别？

十二、radio 如何分组?