HTML基础知识4-列表及表单的写法、块级元素和内联（行内）元素

作者: 该帐号已被查封_才怪 | 来源:发表于2016-06-11 23:42 被阅读188次

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
 div.div1
    {
     background-color:#bbb;     
     color: red;
     }
 div.div2{
     background-color:#ccc;     
     color: green;
     }
 div.div3{
     background-color:#ddd;     
     color: blue;
     }

</style>
</head>
<body>
    
    <div class="div1"> 
    <ol>
        <li> 打开冰箱门</li>
        <li> 把大象放入冰箱</li>
        <li> 关闭冰箱门</li>
    </ol>
    </div>

    <div class="div2"> 
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨子</li>
    </ul>
    </div>

    <div class="div3">
        <dl>
            <dt> 国内杀毒软件</dt>
            <dd>360杀毒</dd>
            <dd>金山毒霸</dd>
            <dt> 国外杀毒软件</dt>
            <dd>卡巴斯基</dd>
            <dd>比特梵德</dd>
        </dl>
    </div> 
</body>
</html>

运行结果如下：http://js.jirengu.com/japujakeru/1/edit?html,output

2、语义区别及使用情况如下：有序列表表示列表项间有先后顺序；无效列表则表示各项间无先后顺序，其可随意调换位置（以后使用最多）；自定义列表则表示 dt（列头）对dd（列表内容）概括或具有父子属性关系等；
3、嵌套时应从大类写起，大类写完后再逐步补充子项目；自己写了个嵌套示范代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">

</style>
</head>
<body>
<ul>
    <li>
        <h1>新上线</h1>
        <dl>
            
            <a href="http://www.jirengu.com"> <dt>百度商桥</dt>  </a>
            <dd>在线沟通助力精准营销</dd>
            <a href="http://www.jirengu.com"><dt>百度H5</dt>  </a>
            <dd>可视化 H5 页面制作工具</dd>
            <a href="http://www.jirengu.com"> <dt>度秘</dt> </a>
            <dd>每个人贴心的秘书</dd>           
        </dl>
    </li>
</ul>

<ul>
    <li>
        <h1>搜索服务</h1>
        <dl>
            <a href="http://www.jirengu.com"> <dt>百度软件中心</dt> </a>
            <dd>PC软件资源下载</dd>
            <a href="http://www.jirengu.com"><dt>网页</dt> </a>
            <dd>搜索海量网络资料、资源</dd>
            <a href="http://www.jirengu.com"><dt>视频</dt> </a>
            <dd>搜索海量网络视频</dd>           
        </dl>       
    </li>
</ul>


<ul>
    <li>
        <h1>导航服务</h1>
        <dl>
            <a href="http://www.jirengu.com"><dt>hao123</dt> </a>
            <dd>网址导航</dd>
            <a href="http://www.jirengu.com"><dt>网站导航</dt> </a>
            <dd>百度网址大全</dd>
            <a href="http://www.jirengu.com"><dt>百度口碑</dt> </a>
            <dd>传播最真实的评论</dd>           
        </dl>           
    </li>
</ul>
</body>
</html>

运行结果：http://js.jirengu.com/japujakeru/1/edit?html,output

二、如何去除列表前面的点或者数字？
在style中加入list-style: none即可；
代码实例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
<style type="text/css">
ol.no
{
  list-style: none;
}
</style>
</head>
<body>

<ol class="have">
<li> 有数字 </li>
<li> 有数字 </li>
<li> 有数字 </li>
<li> 有数字 </li>
</ol>  

<ol class="no">
<li> 无数字 </li>
<li> 无数字 </li>
<li> 无数字 </li>
<li> 无数字 </li>
</ol>  

</body>
</html>

运行效果：http://js.jirengu.com/petaqotifi/1/edit?html,output

三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？
区别：
1、一个id选择器在一个HTML中只能出现一次，不能重复使用，class 可被多次使用；
2、id选择器可被javascript中的GetElementByID函数所调用，而 class不支持javascript ；
3、ID样式优先级高于class；
一般情况下优先使用class（因其可被使用多次），但遇到javascript时一般采用id；

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

