列表、块级与行内元素、表单

问答

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

  • 有序列表


    效果
    效果
  • 无序列表


  • 自定义列表


  • 有序列表顾名思义 每行前面会有顺序的标号“1、2、3”,用于具有顺序的步骤;
    无序列表用于没有明确顺序,表示并列意义的系列,通常不具有顺序性,场景用途很广;
    自定义列表的样式说明,dt标签是dd标签的抽象概念,dd是dt的子类。

  • 列表都可以进行嵌套


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

  • 可以用list-style: none; 清除列表样式:


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

  • class可以用来指定一类元素的样式,当很多元素复用一个样式的时候可以定义一个class,所有元素同时引用这个class
  • id用来选择唯一的元素(一个元素和一个id是一对一的关系),当需要找到这个元素的时候,可以使用id。

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

  • 块级元素明显的特征是占用页面的一整行,和它同级的下一个元素只能在它的下面另起一行。
  • 行内元素相对于块级元素,不占用一整行的空间,可以在一行内进行排列。行内元素的宽高设定是不占据空间的,它本身决定自身的宽高,对其设置padding和margin没有垂直方向的效果,但是在水平方向是具有效果的。
  • 块级元素标签: div、 ul、 p、 h1…h6、 table、 tr、 ul、 li、 dl、 dt、 form
  • 行内元素标签: a、 img、 span、 input、 button、 em、 textarea

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

  • display,是设定显示模式的。
  • display: block是设定这个元素使用块级元素的显示方式,具有块级元素的特征。
  • display: inline是设定这个元素使用行内元素的显示方式,具有行内元素的特征。
  • display: inline-block是结合了两者的特点,可以在一行内并列,并具有块级元素的特点。

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


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .wrap{
      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>
  • 代码效果


  • 这段代码组织了一个简单的界面分块,分为header、content、footer,其中content分为aside、main部分。
  • 值得注意的是,wrap样式的写法,设置块级元素的 width 可以阻止它从左到右撑满整行。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。</br>但是也会有缺点,当页面过窄是,下方会有滚动条。
    .wrap{
      width: 900px;
      margin: 0 auto; 
    }

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

  • 意义:选择合适的标签,使用合理的代码结构,便于开发者阅读,同时让浏览器和爬虫机器更好的解析。
  • 要注意起名字的时候,名字要和它本身的功能相关,让人看到名字的时候,就能大致理解这段代码所起到的作用。
  • 参考代码规范。

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 标签,没能提交表单,可能需要class的支持。
  • input type submit 可以正常提交表单

radio 如何 分组?

  • radio通过对name的定义来进行分组,同一个name的radio只能单选。

placeholder 属性有什么作用?

  • placeholder属性定义text、textarea、password中的提示文字


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

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • 问答 1.有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重...
    我是小韩阅读 1,004评论 0 2
  • 本教程版权归凯旋和饥人谷所有,转载须说明来源 一 、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在...
    凯旋阅读 571评论 0 0
  • 2017年8月6日赖渝蓉种种子第六天。 发心:我今不是为了我个人而闻思修,而是为了六道轮回一切如母有情众生,愿一切...
    晓茂阅读 489评论 2 3