语义化、行内元素块级元素、POST 和 GET 的区别

Version two

  • 熟悉列表的使用场景和用法
  • 理解HTML语义化
  • 理解行内元素、块级元素概念
  • 熟悉常见input表单的使用方式
  • 掌握 POST 与 GET 方式的区别

问答

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

  1. 有序列表：列表内容对顺序有要求，如排名，步骤等。
  2. 无序列表：列表内容对顺序无要求，如 爱好，特长等。
  3. 自定义列表：用户按照自己需求自定义列表。当有序列表和无序列表都不满足我们的要求时，我们需要按自己的要求去定义列表。
  • <dl> define list
  1. <dt> define the title of list
    用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。注意：其中不能包含 hx 元素。
  2. <dd> descrime the define of list
    用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解释。
  3. 我们可以看到，<dt></dt>中间的文字即时我们没有进行缩进它也会向前靠拢，而<dd></dd>中间的内容则自动向后缩进。
    0_1478493063062_upload-722fe46e-9db8-41f1-b44f-abc411cfb4a9
  • 发现网站上用ol和dl很少，基本上都是用的ul。
  • ul和div的使用：
  1. wrong链接
  2. rignt链接

二、如何去除列表前面的点或者数字？

  • ul,ol dl的list-style的属性值设置为none即可。

三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？

  • W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
  • id用于布局，比如我给整个页面设置头部，内容，尾部。这个时候使用id，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。这样整个结构就不会乱。
  • 区别

  1. lass选择器设置的样式是用.开头，id选择器的样式是用#开头

  2. 权值不同：id选择器的权值高于类选择器

  3. 分层后，在一个大的区块中，id选择器中能使用一次，class选择器可以随意套用

  4. 如果id被调用了多次，对接的后台就麻烦了，因为要从服务器的数据库里面调取一些东西，或者是用id做一些设置，如果重复使用，那么，后台就全乱了，读取数据也不会准确。

  5. 另外，当涉及到js时候，有些动画的js需要查找html中的id进行动画设置，重复使用的话，相同的id将都会被找到，并添加相同的动画。

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

  • 实例链接
  • 块级元素：无论内容多少，都会独占一行的元素叫块级元素；如div、p、h1...h6、table、tr、ul、li、dl、dt、form等。
  • 行内元素：不会独占一行，并且行级元素与行级元素间会横向排列，除非内容太长，否则不会自动换行，宽度随内容改变；如a、span、img、input、button、em、textarea等。
  • 两者有什么区别
  1. 块级元素总是另起一行，行内元素与行内元素间则总是在一行显示（除非设置了宽度或者内容溢出）。
  2. 手动给行内元素设置宽高是无效的，身宽高由自身决定，由自身内容撑开。设置左右padding和margin有效，设置上下padding和margin不占据空间。但是如果我们设置了边框，调大padding的值可以看见边框变大。但是不占据空间！
    例子：我们给边框里面设置background：red发现会覆盖其他元素，其实就是没有占据空间的原因。这时候我们可以用line-height来撑开空间。或者display：inlineblock（可以像行内元素一样在同一行排列，也可以像块级元素一样设置宽、高、padding等等。必须在ie8及以上才兼容） 如果用display:block就必须用clear清除浮动，否则就不能排在一行，会跑到下面去。

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

  • display:block:将元素转为块级元素，使具有块级元素特性，使元素的外边距和长宽可以控制。
  • display:inline:将元素转为行内元素，使具有行内元素特性是元素能和其他行内元素排在一排。
  • display: inline-block：将元素转为块级行内元素，使其同时具有行内和块级元素特性，使元素的长宽和边距可控，同时也能和其他元素排在一排。

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

  • 代码作用：用id和class搭建了一个网站大致的简易框架。使得各个模块在页面居中显示。注意代码格式要写对（利于debug），冒号不要丢。
  • id是唯一的常用于大区块的布局，而一个class可以被多个元素调用。常用于id内部小的模块或元素的样式定义
  • 命名方式：头部区域用herder，内容区用content，脚注用footer，侧边栏用aside，导航栏用nav(navigation)，这是语义化的一种表现。

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

  • 什么是HTML语义化？
    选择合适的标签（代码语义化）、使用合理的代码结构（内容语义化），便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。
  • 为什么语义化？
  1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、
  2. 有利于SEO（Search Engine Optimization）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；（即网络爬虫，是一种自动获取网页内容的程序。是搜索引擎的重要组成部分，因此搜索引擎优化很大程度上就是针对爬虫而做出的优化。）
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
  4. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
  • 写HTML代码时应注意什么（怎么样语义化）？
  1. 尽可能少的使用无语义的标签div和span；
  2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
  3. 不要使用纯样式标签，如：b、font、u等，改用css设置；
  4. 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
  5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
  6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
  7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
  • 例子和总结：
  1. wrong链接
  2. rignt链接
  • 正确的例子我们不看内容也能了解这大概是什么，计算机也会理解哪些是标题，哪些是header，哪些是内容。错误的例子虽然我们大概能看懂，但是机器就不能很好地理解整个表格

  • HTML5的一大革新就是语义化标签的完善，使用这样结构写出的网页其语义显而易见。在有些面试的时候会问到类似strong 和font-weight: bold有什么区别，这时候就可以从语义化的角度解答了。


  • 网易云课堂的语义化


    0_1478493148542_2.png