块级元素(block element)又名块元素，和其对应的是行内元素(inline element又称内联元素)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或行内元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。而行内元素只占据它对应标签的边框所包含的空间，且可一并排显示；块级元素需占用一行，其为垂直显示；

行内元素常见标签：a、img、input、button、textarea （其他具体可参见https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente）
块级元素常见标签：p、h1...h6、div、table、ul、li、dl、dt、form（其他具体可参见 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements）

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

display:block：此元素将显示为块级元素，此元素前后会带有换行符；
display:inline ：此元素将显示为行内（内联）元素，此元素前后不带换行符；
display:inline-block ：此元素对象将显示为行内元素特性，其对象内容具有块级元素特性；（其为CSS2.1 新增的值，IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象）

以下自己编写的代码可作为佐证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    a.abiaoqian
    {
        display: block;
    }
    a.inlineblock
    {
        display: inline-block;
        margin-top: 30px;
    }
    p
    {
        display: inline;
    }
    </style>
</head>
<body>
    <a class="abiaoqian" href="http://www.baidu.com"> a标签产生换行现象 </a>
    <a class="abiaoqian" href="http://www.goole.com"> /啊a标签产生换行现象了 </a>
    <p> p标签不产生换行行为</p>
    <p> /啊p标签不产生换行行为了</p>
    <a class="inlineblock" href="http://baidu.com"> 将该元素对象视作行内元素看待，但元素对象内容具有块级元素的特性  </a>
    <a class="inlineblock" href="http://baidu.com"> 试试是否在一行  </a>   

</body>
</html>

运行结果http://js.jirengu.com/biroyovara/1/edit

六、下面代码是做什么的？抄写一遍下面的代码，注意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 di="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独立命名，而其内部则采用class的方式命名，以便统一管理样式。

** 七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节**
个人理解为编写代码时应规范严谨，使用合适的标签及恰当的命名从而使得搜索引擎、浏览器及维护代码等相关人员均能够很好的理解代码中的相应的含义，有时即使样式丢失或去掉样式，也能够以一种文档格式显示网页内容；
平时写代码时，比如图片记得使用alt标签，命名class或id时采用相关且恰当的字母或单词以便于识别等等；跟语义化不相关的网页设计应注意的细节可见https://www.zhihu.com/question/25535246/answer/31037613

** 八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？**
其作用为将用户输入表单的信息提交至后台；
常见的input标签有如下示例：

<input name="username" type="text" placeholder="用户名" > 文本输入用

<input name="password" type="password" placeholder="密码" maxlength=20 > 密码输入用

<input name="like" type="checkbox" checked > 复选用

<input name="sex" type="radio"  value=“male” checked > 单选用

<input name="url_delete" type="hidden"  value=“http://qq.com”>暂存数据或做安全校验用

<input name="upfile" type="file"  >上传文件用

<input name="submit" type="submit" value=“提交” >提交表单数据用

<input name="submit" type="submit" value=“提交” >提交表单数据用

<input name="chongzhi" type="reset" value="重置"> 重置之前所填的表单数据

<input name="image" type="image" src="http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100" alt="submit"> 自定义图片形式的提交按钮

注：使用<input type="image"/>时，一定要和src属性及alt属性结合使用。

** 九、post 和 get 方式的区别？**

1、post传递数据时不会在url体现出来，而get则会体现，因此使用get时不应该使传递敏感的数据比如密码等；
2、post传递的数据大小根据服务器而定，但get最多只能够传输1k数据；
3、post对数据类型无限制，包括二进制；get只允许 ASCII 字符；
4、post不能够被缓存，get能够被缓存；
5、post在网页后退或刷新时会重新提交数据而get无影响；
6、post编码类型可为application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。而get编码类型只有application/x-www-form-urlencoded；
其他可见：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

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

