任务7

课程任务

问答

  • 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?
    • 分别使用ol ul dl关键字进行引用。


<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>

<ul>
<li>无序列表,用的最多</li>
<li>无序列表</li>
</ul>


<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
<dt>列表头</dt>
<dd>列表内容</dd>
</dl>

现实结果

Paste_Image.png

有序列表在需要多一个序号,有顺序的情况用
无序列表就是各个元素并列,无先后顺序使用
自定义列表,更灵活一些,可以改一些表头什么的
,更有结构

  • 如何去除列表前面的点或者数字?
    li{list-style:none;}
  • class 和 id 有什么区别?什么时候用 class 什么时候用 id?
    1、在CSS文件里书写时,ID加前缀"#";CLASS用"."2、id一个页面只可以使用一次;class可以多次引用。3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。
  • 块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?


    Paste_Image.png

块级元素 比如 div、 ul、 p、 h1…h6、 table、 tr、 ul、 li、 dl、 dt、 form
行级元素a、 img、 span、 input、 button、 em、 textarea
http://www.w3cwhy.com/css-html/html-hkmarka.html

  • display: blockdisplay: inlinedisplay: inline-block分别有什么作用?
    简单讲就是[display:inline] 转化成[内联元素]不换行;display:block转换成块元素,换行;[display:inline]-block内联块元素,既不换行又可以使用块元素所拥有的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> --utf8编码
  <style>
    .wrap{ --对wrap类的css样式
      width: 900px; --设定宽度
      margin: 0 auto; -- 上中下的宽度一样
    }
  
  </style>
</head>
<body>
  <div id="header">
    <div class="wrap">
      <a id="logo" href="#"><img src=""></a> --引用图片,超链接是#
      <ul class="nav">--建立一个无序列表
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
      </ul>
    </div>
 </div>
  <div id="content">
    <div class="wrap">
      <div class="aside">侧边栏</div>--分区块
      <div class="main">中心区块</div>
    </div>
  </div>
<div id="footer">设定页脚
  <div class="wrap">这里是 footer</div>
</div>
</body>
</html>
  • 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
    语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
    第一是分块,合理的分层,第二使用合理的标签,第三合理的命名。选择合适的标签,使用合理的代码结构,合理的命名,便于开发者阅读,同时让浏览器便于解析。
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
    form表单用于与后端服务器进行数据传递,并包含全局属性 action,值为URL,规定当提交表单时向何处发送表单数据。
    method,可选择通过“post”方式或“get”方式进行通信。

input标签有多种type属性 button 定义可点击的按钮,多数用于启动JS
- text 定义单行文本输入
- checkbox 定义复选框
- radio 定义单选圆圈按钮
- file 用于上传文档
- reset 重置form中所以输入
- submit 定义提交按钮,用于提交所以的输入数据
- password 定义密码输入字段,用户输入的字符会用星号显示

  • hidden 定义隐藏的输入字段 可用于简单效验

  • post 和 get 方式的区别?
    在使用场景上,get 的语义化理解就是在后端上获得数据,类似索引的方式,用比较少的字符来请求后端返回数据;而 post 更像是本地有比较多的数据要上传到后端,要把数据推上去。 他俩最主要的区别是,get用小数据获取大数据,post用于上传较大数据。

  • 在input里,name 有什么作用?
    name是在input标签内的属性,在表单上传的时候,一个input标签会有一个name=value被上传,name属性定义键,value定义键值。

  • <button>提交</button><a class="btn" href="#">提交</a><input type="submit" value="提交">

    • button方式需要JS脚本的支持
    • 使用 超链接a 标签,不提交表单。
    • input type submit 可以正常提交表单有什么区别?
  • radio 如何 分组?
    通过name设置成一个值就分到一个组了。

  • placeholder 属性有什么作用?
    placeholder属性定义text、textarea、password中的提示文字

  • type=hidden隐藏域有什么作用? 举例说明
    密码不显示明文

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

推荐阅读更多精彩内容

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