html4

2016-07-16 本文已影响15人 ahong_吴

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

1.如何使用

有序列表：
<ol> <li>饥人谷</li> </ol>
无序列表：
<ul> <li>饥人谷</li> </ul>
自定义列表：
<dl> <dt>表头</dt> <dd>饥人谷</dd> </dl>

**2.区别与使用场景 **

有序列表：每项<li>前都自带一个序号，序号默认从1开始。适合于有步骤、有顺序的的使用场景。
无序列表：没有前后顺序的信息列表，每项<li>前都自带一个圆点。适合于导航等并列的使用场景，是最常见的。
自定义列表：有一个自定义列表头，适合有标题的情况。
3.嵌套

Paste_Image.png

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

使用list-style：none实现。

Paste_Image.png

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

1.区别

id具有唯一性，class具有普遍性，所以一个页面同一个ID只能使用一次，而class可以无限制使用。重复使用的元素、类别，用class定义。
id就像中国的省份，每个都是独一无二的，名称不可重复。而class就像省份里的乡镇，名字重复也无所谓。

2.什么时候用

id需要具有唯一性，并且尽量在外围使用，如网页的大致布局，多数选用ID选择符来控制以施加样式，而class具有可重复性，并且尽量在结构内部使用。
id还可以用于锚点

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

在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素：

块级元素占据的空间是一整行。可以设定元素的宽（width）和高（height），可容纳块级元素和行内元素。
行内元素可以与其他元素并列一行。不能设置宽高，宽高与它自身内容有关。设置垂直的margin,padding是无效的，水平的是有效的。行高可以撑开空间。

块级元素常用标签：div,p,ul,li等。
行内元素常用标签：a,b,img,em，span，input等。

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

改变元素的展示形式：
display：block; 此元素将显示为块级元素
display：inline; 此元素会被显示为内联元素
display:inline-block; 行内块级元素/inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。/
display: none; 隐藏，脱离文档流。

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

上面的代码分为头部、内容、底部3大区块，这3大区块都是用id命名，在3大区块包裹中的小区块用的是class命名。.wrap样式的作用是让导航栏居中,上下边距为0。头部的导航使用的无序列表。

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

合理的使用标签。虽然有其他签可以做出同样的效果，但是我们不要这样做，要使我们的代码语义化，因为这样更利于蜘蛛的爬行和机器的解读。
在写代码的过程中要要注意：

规范取名
标签是否闭合
注意字母大小写
多个单词使用中横线链接

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

表单作用:用于把用户输入的数据提交到后台
<form name="myForm" action="/test/6.php" method="get">

name: 表单提交时的名称
action: 提交到的地址/如果不写地址，信息就会提交到当前页面/
method: 提交方式，get和post/一般小型的表单用get/

常用标签与作用

type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；/* */

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

type="password": 用于输入密码，输入的内容显示为星号。

<input name="password" type="password" placeholder="提示信息" />

type="radio": 单选圆圈按钮。注意：name要相同才能实现单选，value要有值。

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女

type="checkbox": 复选框。加checked属性会默认选上。

<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车

type="textarea": 文本域，用于输入多行文本，rows为行数,cols为宽度

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

type="hidden": 隐藏域，用户看不到，用于暂存数据。或者安全性校验

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

下拉列表

 <select name="mycar"> 
<option value ="volvo">宝马</option>
<option value="audi" selected>宾利</option> 
</select>

提交按钮

 <input type="submit" value="提交" />

九、post 和 get 方式的区别？

数据提交方式不同，get把提交的数据url可以看到，post看不到。
get一般用于提交少量数据，post用于提交大量数据。
get最多提交1k数据，浏览器的限制（ url 最多一千个字符）。post理论上无限制，受服务器限制。
get提交的数据在浏览器历史记录中，安全性不好。

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

name：为文本框命名，以备后台程序ASP 、PHP使用。
input 的类型是radio或checkbox的时候，就可以通过name设置为一组了。

Paste_Image.png

checkbox（复选框）这样在命名的时候比较方便，后台也会给对应的变量选择对应的输入数据。

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

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

<button>提交</button>
标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
<a class="btn" href="#">提交</a>
只是在按钮上加了一个链接，点击后会跳转至其他页面。
<inputtype="submit"value="提交">
用于提交表单数据

十二、radio 如何分组?

radio是单选圆圈按钮，如果其name值相同，它们就会被分为一组，实现单选。

<inputtype type="radio" name="single" value="web" checked>前端
<inputtype type="radio" name="single" value="php" checked>后端

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

placeholder的作用：文本框中设置提示信息。

Paste_Image.png

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

Paste_Image.png

如图，用户是看不见图上的“234”的，但是当用户点击提交时，浏览器会把“234”这个数据提交给后台，而只有“234”这个数据和后台预设的“234”是一致时，表单的数据才能提交成功，这就是一个安全性的考虑。

html4

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

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

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

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

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

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

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

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

九、post 和 get 方式的区别？

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

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

十二、radio 如何分组?

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

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

猜你喜欢

热点阅读

html4

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

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

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

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

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

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

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

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

九、post 和 get 方式的区别？

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

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

十二、radio 如何 分组?

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

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

猜你喜欢

热点阅读

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

十二、radio 如何分组?