任务7_HTML4

作者: 饥人谷_江君 | 来源:发表于2016-08-01 22:44 被阅读0次

课程目标

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

学习建议

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

预习视频

课程任务

问答

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

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

有序列表
定义和用法
- <ol> 标签定义有序列表。有序列表可以是数字或字母顺序。
- 请使用 <li>标签来定义列表项。
属性
- 有序列表的属性

以下为代码实例：

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

无序列表（使用频率最多的列表）
定义和用法
- <ul>标签定义无序列表
提示与注释
- 即使有属性来约束其外表，但是不建议属性，推荐用CSS去实现这一效果
可选的属性
- 无序列表可选的属性

以下为代码实例：

<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>

自定义列表
定义与用法
- 定义一个定义列表，<dt>为表头<dd>为列表内容

以下为代码实例：

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

以下为简单的例子：

列表方面的简单的例子

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

<ol>标签定义有序列表，强调的是先后次序之分
<ul>标签定义无序列表，大多对顺序没有要求或者为并列的关系
<dl>标签定义自定义列表，表现为自己定义项目，并对该项目进行说明，有时更简单精确，语义化更好

如何嵌套？

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

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

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

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

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

在head里的style内，写入如下代码

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

在body内部的ul,ol内部写入如下代码

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

参考文章：

Html中CSS之去除li前面的小黑点,和ul、LI部分属性方法

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

class 和 id 有什么区别？

class的定义和用法
class 选择器设置标签的类，用于指定元素属于何种样式的类。
id的定义和用法：
id选择器设置标签的标识，用于定义一个元素的独特的样式。
两者的区别
class可以反复使用而id在一个页面中仅能被使用一次
id具有唯一性，而class是一个类
class类选择器的权重没有id选择器的权重大

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

什么时候用class
由于class可以在页面中被无限使用，所以可以尽可能多的利用class
class标签定义一类的属性，当网页中好多内容需要利用同一样式时，请利用class来减小工作量，简化代码
什么时候用id
在页面较大的模块里可用id来来
由于id在网页中是唯一的，可用id来区分不同的模块，比如页面中有如下模块时：今日要闻、推荐新闻、最新新闻...时可用id来区分
另外由于id在页面内是唯一的，最好留给js去用

参考文章：

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

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

块级元素的定义和用法：
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
行内元素定义和用法：
行内元素只占据它对应标签的边框所包含的空间。
有什么区别
块级元素会占据一整行，行内元素只会占据自身内容的宽度（可利用chorme的开发者工具去检查元素是块级还是行内的，具体表现为鼠标悬停在上面是一整行（块级元素）还是一小区域（行内元素））
行内元素可以并排显示，块级元素不会
默认情况下，块级元素会新起一行，行内元素不会
块级元素可以包含行内元素和其他块级元素，而行内元素只能包括数据和其他行内元素

分别对应哪些常用标签

块级元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form
行内元素：a、span、img、input、button、em、textarea

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

display: block的定义和用法
此元素将显示为块级元素，此元素前后会带有换行符。
display: inline定义和用法：
默认。此元素会被显示为内联元素(也称作内嵌元素、行内元素)，元素前后没有换行符。
display: inline-block的定义和用法：
行内块元素，既能像行内元素一样水平排列，又有块级元素的特性，
注：IE8以下不能用

下面代码是做什么的？抄写一遍下面的代码，注意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>

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

利用id将整个页面分为了header/content/footer三个部分
content和footer里面都有利用class定义的"wrap"类
CSS将wrap类的类型设置为900px宽，可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

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

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

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

form表单有什么作用？

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

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

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

checked：规定此 input 元素首次加载时应当被选中
disabled：规定此 input 元素首次加载时应当被选中
maxlength：规定输入字段中的字符的最大长度
name：定义 input 元素的名称，所有的input必须有name
placeholder：规定帮助用户填写输入字段的提示
value：规定 input 元素的值
type
- type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；

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

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

type="password": 用于输入密码，输入的内容显示为星号。
<input name="password" type="password" placeholder="密码" />
type="radio": 单选圆圈按钮。注意：name要相同才能实现单选，value要有值

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

type="checkbox":复选框。加checked属性会默认选上。提交时，如果选中（如bike），则bike=on

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

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

 - type="submit"


> ### 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里的正确的数字时，才会接受其所提交的数据

![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)

***

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

网友评论

饥人谷技术博客

本文标题：任务7_HTML4

本文链接：https://www.haomeiwen.com/subject/yhaojttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

任务7_HTML4

课程目标

学习建议

预习视频

课程任务

问答

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

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

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

如何嵌套？

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

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

class 和 id 有什么区别？

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

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

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

分别对应哪些常用标签

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

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

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

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

form表单有什么作用？

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

任务7_HTML4

课程目标

学习建议

预习视频

课程任务

问答

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

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

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

如何嵌套？

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

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

class 和 id 有什么区别？

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

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

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

分别对应哪些常用标签

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

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

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

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

form表单有什么作用？

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

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