美文网首页
前端学习任务七

前端学习任务七

作者: 无目的 | 来源:发表于2016-10-10 21:53 被阅读0次

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

    如何使用?
    • 有序列表


      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](https://img.haomeiwen.com/i1436600/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">
      其实说白了就隐藏域不在前台显示的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的。

    相关文章

      网友评论

          本文标题:前端学习任务七

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