任务7-HTML4

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

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
本教程版权归作者和饥人谷所有,转载须说明来源!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 课程目标 熟悉列表的使用场景和用法 理解HTML语义化 理解行内元素、块级元素概念 熟悉常见input表单的使用方...
    饥人谷_江君阅读 258评论 0 0
  • 1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    墨月千楼阅读 248评论 0 0
  • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    鸿鹄飞天阅读 656评论 0 0
  • 1 . 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要...
    osborne阅读 514评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139