任务7-HTML4

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

  • 有序列表(ordered list) 跟做事情的操作步骤一样,有逻辑上的先后顺序,一般用数字来表示。
  1. 打开冰箱门
  2. 把大象放进去
  3. 关上冰箱门
  • 无序列表(unordered list)内容的罗列,无需考虑先后顺序。默认格式:每项前有个小黑点。
 
  • 看书
  • 看电影
  • 听歌
  • 自定义列表(definationg list)表示项目和其注释的列表。以
    标签开始,列表项,列表项注释。* 注: *列表项和注释无需一一对应。
html常见表单标签
有序列表
无序列表
自定义列表
任务7-HTML4_第1张图片
dl标签

三者语义区别:ol有逻辑上的先后顺序,改变顺序就改变了整个列表的意义。ul可随意改变li的前后顺序。dl标签中, dd "在语义上", 应该是对 dt的注释说明, 而不应该是跟它无关的东西。

  • 有序列表嵌套


    任务7-HTML4_第2张图片
    有序列表嵌套
  • 无序列表嵌套


    任务7-HTML4_第3张图片
    无序列表嵌套
  • 自定义列表嵌套


    任务7-HTML4_第4张图片
    自定义列表嵌套
  • 混合嵌套


    任务7-HTML4_第5张图片
    混合嵌套

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


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

class是表示一类元素使用同一style的选择器。
id是全文档中唯一元素的选择器,用于布局。
也就是说,id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

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

块级元素一般都从新行开始,它可以容纳内联元素和其他块元素。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
常见标签:p/div/ol/ul/dl/form/table/h1/h2/h3/h4/h5/h6。
行内元素/内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。
常见标签:a/b/em/i/strong/font/img/input/select/span/textarea。
区别:

  1. 块级元素垂直方向排列,行内元素水平方向排列。
  2. 块级元素默认会撑满整个宽度,行内元素只占本身大小的空间,background-color会因为padding颜色的改变而占据空间,但是不影响布局。


    任务7-HTML4_第6张图片
    行内padding设置影响background-color
  3. 盒模型不同。
    行内元素width,height设置无效,margin,padding上下无效。可以设置line-height属性。
  4. 块级元素内可以包含块级元素和行内元素,行内元素内只能包含行内元素。

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

事实上,网页上所有元素都有display属性。一些元素display属性为block,比如div/li/p等,一些元素display属性默认为inline,比如a/img等。display属性可以被强制更改。

  • display: block 元素会具有块级元素的属性,独立占据一行,可以设置宽高。
  • display: inline 元素具有行内元素属性。
  • display: inline-block 行内块元素。含有这个属性的元素内部具有块级元素的一些属性,可以设置宽高等,同时这个元素外部可以与其他元素同行,表现为行内元素的一些属性。


    任务7-HTML4_第7张图片
    display

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

id用于布局和页面独一无二的元素。class用于样式相似的元素。




    
    


    
    
侧边栏
中心区块

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

htm css语义化有三个好处:一是方便搜索引擎或类似机器爬虫抓取网页信息;二方便开发者审查代码,降低维护成本;三为网页浏览者提供一个好的浏览体验,比如alt标签等。
html css语义化主要考虑从网页结构和内容考虑,选择语义化的标签及定义有意义的id、class的名称等。
一些细节问题:

  • 把css独立出来写,让html很好地展示页面结构和内容。
  • 少用div、span、br等无意义标签,用div的时候多考虑列表。
  • 在考虑浏览器兼容的情况下,多使用html 5这类语义化的标签。

html 5 新增语义化标签可以点击前辈博客HTML 5的革新——语义化标签

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

form表单主要用于用户与web服务器提交信息。
常用Input标签有:text输入文本、password输入密码、radio单选、checkbox多选、 select下拉列表、 button按钮、 submit提交。

post 和 get 方式的区别?

get主要用于获取信息,获取的数据数量少但是速度快,相关信息会在地址栏有所显示,浏览器历史记录也可以查询到密码,安全系数低。
post主要用于向服务器传输数据,数据的传输主要取决于服务器,安全系数比较高。

在input里,name 有什么作用?

name规定了Input元素的属性名称,没有name属性页面就无法向后台相关传输数据。
比如:html元素Input type='radio'分组,radio button控件在同一个分组类,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。


任务7-HTML4_第8张图片
name相同时

任务7-HTML4_第9张图片
name不同时

提交三者有什么区别?

submit默认为form提交,自动提交表单数据。
button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情。当然,button也可以完成表单提交的工作。
submit是一种特殊的button,一个表单只能有一个submit,却可以有多个button。
提交可以通过css做成button的样式,也不会提交数据。

radio 如何分组?

通过name,详见上上题目。

placeholder 属性有什么作用?

在未输入任何信息时,提示用户。


任务7-HTML4_第10张图片
Paste_Image.png

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

type=hidden 隐藏域是用于收集和发送信息用的。客户端不显示,但提交后,服务器能够接收,可以做表单验证值,拒绝来源不明的表单提交。

<input type="hidden" name="..." value="...">

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

你可能感兴趣的:(任务7-HTML4)