八、form表单作用，常用的input 标签，分别的作用？

-小实验

  • form表的作用：提供一个用户输入自己信息的表单，并以get或者post的方式提交给后台。
  • 常用标签：
  1. name:表单提交到后台时的索引，如果不写name，就会被忽略，不参与组成url。
  2. src：src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
  3. value：指定 <input> 元素 value 的值。如果不写两个value，在提交的时候，network里面为sex:on。
  4. maxlength：属性规定 <input> 元素中允许输入的最大字符数。
  5. placeholder: placeholder=** 隐性的在输入框中的内容，像淘宝里的一样。当我们输入信息该内容就会消失。
  6. type：（各种类型）
  • text：用于输入普通文本
  • password：输入密钥，输入的字符统一显示为一样的**符号
  • file：输入本地文件路径，供上传文件使用
  • radio：将输入设置为单选框，其之后输入checked为初始选择此项，注意，需要两个input的name值一致才可组成一个单选框
  • checkbox：将输入设置为多选框，其之后输入checked为初始选择此项
  • hidden：使输入数据不显示，多用于附带于表单提交的安全校验码
  • button：使以上数据根据该标签中的指定的JS文件进行操作
  • submit：提交表单
  • reset：重置\清空表单

九、post 和 get 方式的区别？

  • 通俗的说：get是将数据组装成url，而 post不是。
  • 在B/S应用程序中，前台与后台的数据交互，都是通过HTML中Form表单完成的。Form提供了两种数据传输的方式——get和post。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响。虽然为了方便的得到变量值，Web容器已经屏蔽了二者的一些差异，但是了解二者的差异在以后的编程也会很有帮助的。
  • Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：
  1. Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
  2. Get将表单中数据的按照variable（变化的）=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
  3. Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。
  4. Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。
  5. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
  6. Get是Form的默认方法。
  7. .Post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。
  8. Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.
  9. Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求。
  10. 看后端接口支持哪一个。
  • 建议：除非你肯定你提交的数据可以一次性提交，否则请尽量用 Post 方法
  • 建议：出于安全性考虑，建议最好使用 Post 提交数据

十、在input里，name 有什么作用？

  • name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
  • 写单选框的时候，两个name必须相同。
  • <input type="text" name="" id=""/>中的name和id有什么区别呢？
  1. name 是表单提交后，给后台处理程序区分不同的输入框。
    例如 name = '用户名'name=‘密码’，后台程序就会分别去处理用户名和密码。
  2. 而id通常给前台程序，例如Javascript，CSS，让它去为不同 id的输入框设置不同的响应动作，风格样式等。
  3. 但这些前台语言，有的时候也支持对 name 的识别。id 是不会提交给后台的，所以后台一定只能用 name 去识别。

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

  • 详情见博客
  • <a class="btn" href="#">提交</a>：不提交表单的值。这是用<a>标签伪装的按钮，也只是一个按钮。特点是当把鼠标放上去时自动会变成超链接形式，当然我们也可以为它设置样式成为一个按钮的样式。
  • <input type="submit" value="提交">：提交表单的值。value的值为按钮的值，如果加个name 会向后台提交value的内容。name值: 提交。
  • <button>提交</button>：看浏览器默认提不提交。 可以放置内容，比如文本或图像。在ie浏览器中该类型默认为button,也就是<button type="button">不提交，其他浏览器中默认为submit，也就是<button type="submit">提交。

十二、radio 如何分组?

必须写name，且name相同的为一组。


0_1478493272783_4.png

十三、placeholder 属性有什么作用?

0_1478493293326_5.png

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

  • 隐藏域在页面中对于用户是不可见的。在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
  1. 表单数据校验
    服务器输出一个网站的表单时，会在表单的带有type=hidden属性的input生成一个安全校验码，当表单提交时，服务器通过检查这个码来判断是否这个表单是否是从服务器生成，而不是伪造的，此方法比起通过cookie来验证用户身份来要方便，避免遇到禁用cookie的情况。
  2. 确认提交按钮
    有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
  3. 联系同页面多个form
    有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
  4. 保存全局变量
    javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
  5. 小窗口之间的通信
    按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
    0_1478493355568_6.png

    这里page.php一共收到两个值 “50”和送出表单。
    参考

代码、

JS Bin

举报
收藏
赞