7.HTML4

作者: 鸿鹄飞天 | 来源:发表于2016-07-27 20:12 被阅读38次

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

有序列表 ol（ordered list）
有序列表，字面上讲，就是有顺序的列表。有序列表使用编号来记录项目的顺序，默认情况下在每项前面显示1,2,3…，它适用于要求有顺序排列的项目，有序列表使用<ol>标签，每个列表项使用<li>标签。

Paste_Image.png

另外在html5中<ol>标签添加了四个新的属性:

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

无序列表 ul（unordered list）
无序列表就是没有顺序的列表，项目列表默认用圆点，适用于并列不分前后顺序的项目。无序列表用<ul>标签，每个列表项目使用<li>标签

Paste_Image.png
另外它有两个属性，一般在css中使用

Paste_Image.png

<ul type="cirle">
<li>我的无序列表</li>
<li>我的无序列表</li>
<li>我的无序列表</li><
</ul>

Paste_Image.png

自定义列表 dl（definition list）
根据定义解释：自定义列表不仅仅是一列项目，也是项目及其注释的组合。自定义列表始于<dl>标签，每个列表项始于表头<dt>，列表项的说明始于表内容<dd>。
个人理解：使用<dt>写出项目名称，<dd>描述项目名称，一个项目可以有多个项目名，多个描述。

Paste_Image.png

三者语义上的区别及适用场景
在用div布局整个页面时，而用这三种列表可以运用在一些网页的局部，因为他们是语义化表签，所以更容易理解，而且能够嵌套，这跟div布局相同，都是由大到小，而且能够节省css中的命名。
有序列表适用于明显的排列顺利，而且次序不能乱，因此经常使用无序列表和自定义列表，因为他们没有顺序可以并列；这两个列表相比的话，自定义列表更简单，精准，也更好理解。

如何嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<p>这里是嵌套</p>
<ul>
<li>课程目标
<ul>
<li>熟悉列表的使用场景和用法</li>
<li>理解HTML语义化</li>
</ul>
</li>
<li>学习建议
<ul>
<li>语义化、行内元素块级元素、POST 和 GET 的区别这是面试必问的知识点</li>
</ul>
</li>
<li>预习视频
<ul>
<li>课程视频-HTML-列表|块级元素|行内元素</li>
<li>课程视频-HTML-Form表单</li>
</ul>
</li>
<li>课程任务
<dl>
<dt>问答</dt>
<dd>
<ul>
<li>有序列表、无序列表、自定义列表如何使用</li>
<li>如何去除列表前面的点或者数字？</li>
</ul>
</dd>
</dl>
</li>
</ul>
</body>
</html>

Paste_Image.png

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

使用list-style：none；

Paste_Image.png

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

区别:
1.id是identity的缩写,是身份标识号码的意思,是一个编码，它是唯一的，在页面上只能使用一次。class就是类的意思，表示一类型的样式，具有普遍性，可以重复使用。
2.从概念上说id是先找到结构或者内容，再给它定义样式；class是先定义好一种样式，再套给多个结构或者内容。
3.class和id都是选择器，它们之间有权重的区别，当同一个标签同时有class和id属性，但在写CSS样式时，id优先级高于class
4.class可以写成class="intro other"，可以有多个class名，id名不能这样写

什么时候用 class 什么时候用 id
因为id具有唯一性，所以通常在结构外围使用，通常用于页面布局。id多用于Javascript操作DOM；class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。

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

Paste_Image.png
说明：1、块级元素是其他元素的容器元素，可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。
　　　2、对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的。利用审查元素，当你鼠标放置在块级元素上面时，选中的是元素所在的一整行；而放置在行内元素时，只选中了元素所在内容的那一部分。
Paste_Image.png
块级元素常用标签:div、p、h1-h6、table、tr、ol、ul、li、dl、dt、form
行内元素常用标签:a、span、img、input、button、em、textarea

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

display: block将元素设置为块级元素
display: inline将元素设置为行内元素
display: inline-block将元素设置为行内块元素，既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置宽高和上下左右的边距,，但缺点是IE8以下不能使用。也可以通过浮动来实现相同的效果。
display: none；隐藏，脱离文档流。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.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>

上面的代码把页面分成了三部分：头部，内容，底部。然后三部分的内部又分别分成几个小部分，几个小部分用同样的类名wrap进行包裹，设置相同的宽和内容水平居中的样式。因为id是唯一的，它是区分结构和内容的，所有三部分使用id，里面的a标签是图片链接，是独一无二的，所以也使用了id，然后三大部分内部使用class划分小区块。这里命名要注意语义化，命名风格要保持统一，如nav就是导航的缩写，aside就是侧边的意思。

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

