饥人谷技术博客

任务7_HTML4

2016-08-01  本文已影响0人  饥人谷_江君

课程目标

学习建议

语义化、行内元素块级元素、POST 和 GET 的区别这是面试必问的知识点

预习视频

课程任务

问答

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

有序列表、无序列表、自定义列表如何使用？写个简单的例子。

以下为代码实例：

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

以下为代码实例：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

以下为代码实例：

<html>
<body>
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

以下为简单的例子：

列表方面的简单的例子

三者在语义上有什么区别？在哪些情况下使用哪种（重要）？

如何嵌套？

直接在<li>标签里面再写入<ul>等标签，以下为简单的代码展示

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

详见图“列表方面的简单例子”实例

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

调研得到去除列表前面的样式有两种途径

<style>
ul ol{
list-style: none;
}
</style>

<body>
<ul>
<li style="list-style: none">你</li>
<li>我</li>
<li>他</li>
</ul>
</body>

参考文章：

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

class 和 id 有什么区别？

什么时候用 class 什么时候用 id？

参考文章：

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

块级元素、行内元素是什么？

分别对应哪些常用标签

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>

以上代码做了如下的几件事：

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

HTML语义化表现为选择合适的标签，使用合理的代码结构，这样可以将页面合理的分层，使其更加清晰明了，而且便于开发者阅读，同时能够让浏览器的爬虫和机器更好地去解析

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

form表单有什么作用？

用于把用户输入的数据提交到后台

有哪些常用的input 标签，分别有什么作用？

input的定义和用法：用于搜集用户的信息等，他有如下常用的标签

<!-- 要加上name -->
<input name="username" type="text" placeholder="用户名" maxlength=10 />

placeholder的作用是为了在输入框里输入一些提示信息
maxlength的作用是限制了最大输入的字符数

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女

<input type="checkbox" name="bike"  checked/>自行车
<input type="checkbox" name="car" />汽车```
  - type="textarea": 文本域，用于输入多行文本

<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>

  - type="hidden": 隐藏域，用户看不到，用于暂存数据。或者安全性校验

<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="a23dafd23444" />

 - type="submit"

<input type="submit" value="提交" >


> ### post 和 get 方式的区别？

|比较方面|post|get|
|:--:|:--:|:--:|
|数据提交方式|看不到|提交的数据url可以看到|
|数据量|提交大量数据，从而得到少量的提示|提交少量数据，从而得到大量数据（比如搜索和查询）|
|数据量限制|理论上无限制，受服务器限制|最多提交1k数据，受浏览器的限制|
|安全性|安全性较好|提交的数据在浏览器历史记录中，安全性不好|

注：若method没写，则默认get

> ###在input里，name 有什么作用？

name属性的定义和用法：用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
- 在单选框中如果name相同，则他们为一组
- 复选框中name可相同
以下为实例：

爱好
<input type="checkbox" name="love" value="basketball" checked/>篮球
<input type="checkbox" name="love" value="football" checked/>足球


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

- ```<button>提交</button>```没有任何作用，只是单纯的两个字
- ```<a class="btn" href="#">提交</a>```虽然是一个链接，但是他并没有把数据提交到后台，点击效果仅仅是跳转到了当前的页面
- ```<input type="submit" value="提交">```提交了一个表单的数据
以下为实例：
![提交按钮三者的区别.png](https://img.haomeiwen.com/i2331515/ba7a50ea1a914c93.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> ### radio 如何分组?

 type="radio"为<input>标签里的属性: 代表单选圆圈按钮。
name要相同才能实现单选的分组，并且value要有值

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女


> ### placeholder 属性有什么作用?

placeholder的作用是为了在输入框里输入一些提示信息
以下为实例：
![placeholder.png](https://img.haomeiwen.com/i2331515/5f0b4b84fcfea843.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

"type=hidden"为隐藏域，用户看不到，用于暂存数据。或者安全性校验
以下为实例，只有后台接收到hidden里的正确的数字时，才会接受其所提交的数据

<form class="myform" action="index.html" method="post">
<p>
用户名：
<input type="text" name="username" placeholder="用户名"/>
</p>
<p>
密码：
<input type="password" name="password" placeholder="密码"/>
<input type="hidden" name="hidden" value="123456789">
</p>
<p>
<input type="submit" name="submit" value="提交">
</p>
</form>

![hidden.png](https://img.haomeiwen.com/i2331515/00ffa192df2de521.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***

> ###代码

- [task_07_01](https://github.com/jirengu-inc/jrg-renwu5/blob/master/%E5%88%98%E6%B1%9F/task_07/task_07_01.html)

***

***本教程版权归本人和饥人谷所有，转载须说明来源***
上一篇下一篇

猜你喜欢

热点阅读