任务七~HTML4

作者: dengpan | 来源:发表于2016-07-18 12:31 被阅读39次

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

有序列表、无序列表、自定义列表如何使用？简单例子如下:

代码

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>任务7</title>
   </head>
   <body>
       <h3>豆瓣电影评分</h3>
       <ol>
           <li>肖申克的救赎</li>
           <li>这个杀手不太冷</li>
           <li>阿甘正传</li>
           <li>霸王别姬</li>
       </ol>
       <h3>动漫人物</h3>
       <ul>
           <li>蒙奇·D·路飞</li>
           <li>旋涡鸣人</li>
           <li>坂田银时</li>
           <li>旗木卡卡西</li>
       </ul>
       <h3>进击的巨人角色</h3>
       <dl>
           <dt>艾伦·耶格尔</dt>
           <dd>《进击的巨人》中主人公，拥有强韧的精神力量与非凡的行动力，对墙壁外的世界拥有比任何人都要强烈的憧憬，从小便立志要加入调查兵团。</dd>
           <dt>三笠·阿克曼</dt>
           <dd>《进击的巨人》中女主角,以第104期训练兵团首席的身份毕业，性格沉稳冷静，有以一敌百的战斗力。</dd>
           <dt>利威尔·阿克曼</dt>
           <dd>《进击的巨人》中的角色，为调查兵团的士兵长、调查兵团特别作战班利威尔班班长，通称“利威尔兵长”或“里维士兵长”。</dd>
       </dl>
   </body>
</html>

三种列表效果图

三种列表效果图

三者在语义上的区别是：

有序列表的列表项有先后次序之分
无序列表的列表项对顺序没有要求且大多处于并列关系
自定义列表则是自己定义项目并对项目进行说明

列表嵌套

在要嵌套的列表项里再加入列表，代码如下

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>任务7-1~列表的嵌套</title>
   </head>
   <body>
       <h3>动漫</h3>
       <ul>
           <li>
               <h4>海贼王</h4>
               <ul>
                   <li>蒙其·D·路飞</li>
                   <li>罗罗诺亚·索隆</li>
                   <li>娜美</li>
                   <li>GOD·乌索普</li>
                   <li>山治</li>
                   <li>托尼托尼·乔巴</li>
                   <li>妮可·罗宾</li>
                   <li>弗兰奇</li>
                   <li>布鲁克</li>
               </ul>
           </li>
           <li>
               <h4>银魂</h4>
               <ul>
                   <li>坂田银时</li>
                   <li>志村新八</li>
                   <li>神乐</li>
                   <li>桂小太郎</li>
                   <li>坂本辰马</li>
                   <li>高杉晋助</li>
               </ul>
           </li>
       </ul>
   </body>
</html>

列表嵌套效果图

列表嵌套

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

在css样式里面加入如下代码就可以去除列表前面的点或者数字

ul,ol{
      list-style:none;/*或者list-style-type:none;*/
}

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

class和id的区别

class是类选择器，类选择器在一个页面中可以有多个相同的类名；id选择器具有唯一性，在一个页面中不会同时出现id相同的属性值；
class类选择器，需要在HTML给需要的元素设置属性值的前面加上.号,比如，.header{font-size:14px;};id选择器则需要在id属性值的前面加上#号，比如，#header{margin:0 auto;}
class类选择器的权重没有id选择器的权重大

class类选择器和id选择器的使用

class类选择器用于页面中重复出现，反复多次利用的html元素
id选择器用于页面中只出现一次的Html元素，也用于html主体结构的划分

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

块级元素、行内元素的定义（定义来自CSS权威指南）

块级元素指元素在正常流中时，会在其框之前和之后生成“换行”，所以处于正常流中的块级元素会垂直摆放
行内元素指在正常流中时，其不会在之前或之后生成“行分隔符”，它们是块级元素的后代

块级元素和行内元素的不同：

块级元素会独自占据一行；而行内元素所占据的空间仅仅是其自身内容的宽度
对于块级元素，可以设置margin,padding,width,height；而对于行内元素，设置width、height不起作用（行内元素的宽高只由其本身内容所决定），设置margin、padding只有水平方向有有效，但上下方向不占用空间，上下方向只看得到背景设置

块级元素、行内元素别对应哪些常用标签

块级元素对应的常用标签有：h1~h6、p、div、ul、ol、dl、table、form、blockquote、header、section、aside、footer、figure、article
行内元素对应的常用标签有：a、span、em、i、em、strong、img、input、textaera

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

display:block使元素成为块级元素
display:inline使元素成为行内元素
display:inline-block使元素成为行内块元素
display:block使元素成为块级元素

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

