美文网首页
任务7-HTML4

任务7-HTML4

作者: 咩咩咩1024 | 来源:发表于2016-08-02 00:15 被阅读13次

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

    1.有序列表使用数字编号来记录有序项目的顺序;无序列表使用符号来记录无序项目的顺序;自定义列表由两部分组成,定义条件和定义描述;
    2.举例说明:

    代码
    例子

    3.区别:有序列表记录有序项目的顺序,不可以颠倒次序;无序列表定义无序项目的顺序;自定义列表,定义条件和定义描述,会默认前后层级关系;
    4.答案同上;
    5.如何嵌套:三种列表都可以相互嵌套;

    列表嵌套

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

    1.设置li的样式list-style:none;就可以去掉默认的点和数字;

    • list-style:none去掉默认的点和数字;
    • list-style:disc默认的实心圆点;
    • list-style:circle默认的空心圆点;
    • list-style:square标记样式变为实心方块;
    • list-style:decimal标记的是数字;

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

    1.区别:

    • 在css中,id加前缀“#”;class前缀加“.”;
    • 一个id在一个页面中只能使用一次,class可以多次引用;
    • id是一个标签,用于区分不同的结构和内容,就像名字,如果一个屋子里出现两个相同的名字,就会出现混淆;class是一个样式,可以嵌套在任何结构和内容上,就像一件衣服;
    • id在css的使用中是先找到结构内容在给它定义样式;class是先定义好样式,在套给多个结构内容;
    • 当JavaScript要修改一个标签的属性时候,会将id作为该标签的唯一标识进行操作;而如果JavaScript使用class来操作则可能也会操作其他的元素;

    2.用法:id是唯一的,所以尽量在结构外围使用,通常用于结构布局;class是某一类的,可以重复的,尽量在结构内部使用,通常用于样式定义;

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

    • 块级元素:元素从上到下垂直排列,各自独占一行;可以用css样式定义宽高;
    • 行内元素:元素在一行内水平排列,高度由元素本身的内容决定;

    2.区别:

    • 块级元素独占一行,行内元素在同一行内水平排列;
    • 块级元素可以设置元素的高度,行高,已经内外边距;行内元素的高度,行高已经内外边距不可以改变;
    • 块级元素可以设置宽高;行内元素不可以,只能用自身元素的大小;
    • 块级元素可以容纳行内元素和其他块级元素;行内元素只能容纳自身的文本和其他的行内元素;

    3.常用标签:

    • 块级元素:address地址;div常用块级容器;dl自定义列表;ol有序列表;ul无序列表;form表单;h1-h6第一级至第六级标题;hr水平分割线;menu菜单列表;p段落;table表格;
    • 行内元素:a链接;br换行;em强调;i斜体;img图片;input输入框;label表格标签;small小字体;span常用內联容器,定义文本内区块;strong粗体强调;textarea多行文本输入框;u下划线;

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

    1.display:block将元素定义为块级元素,具有块级元素的特征;
    2.display:inline将元素定义为行内元素,具有行内元素的特征;
    3.display:inline-block将元素定义为行内块元素,元素既有块级元素的特征(可改变元素宽高等)也有行内元素的特征(元素在一行内水平排列);

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

    1.3个id将页面分成三大区块,分别是页面的头部导航条,中间的内容分侧边栏和中间主要内容区块,页面的底部区块;因为id是唯一的,所以通常用于结构布局;3个相同的类选择器定义了页面区块的样式;三个区块设置了宽度,并且规定了margin:0 auto;所以页面的三个区块宽度固定并且居中显示;另外写代码一定要注重语义化,如header,content,footer分别表示页面的头部,内容,底部;nav表示导航,aside表示侧边栏等;

    手抄代码

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

    1.如何理解语义化和注意细节:
    语义化的含义就是用正确的标签做正确的事情,HTML代码语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式css的情况下也以一种文档格式显示,并且提高代码的可读性和维护性。搜索引擎的爬虫依赖于标记来确定上下文和关键字的权重,利于SEO。举例说明,按钮用<button>,输入框用<input>等;还有css的id和class在命名的时候也尽量遵循语义化,命名尽量和元素的内容相关,提高代码的可读性和维护性。

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

    1.form的作用:向服务器提交数据,例如用户名、密码、回复的内容等;
    2.常用的input标签及作用:

    • maxlength规定输入字段中的字符的最大长度;
    • name规定input元素的名字;
    • placeholder输入框的提示;
    • value规定input元素的值;
    • type规定input元素的类型;type的值又分多种:
    • button 也是提交按钮,只是如果不写JavaScript控制它,按下去没有什么效果;
    • checkbox 复选框
    • hidden 隐藏域,用户看不到,用于暂存数据,或者安全校验;
    • password 输入的是密码,会显示实心圆点;
    • radio 单选框;
    • submit 提交按钮,点击之后会提交form表单,页面刷新;
    • text 定义单行输入框,一般用于姓名,用户名,电子邮箱等;
    • textarea 定义多行输入框,可以在里面输入多行文字,一般用于回帖;

    九、post 和 get 方式的区别?

    1.数据提交方式不同:get提交的数据url是可以看到的,post提交看不到;
    2.get一般用于提交少量数据,post用于提交大量数据;
    3.get最多提交1k数据,受浏览器的限制;post理论上没有限制,受服务器的限制;
    4.get提交的数据在浏览器的历史记录中,安全性不好;

    十、在input里,name 有什么作用?

    1.name属性规定了input元素的名称;
    2.name属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript引用表单数据;
    3.只有在设置了name属性的表单元素才能在提交表单时传递他们的值;
    4.通俗来事就是:name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

    十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别?

    1.<button>提交</button> 也是提交按钮,知识如果不写JavaScript控制,按下去没有什么效果;
    2.<a class="btn" href="#">提交</a> 这是一个类名为“btn”的超链接,会打开里面的url,跟单纯的按钮功能不同,语义化不同;
    3.<input type="submit" value="提交">这是form表单里面的提交按钮,一般是在表单中使用,会将数据提交到服务器;

    十二、radio 如何 分组?

    1.radio定义单选按钮,需要在radio中的name的值设置相同,就可以分组,实现单选效果;如果name值不同,就无法分组;
    2.案例:


    代码案例 显示效果

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

    1.placeholder的值即是表单提示的内容;

    示例 示例

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

    1.隐藏域,用户看不到,但是实际存在,用于收集和发送信息;当点击提交时,隐藏域的信息一并被提交。由于多个表单每个都有隐藏域的存在,在发送信息时,也可以让程序知道提交的是哪一个表单的数据。而且可以用于确定用户身份,进行安全性校验。
    2.示例:


    Paste_Image.png Paste_Image.png Paste_Image.png
    本教程版权归作者和饥人谷所有,转载须说明来源!

    相关文章

      网友评论

          本文标题:任务7-HTML4

          本文链接:https://www.haomeiwen.com/subject/jqztsttx.html