HTML 标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单。无语义标签典型的有div等。
所以语义化就是要根据情况选择正确的标签，恰当的利用好标签的作用。

命名要有一定的含义，让人一看到就能知道是什么，这样便于维护和阅读。

命名风格要保持统一，比如命名中包含2个以上单词用“-”链接。

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

form表单是用来把用户输入的数据提交到后台
Paste_Image.png
提示：name:表单提交时的名称；action提交到的地址，如果不写action，信息就会提交到当前页面；method提交方式（get和post），如果不写，默认的是get。

<form name="myform" action="#" method="post"></form>

常用的input 标签
①type="text",用于输入文本。placeholder属性展示的是输入框里的提示，maxlength，限制最大输入长度。

<input name="myname" type="text" placeholder="ffff" maxlenght="20" disabled/>

②type="password"，用于输入密码,叫做密码域，输入的内容显示为星号。

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

③type="radio"，单选圆圈按钮。注意：name要相同，这样表示它们是一组，才能实现单选，value要有值，否则后台无法显示对应的输入值。

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

④type="checkbox"，复选框。加checked属性会默认选上。提交时，如果选中（如bike），那么bike=on。

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

⑤type="submit"，用于提交表单数据。

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

⑥type="textarea"，文本域，用于输入多行文本。

<textarea name="comment"  maxlength="200" placeholder="ddd"/></textarea>

⑦下拉列表框

<select name="fruit">
    <option value="apple"/>苹果</option>
    <option value="orange"/>橙子</option>
    <option value="banana"/>香蕉</option>
/select>

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

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

⑨type="file",用于上传文件。

<input name="upfile"  type="value"/>

参考w3cschool

九、post 和 get 方式的区别？

Paste_Image.png

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

作用是对提交到后台的数据进行标识，或在客户端通过javascript引用表单数值。
只有设置了 name 才能在提交表单时传递value值，所以input必须设置name属性。

当name的值相同时表示一组，可以实现单选。复选框中，可以把name值设置成一个数组，比如：

<input type="checkbox" name="love[]" value="bike" checked/>自行车
<input type="checkbox" name="love[]" value="car" />小车

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

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

<button>提交</button>
是普通按钮，需要绑定JS事件，button里面可以加一些比如文字、图像等内容。

<a class="btn" href="#">提交</a>
是一个文本链接，点击提交会跳转到另一个页面，但是不会向后台提交数据

<input type="submit" value="提交">
可以提交一个表单数据
参考：w3cschool

十二、radio如何分组？

使用设置name值进行分组，如果name值是一样的，就是一组，分组后组内的选项是单选的。

教科书：<input type="radio" name="book"  value="math"/>数学
       <input type="radio" name="book" value="English" />英语

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

作用是在输入框中提示用户应该输入的内容。

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

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

<form name="myForm" action="/test/6.php" method="post">
    密码:<input name="pwd" type="password" placeholder="密码" maxlength="10"/><br/>
         <input type="hidden" name="check" value="123"/><br>
         <input type="submit" name="submit" value="提交">
</form>

Paste_Image.png

提示：只有当服务器接收到的hidden和预存的信息一致时，才能成功提交表单数据，与生俱来的安全性

十三、iframe

iframe 元素会创建包含另外一个文档的内联框架（行内框架），即在页面中嵌入另外一个页面，形成一个画中画的效果。

iframe 可用作链接的目标（target）,链接的 target 属性必须引用 iframe 的 name 属性。

<style type="text/css">
    iframe{
        width:100%;
        height:500px;
    }
</style>
</head>
<body>
    <iframe src="" name="mypage" frameborder="1"></iframe>
    <p><a href="http://www.jirengu.com/" target="mypage">饥人谷</a></p>
    <p><a href="http://taobao.com" target="mypage">淘宝</a></p>   
</body>

Paste_Image.png
参考：
w3cschool
iframe

next:8.CSS选择器
pre;6.HTML3

7.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>、<input type="submit" value="提交"> 三者有什么区别？

十二、radio如何分组？

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

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

十三、iframe

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

7.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>、<input type="submit" value="提交"> 三者有什么区别？

十二、radio如何分组？

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

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

十三、iframe

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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