前端学习任务七

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

如何使用?
  • 有序列表


    1.png
  • 无序列表


    Paste_Image.png
  • 自定义列表:自定义列表不仅仅是一列项目,是项目及其注释的组合。


    Paste_Image.png
区别?嵌套?
  • 有序列表是一列项目,列表项目使用数字进行标记。有序列表始于< ol >标签。每个列表项始于 < li > 标签。
  • 无序列表也是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于< ul >标签,每个列表项始于< li >,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  • 自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

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

  • 将属性list-style设置为none;

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

  • class是类,可以定义多个元素;id只能定义一个元素。ID的样式优先级高于Class。
  • 单一的元素,或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。

块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?
display: block、display: inline、display: inline-block分别有什么作用?

  • 块级元素顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的< div >、< p >、< ul >、< h1 >、< h2 >等默认状态下都是属于块级元素。默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。
  • 行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有< a >, < b >、< i >、< em > ,< strong >等。
  • 两者的区别
  • 尺寸—块级元素和行内元素之间的一个重要的不同点
    以下行内元素设置效果:
    设置宽度width 无效。
    设置高度height 无效,可以通过line-height来设置。
    设置margin 只有左右margin有效,上下无效。
    设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的
  • text-align对行内元素起作用,对块元素不起作用。但是有一个例外,IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。
  • display: block 将元素显示为块级元素,高度,行高以及顶和底边距都可控制;
    display: inline 将元素显示为行内元素,和其他元素都在一行上,高,行高及顶和底边距不可改变。
    display: inline-block 将对象呈递为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性

下面代码是做什么的:导航

![`]}G6%9H%RGK72MZVJ_@K.png](http://upload-images.jianshu.io/upload_images/1436600-fbf6292786155bbb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

  • 用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
  • 在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
  • 注意让自己的代码结构有文理,能让别人看懂。css中两个单词使用"_"连接。html中使用正确合适的标签。

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

  • <form> 标签用于为用户输入创建 HTML 表单。
  • text:何在 HTML 页面创建文本域。
    password:创建 HTML 的密码域。
    checkbox:在 HTML 页中创建文本框。用户可以选中或取消选取复选框。
    radio:在 HTML 中创建单选按钮
    submit :提交按钮
    textarea”:多行文本框
    hidden:隐藏域,用来传输客户端到服务器的状态信息

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

  • 在 button 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
    <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
  • <input type="submit" value="提交"> 是表单提交的按钮,点击后会向后台提交数据。
  • <a class="btn" href="#">提交</a>把一个链接放在提交按钮里面,点击提交会跳转到另一个页面,但是不会向后台提交数据。

radio 如何分组?
name设置成相同就能分在同一组。

placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

Z0L)7K5XE1X5CK@6}S7V7`2.png

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

  • 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用
  • 代码格式如下:<input type="hidden" name="..." value="...">
    type="hidden"定义隐藏域;
    name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    value属性定义隐藏域的值
    例如:<input type="hidden" name="ExPws" value="dd">
    其实说白了就隐藏域不在前台显示的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,510评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,224评论 24 450
  • 和韵《唐寅落花诗三十首》其二十一 秦元刚 忠义自是两难全,华容道上续前缘。 清茶一杯可鉴月,江湖十年共沉眠。 且将...
    元刚梅子阅读 569评论 0 6