任务7-HTML4

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

①有序列表、无序列表、自定义列表的使用如下方代码：



  
  


    
        无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用ul标签

Coffee
Milk
tea



    有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。
列表项项使用数字来标记。

Coffee
Milk
tea


    
    自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以dl标签开始。每个自定义列表项以dt开始。每个自定义列表项的定义以dd开始。

    drinks
Coffee
Milk
tea
    foods
cookies
hamburger
potato chips

以上代码效果如图：

list

②三者区别：

无序列表只是纯粹的表示一些相关项的列表，这些项或者顺序不重要或者没有编号或者不以字母顺序为序。在HTML中创建无序列表使用块级元素ul，列表中的项用块级元素li表示。
有序列表元素ol，以及其中的列表项和无序列表相似。主要的不同在于有序列表中每项的顺序很重要。与无序列表显示一个实心的小圆点不同，默认有序列表显示数字的序号。使用CSS可以将其更改为字母、罗马数字或者其他。
定义列表有别于无序列表和有序列表。定义列表通常用来概述多个及其描述，通常是专业集。在HTML中使用dl元素来表示定义列表，定义列表中不使用li定义列表项，而需要使用两个元素：定义术语用dt元素，定义属于的描述用dd元素。

③

如果项目之间有顺序之分可以使用有序列表；
如果是无序的项目则可以使用无序列表；
如果需要概述多个项目及其描述可以使用自定义列表。

④列表嵌套：




  
  


    
    
    drinks
    
Coffee
Milk
tea
    
    green tea
    black tea
    jasmine tea
    
    
    
    foods
    
cookies
hamburger
potato chips

以上代码效果如图：

qtlist

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

通过设置list-style:none
效果如下图（未去点和数字的图片见题一答案最后一个图）：

0_1480428927921_屏幕快照 2016-11-29 下午9.46.16.png

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

在样式表定义一个样式的时候，可以定义id也可以定义class。

在CSS文件里书写时，ID加前缀"#"；CLASS用"."
id一个页面只可以使用一次；class可以多次引用。
ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

決定什麼時候要用 ID 及什麼時候要用 Class。我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外，是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下，你就應該要用 ID。
Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。

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

block（块）元素的特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
常见块级元素有：
◎ address - 地址
◎ blockquote - 块引用
◎ center - 举中对齐块
◎ dir - 目录列表
◎ div - 常用块级容易，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）

inline元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素
常见行内元素有：
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器，定义文本内区块
◎ strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

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

display: block 将元素转化为块级元素，可以设置宽高，可包含块元素和内联元素，不设宽度时自动撑满一行
display: inline 将元素转化为行内元素，可以不独占一行，可包含块元素和内联元素
display: inline-block 将元素转化为行内块级元素，可以不独占一行，同时可以设置宽高，不设宽度时宽度由内容宽决定，ie6,7下不支持inline-block

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

该代码为一个网页的基本布局结构，其中包含id="header"头部(头部里面包含着class="nav"导航),id="content"内容(里面包括class="aside"侧边栏和class="margin"中心区块)，以及id="footer"底部,较大的区块用id定义，而大区块里面的稍小一些的分支用的class定义。

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

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
平时写代码时应该注意的细节：
①根据文档上下文结构合理的选用最适合表达当前语义的标签；
②尽可能少的使用无语义的标签div和span；
③不要使用纯样式标签，如：b、font、u等，一切表现改用css设置；
④h标签的使用应该根据重要性逐级递减，没有断层。并且一个页面只能有一个h1；
⑤提高关键词密度，如图片替换alt，链接说明title；
⑥正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd
⑦需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
⑧使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
⑨每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

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

HTML 表单用于搜集不同类型的用户输入。
常用的input类型有：
button:定义可点击按钮。
checkbox:定义复选框。
file:定义输入字段和“浏览”按钮，供文件上传。
hidden:定义隐藏的输入字段。
image:定义图像形式的提交按钮。
password:定义密码字段。该字段中的字符被掩码。
radio:定义单选按钮。
reset:定义重置按钮。重置按钮会清除表单中的所有数据。
submit:定义提交按钮。提交按钮会把表单数据发送到服务器。
text:定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

9.post 和 get 方式的区别？

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

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

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

11.、提交、三者有什么区别？

点击不会有提交的效果，只是一个链接指向href内容。

点击“提交”把

12.radio 如何分组?

设置name的值，name值相同的即为一组。

13.placeholder 属性有什么作用?

用以描述输入字段预期值的提示（样本值或有关格式的简短描述），该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

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

作用：

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。

代码如下：



 
 
hidden 




  First name: 

  
  


注意隐藏字段用户是看不到的。

效果如下：

hidden

代码