HTML任务2

2016-06-11 本文已影响25人菲龍探雲

问答

有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？
有序列表：li列表之间有顺序关系
无序列表：li别表之间无顺序关系
自定义列表：dd是对于dt标签的描述

<ol>
    <li>ie8</li>
    <li>ie9</li>
    <li>ie10</li>
</ol>

<ul>
    <li>天猫</li>
    <li>淘宝</li>
    <li>京东</li>
</ul>

<dl>
    <dt>html</dt>
    <dd>网页骨架</dd>
    <dt>css</dt>
    <dd>网页皮肤</dd>
    <dt>javascript</dt>
    <dd>网页关节</dd>
</dl>

嵌套有序和无序之间都可以互相嵌套

<ul>
    <li>台式电脑
        <ul>
            <li>联想</li>
            <li>华硕</li> 
        </ul>
    </li>
    <li>笔记本电脑
    <ul>
            <li>联想</li>
            <li>华硕</li> 
        </ul>
    </li>
</ul>

<ul>
    <li>学日语
        <ol>
            <li>学五十音</li>
            <li>学单词发音</li>  
        </ol>
    </li>

    <li>学英语
        <ol>
            <li>学音标</li>
            <li>学单词发音</li>  
        </ol>
    </li>
</ul>

Paste_Image.png

如何去除列表前面的点或者数字？
list-style:none

Paste_Image.png

class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class：元素可以共用一个class
id：id有唯一性
在写复用性的样式的时候可以用class
在使用js获取元素的时候可以用id；或者是某些指定属性需要使用id来关联

块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？display: block、display: inline、display: inline-block分别有什么作用?
块级元素：一个元素单独占一行，设置height,width，margin,padding都有效,可以包含块级元素和行内元素
行内元素：大小取决于内容的大小，可以水平排列直到容器宽度不够，width,height无效，margin和padding上下无效，水平有效，只能包含行内元素，无法包含块级元素。

Paste_Image.png

块级元素:div、p、h1~h5、ol、li、ul、form、table等
行内元素：img、input、em、span、strong、a等

display:block 把元素转换为块级元素
diplay:illine 把元素转换成行内元素
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>

当屏幕宽度大于900px时所有class为warp的元素或其子代元素都会自适应居中

如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
html标签都有自己的意思，不可乱用div class和id取名要合理让人一眼就看得懂

id唯一性
class 名字之间用-链接
合理利用<nav>等html5标签
布局结构层次明了

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

提交用户数据

<form>
<input type="text" title="文本输入">
<input type="password" title="密码输入">
<input type="radio" name="radio" title="单选按钮">单选按钮一
<input type="radio" name="radio" title="单选按钮">单选按钮二
<input type="checkbox"  title="复选框">多选框一
<input type="checkbox" title="复选框">多选框二
<input type="Submit" value="Submit" title="提交按钮">
<input type="button" title="按钮" value="这是按钮">
<textarea rows="10" cols="10">这是文本域
</textarea>
<select name="下拉列表">
<option value="下拉选项一">下拉选项一</option>
<option value="下拉选项二">下拉选项二</option>
<option value="下拉选项三" selected="selected">下拉选项三</option>
<option value="下拉选项四">下拉选项四</option>
</select>
</form>

post 和 get 方式的区别？

get 传输的值会在url上展示出来，可以通过浏览器历史回看，不安全。发送的数据有限，使用简单。一般用于想后台发送请求的数据
post 传输安全可发送大量数据可向后台发送私密的数据

在input里，name 有什么作用？
数据给发送后台后台需要通过name来找到相对应的数据
还有就是单选按钮需要name来做一下关联不然就是多选等

<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 属性有什么作用?
是占位符可以填在文本输入框内来提醒用户填写哪些内容

type=hidden 隐藏域有什么作用? 举例说明
可以隐藏文本在需要对提交的数据进行过滤的时候使用

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

HTML任务2

猜你喜欢

热点阅读