作用是对提交到后台的数据进行标识，或在客户端通过javascript引用表单数值。

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

<button>提交</button> 其只提交“提交”（就IE浏览器而言，其他浏览器则提交value值）；【button间除了可放置文本以外还可放置多媒体内容，但其唯一禁止使用的元素是图像映射】
<a class="btn" href="#">提交</a> 只是一个链接，点击后其只是刷新而已，其不会传递数据；
<input type="submit" value="提交"> 其会将表单内容传递至后台
其实还有<input type="button" name=“submit” value=“提交”> 其虽然也可生成“提交”按钮，但点击后无反应（不提交数据），需绑定js；

** 十二、radio 如何分组？**

当其属性相同时应分为一组（使用同一个name即可），比如苹果、梨子、香蕉可分为一组；

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

可提示用户输入相应数据，但当其获得焦点时则会消失；

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

其作用为暂存数据或用于安全校验使用；比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        hidden有什么作用？<input name="zuoyong" type="text" placeholder="hidden有什么作用？" >
        <input name="yingcang" type="hidden" value="安全校验/hidden.php">
        <input name="tijiao" type=submit value="提交">
    </form>
</body>
</html>

代码运行结果可见：http://js.jirengu.com/gikarezamo/1/edit

以上代码运行使用chrome开发者工具可以看到向后台传递了“安全校验/hidden.php”这组信息。

安全校验.png

十五、代码题

写出如下form表单，性别和取向是单选，爱好是多选

0_1462783789100_upload-4d6e7226-5bc4-4337-bbc7-d3a17f2af7d9

代码详见如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 <style type="text/css">
form{
    line-height: 40px;
    
}
textarea
{
    width: 300px;
    height:300px;
}
 </style>
</head>
<body>
<form name="myForm" method="post" action="http://eeeke.com/houtai.php">
    姓名：<input name="username" type="text" placeholder="用户名" maxlength=8 > <br/>
    密码：<input name="password" type="password" maxlength=8  > <br/>
    性别: <input name="sex" value="male" type="radio" checked > 男  
          <input name="sex" value="female" type="radio" > 女  <br/>
    取向: <input name="quxiao" value="male" type="radio"  > 男  
          <input name="quxiao" value="female" type="radio" checked > 女  <br/>
    爱好：<input name="like" value="dota" type="checkbox" > dota
          <input name="like" value="lvyou" type="checkbox" checked> 旅游
          <input name="like" value="chongwu" type="checkbox" checked> 宠物 <br/>
    评论：<textarea name="pinglun" maxlength=20 placeholder="ddd"></textarea> <br/>
    我的car：<select name="car"> 
             <option value="sabo" selected>萨博 </option>
             <option value="aodi" >奥迪 </option>
             <option value="baoma" >宝马 </option>
             <option value="benchi" >奔驰 </option>
             </select>
           <input name="submitname" type="submit" value="提交" > <br/>
           
</form>            
</body>
</html>

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

网友评论

婷楼沐熙:原来这就是我老乡呀。好棒哦。你这名字有点叼就是。哈哈哈哈
婷楼沐熙:哈哈哈哈。我之前其实还在想这个人到底是谁。打死我也想不到是你哇。哈哈哈。不过写的棒棒哒。老乡就是厉害。哈哈哈
该帐号已被查封_才怪:@婷楼沐熙名字叼没事，人不叼，不被人叼就好~ 哈哈
该帐号已被查封_才怪:对于<input name="upfile" type="file" > 其实在里面添加accept=“.txt,doc”，其可默认只显示.txt及.doc 的后缀名文档，但用户还是可以选择显示全部文件的，若确实想完全限制用户只能选择某种类型的文件，还是需要通过js或后台实现。具体详见：http://www.cnblogs.com/haocool/p/3431181.html

HTML基础知识4-列表及表单的写法、块级元素和内联（行内）元素

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

jurengu学习笔记收藏

html

前端开发

饥人谷技术博客

Web前端之路