2016.9.15 HTML3

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

  • 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于<li>,语法为:
    <ul>
    <li>第一行</li>
    <li>第二行</li>
    </ul>
  • 有序列表同样,有序列表也是一列项目,列表项目使用数字进行标记。
    有序列表始于 <ol> 标签。每个列表项始于<li> 标签。语法为:
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    在实际应用中我们很少使用有序列表,为了美观,一般将列表序号替换为图片等。
  • 定义列表语义上表示项目及其注释的组合,它以<dl>标签(definition lists)开始,自定义列表项以<dt>(definition title)开始,自定义列表项的定义以<dd>(definition description)开始。语法为:
    <dl>
    <dt>CSS</dt>
    <dd>CSS概念</dd>
    <dd>CSS应用</dd>
    <dd>CSS hacks</dd>
    </dl>
    2010041800122977.png

    从语义上来讲,三组标签分别对应不同具有含义的列表:无序列表适合成员之间无级别顺序关系的情形;有序列表适合各项目之间存在顺序关系的情形;定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义,也可以只有术语名称或只有定义,也就是说<dt><dd>在其中数量不限、对应关系不限。

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

list-style-type为列表显示类型 ,它共有9种常见属性值:

元素 样式
disc默认值 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号

去除列表标记的样式,使用:list-style-type:none;

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

css选择器 符号 作用
class . 可以应用到任何结构和内容上
id # 区分不同结构和内容,优先级高于class选择器

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

HTML中大部分元素被分为块元素block level element和行内元素 inline element

  • 块级元素会独占一行,其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
  • 块级元素可以设置 width, height属性,行内元素设置width, height无效【注意:块级元素即使设置了宽度,仍然是独占一行的】
  • 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果即(水平方向有效,竖直方向无效)
    相关对应标签
![ ![](http://upload-images.jianshu.io/upload_images/2957656-c92c49210de8f142.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://upload-images.jianshu.io/upload_images/2957656-056f8ad6999e6cd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4.display: blockdisplay: inlinedisplay: inline-block分别有什么作用?

display: block是将元素呈递为块元素,高度、行高、顶部和底部的边距都是可控的。
display: inline是将元素呈递为内联元素,高度、上下边距不可控,元素高度为文字或图片高度。
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性。

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

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

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

表单用于向后台提交数据,并且接受数据.
type 属性规定 input 元素的类型 语法如下<input type="*value*">
type的属性值如下:

描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

举一例:<input type="checkbox" name="vehicle" value="Bike" /> I have a bike

  • 其中name的值为控制台查看时的左侧,value的值是输入值,也就是提交的值.具体提交为name=value.
  • 在对付checkbox时,name的值相同时则分为一组.

7.post 和 get 方式的区别?

GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。

  1. GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中)如果数据是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密,得出如%E4%BD%A0%E5%A5%BD,其中%XX中的XX为该符号以16进制表示的ASCII.
  2. GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了,IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持.
  3. 理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。
  4. POST的安全性要比GET的安全性高.通过GET提交数据,用户名和密码将明文出现在URL上,因为(1)登录页面有可能被浏览器缓存,(2)其他人查看浏览器的历史纪录,那么别人就可以拿到你的账号和密码了,除此之外,使用GET提交数据还可能会造成Cross-site request forgery攻击.

总结一下,Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求,在FORM(表单)中,Method默认为"GET".

8.在input里,name 有什么作用?

name 属性规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值.

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

<button>提交</button>是一个普通按钮,一般用于js的事件触发.
<a class="btn" href="#">提交</a>是一个链接按钮进入到新的页面或者是同一页的锚点.
<input type="submit" value="提交">成为一个提交表单的按钮.

10.radio 如何 分组?

name是表单提交数据的标示,相同的name则为一组.

11.placeholder 属性有什么作用?

在用户需要输入的地方写入默认的字符用于提示输入内容.placeholder 属性提供可描述输入字段预期值的提示信息(hint).该提示会在输入字段为空时显示,并会在字段获得焦点时消失.

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

用于暂存数据,或者是安全校验

代码题1

大多数情况id标签用于构建网页的逻辑结构,将网页分为 header标题,content内容和footer页脚.在标题下用nav类构建了一个导航栏.在内容区构建了侧边栏和主内容区.整个页面宽度900px,居中,同时语义化非常好,很清晰.

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 在上一个章节,我们已经创建了一个基础的Blog程序。现在我们将使用一些Dajngo高级功能,去实现一个完整的blo...
    金金刚狼阅读 3,578评论 1 12
  • 一、有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    hk_kh阅读 683评论 0 0
  • 语义化、行内元素块级元素、POST 和 GET 的区别 Version two 熟悉列表的使用场景和用法 理解HT...
    吴晗君阅读 820评论 0 0
  • (四)上海纪行 3.夜游黄浦江 从城隍庙出来,直奔黄浦江。登上游轮,看两岸灯火不但左右逢源,而且远近正好,是美感的...
    彦蘋阅读 349评论 0 2