<!dcotype 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="log" 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">侧边栏</di>
                <div class="main">中心区块</div>
            </div> 
        </div>
        <div id="footer">
            <div class="wrap">这里是footer</div> 
        </div>        
    </body>
</html>

该代码布置了一个页面，该页面由三大部分组成，分别是header、content、footer，而这三个结构性的区块的元素则是用id选择器，因为其具有唯一性；在这三个区块下重复利用的元素则是使用的是类选择器；在header中，有一个图片链接，还有一个导航栏；在content中，有一个边栏和中心区块；footer在页面最下边；在.wrap中，设置了宽度为固定900px的区域且是水平居中的，直到页面宽度小于等于900px时，该区域直接铺满整个页面

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

语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，代码具有良好的可读性，搜索引擎更容易理解文档
平常写代码的时候要注意不要没有语义化的标签，比如各种各样的p、div等等；其次命名有规则且统一
知识拓展

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

form表单的作用：用于为用户输入创建 html表单，并向服务器传输数据
form标签属性介绍

属性	说明
action	表示表单提交的页面
method	表示表单的请求方式：有 POST 和 GET 两种，默认 GET
name	设置表单名称，以便程序调用
target	设置提交时的目标位置：_blank、_parent、_self、_top
enctype	表示浏览器对发送给服务器的数据所采用的编码格式,分别是application/x-www-form-urlencoded、multipart/form-data、text/plain
autocomplete	设置浏览器记住用户输入的数据，实现自动完成表单。默认为 on 自动完成，如果不想自动完成则设置 off
novalidate	设置是否执行客户端数据有效性检查

常用的Input标签（input都要有name属性）
文本输入

年龄：<input name="age" type="text" placeholeder="24"  maxlength="3" autofocus="autofocus"/>

密码

密码：<input name="password" type="password"  placeholeder="······" maxlength="18" minlength="6"  autofocus="autofocus"/>

单选按钮

性别：<input name="sex" type="radio" value="male" autofocus="autofocus"  checked="checked"/>男
     <input name="sex" type="radio" value="female" autofocus="autofocus"  checked="checked"/>女

复选框

爱好：<input name="hobby" type="checkbox" value="game" autofocus="autofocus"  checked="checked"/>游戏
     <input name="hobby" type="checkbox" value="football" autofocus="autofocus"  checked="checked"/>足球
     <input name="hobby" type="checkbox" value="travel" autofocus="autofocus"  checked="checked"/>旅游

多行文本输入

评论：<textarea name="comment" placeholeder="请输入您的评论"
maxlength=1000></textarea>

隐藏文本输入~用户看不到表单效果，但表单存在，可以向后台发送隐藏的value数据，用于安全校验，防止伪造表单数据

<input name="secret" type="hidden" value="abcdefg" />

下拉选择框

<select name="hobby"> 
<option value="game">游戏</option> 
<option value="football" selected="selected">足球</option> <option value="travel">旅游</option> 
</select>

九、post 和 get 方式的区别？

数据提交的方式不同，get提交数据的url可以看到，而post看不到；
get用于提交少量数据，post用于提交大量数据；
由于浏览器的限制，get最多提交1k数据；而post理论上无限制，受服务器限制；
get提交的数据在浏览器记录中，安全性不好

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

name 属性规定了 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。（W3shool）

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

<button>提交</button>设置一个一般性按钮，没有任何作用
<a class="btn" href="#">只是一个链接，点击</a>链接到本页，无法提交数据
<input type="submit" value="提交">能够提交表单数据

十二、radio 如何分组?

把 name值设置为相同的即可分为一组

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

placeholder是文本框中的预留信息，用于提示用户

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

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器，可用于暂存数据和页面的安全校验
比如

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>任务7-1~列表的嵌套</title>
    </head>
    <body>
        <h3>表单校验</h3>
        <form action="#" method="post" name="test">
            <label for="user">用户名：</label>
            <input type="text" name="user" id="user" required="required" autofocus="autofocus" placeholder="用户名">
            <br/>
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" required="required" placeholder="密码（不少于6位）">
            <input type="hidden" name="secret" value="jirengu">
            <br/>
            <button type="submit">提交</button>
        </form>
    </body>

当点击提交的时候，后台如下图

hidden的作用
在代码里设置的type="hidden"信息,一同被发送到服务器校验，若检验满足，则才可以提交表单！
（注：其它更多用法）

任务七~HTML4

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

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

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

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

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

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

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

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

九、post 和 get 方式的区别？

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

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

十二、radio 如何分组?

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

任务七~HTML4

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

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

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

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

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

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

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

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

九、post 和 get 方式的区别？

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

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

十二、radio 如何 分组?

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

十二、radio 如何分组?