饥人谷技术博客

HTML4

2016-06-28  本文已影响121人  婷楼沐熙

最近还莫名其妙的生病了，好受打击，希望能顺顺利利的学完我的前端。加油！

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

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

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<dl>
    <dt>表头</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

总的来说，列表无论用上面三种的哪一种都可以实现，关键要看列表要怎么展示出来，然后选择最适合的方式。有序列表适用于明显的排列顺利，而且次序不能乱；无序列表最常见，适用于简单的列出，表示并列关系；自定义列表有的时候可能会更简单，更精准，语义化更好。
列表是可以嵌套的，下面写个简单的实例，其中也含有列表嵌套：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="U-XA-Compatible" content="IE=Edge chrome=1">
    <title>列表</title>
    <style type="text/css">
      ol[class="daily life"]{
      color: rgba(255,200,10,0.5);

    }
    .plan{
        color: blue;
    }
    .steps{
        color: #0ff;
    }
    .hobby{
        color: rgb(255,0,0);
    }
    </style>
</head>
<body>
    <ol class="daily life">
        <li>刷牙</li>
        <li>洗脸</li>
        <li>吃饭</li>
    </ol>
    <ul class="about study">
    <li class="plan">
            <h3>规划</h3>
            <ul>
                <li>制定出每天要完成的任务</li>
                <li>每天一小步，一步步去实现</li>
            </ul>
        </li>
        <li class="steps">
            <h3>学习步骤</h3>
            <ol>
                <li>先看视频</li>  
                <li>把问题整理成博客</li>
                <li>对于重要的知识点，自己要再去多查阅资料，善于总结</li>
            </ol>
        </li>
    </ul>
    <dl class="hobby">
        <dt>兴趣爱好</dt> 
        <dd>旅游</dd>
        <dd>交朋友</dd>
    </dl>
</body>
</html>

效果预览地址：预览
ps:如果class名称为多个单词，除了使用上面的命令[class="A B"]外，还可以使用[class=A][class=B]。

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

要去除列表前面的点或者数字，使用list-style: none;就可以实现。

去除列表的点和数字

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

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

提到块级元素和行内元素，就必须要提到display，它可以改变元素的展示形式，比如说把块级元素变成行内元素，这就是下面要提到的内容。

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

ps：text-align用于块级元素，一个div或者段落上，对内部行列元素（文字或者图片等）生效。

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

上面的代码主要是把页面分为三个部分：头部、内容、底部。头部里面有三个导航栏，内容有侧边栏和中心区块，底部就是footer。三大块由不同的id命名，即id用来划分大的区块，内部使用class区分，这里命名要注意语义化，命名风格要保持统一。在内部结构中，三个区块结构里面共用了一个class，也就是wrap，在样式设置中设置了它的宽度（防止撑满一行）和外边距（水平居中）。

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

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

    <form name="myForm" action="/test/6.php" method="post"> 

<input name="username" type="text" placeholder="用户名" maxlength=10 /> 

<input name="password" type="password" placeholder="密码" />

<input name="upfile" type="file" >

<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" />汽车

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

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

<input name="submit" type="submit" value=“提交” >

  我的car:
              <select name="mycar">
              <option value="volvo">Volvo</option>
              <option value="audi">audi</option>
              <option value="opel" selected>opel</option>

九.post 和 get 方式的区别？

比较的方面 post get
提交数据的方式 提交的数据看不到 会把提交的数据组装成URL，可以看得到
数据的大小 用于大量数据的提交 用于少量数据的提交
限制 post理论上无限制，受服务器限制 get最多提交1k数据，浏览器的限制
历史记录 提交的数据不会在历史记录当中 提交的数据会存在在历史记录当中
刷新 数据会被重新提交 没有影响
编码 没有限制 只允许 ASCII 字符
安全方面 更安全，因为数据不会组装成 URL，不会存在与浏览器历史记录当中 不安全，提交的数据会组装成URL，而且会有历史记录

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

name是表单提交时的名称，如果它的值相同，则表示它们是一组，可以实现单选。复选框当中，可以把name值设置成一个数组，比如：

爱好：
<input type="checkbox" name="love[]" value="dota" checked />dota
<input type="checkbox" name="love[]" value="travel" checked />旅游

这样在命名的时候比较方便，后台也会给对应的变量选择对应的输入数据。需要注意的是，input都要有name属性。

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

十二.radio如何分组?

通过设置name值实现分组，如果name值相同，则表示它们是一组，可以实现单选。

<input type="radio" name="major" value="communication engineering" />通信工程
<input type="radio" name="major" value="network engineering" />网络工程

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

placeholder是用于显示在输入框提示的信息。

评论：
<textarea name="comment" maxlength="30" placeholder="评论"></textarea>
placeholder

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

隐藏域，用户看不到，用于暂存数据或者后台进行安全性校验。


隐藏域

虽然用户看不到，但向后台提交的数据中其实包含了check=1234。

十五.iframe

iframe 也是html的一个标签，在一个页面中嵌入另一个网页，创建包含另外一个文档的内联框架。iframe的属性有以下几种：

<body>
    <iframe src="http://baidu.com" name="myPage"></iframe>
    <p><a href="http://www.w3cschool.cc" target="myPage">百度</a></p>
    <p><a href="http://book.jirengu.com" target="myPage">饥人谷</a></p>
</body>
效果图

十六.代码

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

要实现的界面
效果预览地址：预览效果
代码的github链接：Github
上一篇下一篇

猜你喜欢

热点阅读