每日练习level-7

1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？能否嵌套？
有序列表是一列使用数字进行标记的项目，它使用<li>包含于<ol>标签（ordered lists）内；

无序列表是一组使用黑点状进行标记的项目，它使用<li>包含在<ul>标签（unordered lists）内；

定义列表语义上表示项目及其注释的组合，它以<dl>标签（definition lists）开始，自定义列表项以<dt>（definition title）开始，自定义列表项的定义以<dd>（definition description）开始。

从语义上来讲，三组标签分别对应不同具有含义的列表：无序列表适合成员之间无级别顺序关系的情形；有序列表适合各项目之间存在顺序关系的情形；定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义，也可以只有术语名称或只有定义，也就是说<dt>与<dd>在其中数量不限、对应关系不限。

用css属性list-style-type:none:可以去掉列表前面的点或者数字


<ol>
    <li>开始部分</li>
    <li>次要部分</li>
    <li>结尾部分</li>
</ol>
<ul>
    <li>关于主题</li>
    <li>关于形式</li>
    <li>关于内容</li>
</ul>
<dl>
    <dt>CSS</dt>
    <dd>CSS概念</dd>
    <dd>CSS应用</dd>
    <dd>CSS hacks</dd>
</dl>
<ol>
    <li>开始部分
           <ul>
                <li>关于主题</li>
                <li>关于形式</li>
                <li>关于内容</li>
           </ul>
   </li>
    <li>次要部分
          <dl>
                 <dt>CSS</dt>
                 <dd>CSS概念</dd>
                 <dd>CSS应用</dd>
                 <dd>CSS hacks</dd>
          </dl>
    </li>
    <li>结尾部分</li>
</ol>

2.class 和 id 有什么区别？什么时候用 class 什么时候用 id
W3C对于ID与CLASS的设定是ID具有唯一性，CLASS 具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的，所以在 XHTML的结构中，大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID，配色背景用CLASS，其实这是不正确的，ID与布局排版没有直接关系，CLASS与配色也不是对等的。有人呢为了麻烦全都用ID或是全都用CLASS，全都用CLASS呢还有可理解，全都用ID就不正常了，这有悖ID唯一性。如果每个ID都不一样，那非累死不可。我通过实践总结的使用原则是：ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗，就是这个道理。在我们写 CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID，.father #child {…}如果写成这样显得有点可笑。当然这也不是铁定的，特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用
3.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块元素
1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
行内元素
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
块元素 div p ul ol dl dt form h1-h6 table tr
行内元素:a、span、img、input、button、em、textarea
4display: block、display: inline、display: inline-block分别有什么作用?
display: block将元素改变为块元素;display: inline将元素改变位行内元素,display: inline-block:将元素改变为行内块显示
5.下面代码的作用?

<div id="header">
</div>

<div id="content">
    <div class="main"></div>
    <div class="aside"></div>
</div>

<div id="footer">
</div>

html结构布局,将页面分为header、content、footer三块，分别具有唯一标示id。其中content包括main和aside具有class类属性。
6.如何理解 HTML CSS 语义化?
合理的使用html标签,便于开发者阅读和写出更优雅的代码的同时让浏览器的搜索引擎爬虫抓取和机器很好地解析。
7.**form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
post 和 get 方式的区别？
在input里，name 有什么作用？
**
<form> 标签用于创建 HTML 表单。

表单能够包含 input 元素，比如文本字段text、复选框checkbox、单选框radio、提交按钮submit等等。

表单还可以包含 menus、textarea、fieldset和 label 元素等。
get 方式,from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
post 方式,from表单里所填的值，附加在HTML Headers上。
①数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。

②敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。

③大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。

①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username=‘text的值’。

②input type='radio’单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。

<input type="radio" name='sex'/>男
<input type="radio" name='sex'/>女

③快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。

function changtxtcolor() {
    var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签
    for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
        txts[i].style.backgroundColor = 'red';
    }
}

8.**<button>提交</button>、<a class=“btn” href="#">提交</a>、<input type=“submit” value=“提交”> 三者有什么区别？
radio 如何分组?
placeholder 属性有什么作用?
type=hidden隐藏域有什么作用? 举例说明
**
<button>提交</button>仅仅是一个按钮，并没有直接提交表单数据的功能
<a class=“btn” href="#">提交</a>如果href的链接为提交数据的js文件，则可以实现提交数据
<input type=“submit” value=“提交”>是表单提交，有默认的样式封装

input type='radio’单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。

<input type="radio" name='sex'/>男
<input type="radio" name='sex'/>女

placeholder 属性有什么作用?
用户输入提示
type=hidden隐藏域有什么作用? 举例说明
隐藏域中可以存储表单数据，但是对访问者不可见。
提交表单时，隐藏域中的内容也会被提交给服务器进行处理。
可用于传递附加信息以便于后台分析和处理用户数据或进行安全校验等。

<input type="hidden" name="form_seq" value="2">

每日练习level-7

推荐阅读