任务7-HTML4

2016-09-28 本文已影响0人饥人谷_桶饭

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

Paste_Image.png
- 有序列表：<ol>开始，</ol>结束，每一个列表都包含在<li>之中,前面默认的是数字1，2，3...
- 无序列表：<ul>开始，</ul>结束，每一个列表项都包含在<li>之中，前面默认的是黑点。
- 自定义列表：<dl>开始，</dl>结束，包含了<dt>和<dd>标签。一个<dt>可以包含好几个<dd>,<dd>可以理解为对<dt>的解释。
在哪些情况下使用哪种：若需求要求有序列表就用有序列表，需求需要无序列表就用无序。若需求是列表内容并列使用无序列表或自定义列表。

嵌套：

Paste_Image.png

如何去除列表前面的点或者数字？
答：使用list-style: none
Paste_Image.png

class 和 id 有什么区别？什么时候用 class 什么时候用 id？
答：
- 区别：
  - id是唯一的，class不唯一。
  - 优先级id高于class。
  - 样式里id用# class用.
- 什么时候用 class 什么时候用 id？
  - 头部，内容区域，尾部等主体内容用id，有时js特效类需要唯一性，这个时候需要一定使用“id”，而主体内容的子容器或可复用的样式用class。
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
答：
- 块级元素、行内元素是什么?
  - 块级元素：单独占一行，默认宽度自动填满父元素宽度。
  - 行内元素：不会单独占一行，跟文档流相同。
- 区别
  - 块级元素可以设置width、height属性,设置后宽度还是独占一行;但是行内元素设置宽和高后是没有变化的。
  - 块级元素可以设置margin和padding属性，而行内元素水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，
  - 但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
  - 对应的相关display属性是不同的:块级元素display:block; 行内元素display:inline;
- 分别对应的标签
  - 块级元素div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
  - 行内元素：span, strong, em, br, img , input, label, select, textarea, cite
display: block、display: inline、display: inline-block分别有什么作用?
答：
- display: block——显示为块级元素
- display: inline——显示为行内元素
- display: inline-block——显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。
- 通常将<ul>元素加上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>

Paste_Image.png

这是一个上中下结构的网页分成三部分，头部header、内容区域content、脚部footer。这三部分用id作为区域划分标签使用。样式布局全部用class定义。

如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
答：
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
- 写HTML代码时应注意什么？
  - 尽可能少的使用无语义的标签div和span；
  - 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
  - 不要使用纯样式标签，如：b、font、u等，改用css设置。
  - 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
  - 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
  - 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
  - 每个input标签对应的说明文本都需要使用label标签，并且通过为 input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单的作用：
- form表单用于把用户输入的数据提交至后台。
有哪些常用的input 标签，分别有什么作用?
- <input type="text">用于输入文本,可以加入placeholder属性来写框内的提示内容，还有maxlength用来限制文本框里的字数，value用来填写里面的默认内容。
- <input type="password">里面输入密码显示文字为星号。
- <input type=“raido”>是单选框但是只在里面name相同的情况下是单选，不相同的话是多选。
- <input type="checkbox">复选框，加入checked使之成为默认选项。
- <input type="textrea">文本域，用于输入大量文本。
- <input type="select">下拉选择列表，加入selected使之成为默认选择。
- <input type="submit">定义提交按钮,向服务器发送表单数据，里面的内容根据value决定。
- <input type="reset" > 定义重置按钮。重置按钮会清除表单中的所有数据。
- <input type="image" >定义图像形式的提交按钮。
- 必须把标签的 src 属性和Alt属性与其结合使用。
- <input type="hidden">定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
- <input type="file" >用于文件上传。
- <input type="button" >定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
post 和 get 方式的区别？
答：
- get不安全，数据保存在浏览器记录中
- get是向服务器索要数据的一种请求，post是向服务器提交数据的一种请求。
- get一般用于提交少量数据，post用于提交大量数据。
- get提交数据最多1k数据，受到浏览器的限制；post提交数据理论上无限制，收到服务器的限制。

在input里，name 有什么作用？
答：设定input的元素名，用于对提交到服务器后的表单数据进行识别，或者在客户端通过 JavaScript 引用表单数据。
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
答：
- <button>提交</button>：是一个单纯的按钮。
- <a class="btn" href="#">提交</a>：一个连接，到href指向的地方。
- <input type="submit" value="提交">：表单的提交按钮，将表单中的数据提交至服务器。
radio 如何分组?
答：通过name命名和value值配合，同一个组内的name值一定要一样
placeholder 属性有什么作用?
答：默认显示的内容。

Paste_Image.png

type=hidden隐藏域有什么作用? 举例说明
答：隐藏域的功能是用来储存一些表单资讯，而不想要直接显示在页面表单上。例如一些特定的参数，填写时间戳记，登入记录...等，有许多种的应用都可以使用隐藏栏位来记录。当表单提交的时候，隐藏域的值也会传递给后端的程序，每一个表单可以安插许多不同名称的隐藏域，传递各种表单信息。

<input type="hidden" name="123" value="test">

任务7-HTML4

猜你喜欢

热点阅读