课程任务
问答
- 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套?
- 分别使用ol ul dl关键字进行引用。
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>
<li>无序列表,用的最多</li>
<li>无序列表</li>
</ul>
<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
<dt>列表头</dt>
<dd>列表内容</dd>
</dl>
现实结果
有序列表在需要多一个序号,有顺序的情况用
无序列表就是各个元素并列,无先后顺序使用
自定义列表,更灵活一些,可以改一些表头什么的
,更有结构
- 如何去除列表前面的点或者数字?
li{list-style:none;} - class 和 id 有什么区别?什么时候用 class 什么时候用 id?
1、在CSS文件里书写时,ID加前缀"#";CLASS用"."2、id一个页面只可以使用一次;class可以多次引用。3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。 -
块级元素、行内元素是什么?有什么区别?分别对应哪些常用标签?
块级元素 比如 div、 ul、 p、 h1…h6、 table、 tr、 ul、 li、 dl、 dt、 form
行级元素a、 img、 span、 input、 button、 em、 textarea
http://www.w3cwhy.com/css-html/html-hkmarka.html
display: block
、display: inline
、display: inline-block
分别有什么作用?
简单讲就是[display:inline] 转化成[内联元素]不换行;display:block转换成块元素,换行;[display:inline]-block内联块元素,既不换行又可以使用块元素所拥有的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。下面代码是做什么的?抄写一遍下面的代码,注意class和id的使用及命名方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> --utf8编码
<style>
.wrap{ --对wrap类的css样式
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>
- 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
第一是分块,合理的分层,第二使用合理的标签,第三合理的命名。选择合适的标签,使用合理的代码结构,合理的命名,便于开发者阅读,同时让浏览器便于解析。 - form表单有什么作用?有哪些常用的input 标签,分别有什么作用?
form表单用于与后端服务器进行数据传递,并包含全局属性 action,值为URL,规定当提交表单时向何处发送表单数据。
method,可选择通过“post”方式或“get”方式进行通信。
input标签有多种type属性 button 定义可点击的按钮,多数用于启动JS
- text 定义单行文本输入
- checkbox 定义复选框
- radio 定义单选圆圈按钮
- file 用于上传文档
- reset 重置form中所以输入
- submit 定义提交按钮,用于提交所以的输入数据
- password 定义密码输入字段,用户输入的字符会用星号显示
hidden 定义隐藏的输入字段 可用于简单效验
post 和 get 方式的区别?
在使用场景上,get 的语义化理解就是在后端上获得数据,类似索引的方式,用比较少的字符来请求后端返回数据;而 post 更像是本地有比较多的数据要上传到后端,要把数据推上去。 他俩最主要的区别是,get用小数据获取大数据,post用于上传较大数据。在input里,name 有什么作用?
name是在input标签内的属性,在表单上传的时候,一个input标签会有一个name=value被上传,name属性定义键,value定义键值。-
<button>提交</button>
、<a class="btn" href="#">提交</a>
、<input type="submit" value="提交">
- button方式需要JS脚本的支持
- 使用 超链接a 标签,不提交表单。
- input type submit 可以正常提交表单有什么区别?
radio 如何 分组?
通过name设置成一个值就分到一个组了。placeholder 属性有什么作用?
placeholder属性定义text、textarea、password中的提示文字type=hidden
隐藏域有什么作用? 举例说明
密码不显示明文