第65次(html和css)
第65次(html和css)
学习主题：html和css
学习目标：
1 掌握html5新增标签的使用
2 掌握css入门
对应视频:
http://www.itbaizhan.cn/course/id/85.html
对应作业
- HTML5的介绍
- HTML的整个发展的历史版本是什么?
Html 1.0
Html 2.0
Html 3.0
HTML 4.0 HTML4.01 –XHTML(比h4 语义更加严谨.)
HTML 5
- HTML5相比HTML4而言他的优点是什么?
- 去除了HTML4中不常用的标签
- HTML5新增了一些语义标签
- 功能强大
- HTML5中的增强表单标签
- 请问常用的H5的增强表单标签有哪些，请列举?
<form action="" method="get">
邮箱: <input type="email" name="eam" placeholder="请输入邮箱地址!" autofocus="autofocus"/> <br/>
数字: <input type="number" max="25" min="10" /><br/>
文本: <input type="text" maxlength="5" minlength="1" /><br/>
日期: <input type="date" /><br/>
<input type="range" /><br/> 滑动条
颜色: <input type="color" /><br/>
<input type="month" /><br/>
<input type="submit" /> <input type="reset" />
</form>
- HTML5中新增结构标签
- H5中新增的结构标签的作用是什么?
和 div一样的效果,可以代替div 使用,但是一般还是使用div.
- HTML5中音频视频标签
- 如何书写一个相对完整的音频标签?
<audio controls="controls">
<source src="/H5/img/程佳佳 - 山楂树之恋.flac""></source>
浏览器版本过低,请升级后再打开!!!
</audio>
- 如何书写一个相对完整的视频标签?
<video src="/H5/img/00a发刊词：为什么人人都要懂点犯罪心理学？.mp4" controls="controls">
浏览器版本过低,请升级后再打开!!!
</video>
- 视频标签是如何使用的?
Embed 可以添加为视频,也可以是音频.
<embed src="/H5/img/00a发刊词：为什么人人都要懂点犯罪心理学？.mp4" controls="controls" ></embed>
- HTML5中绘图和其他标签
- details 标签的作用?
相当于 select option 标签, 但是details 中可以放很多不同的标签.更加灵活.
<details >
<!--设置下拉框的名称-->
<summary>点击打开下拉框</summary>
<img src ="img/QQ.png" />
<p> 使用<qq></qq></p>
点击打开
</details>
- 刻度标签的是如何使用的?
Max: 设置刻度标签的最大值
Min: 最小值
Low: 最低界限 (低于变色)
High: 最高界限 (高于变色)
Value: 设置标签的 当前值
<meter max="100" min="0" value="20" low="30" high="70"> </meter>
- CSS的入门
- 简述CSS的作用?
- HTML 虽然可以在一定程度上修饰网页,但是页面的整体还是不够美观.
- HTML 进行网页的书写重复的代码比较多,后期的维护性不够好.
- CSS使用的载体是什么?
Html css是对html代码的修饰.
- 引入CSS样式
- 简述你对就近原则的理解?
HTML 加载代码时,会从上而下的运行,如果 引入的css 样式的属性重叠时,会执行最近的哪一个 css 的样式,其他的样式会进行叠加.
- 请问 CSS的几种引入方式的使用场合分别是什么?
- 内联样式 只能使用于当前网页
- 外联样式 相当于独立出来的css样式,可以用于多个HTML
- 行内样式 只能用于此标签行,会产生大量的代码.
- 导入样式(不推荐使用.)
<head>
<meta charset="utf-8">
<title>引入css样式</title>
<!--行内样式-->
<style >
span{
color: yellow ;
font-size: x-large;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<p style=" color :red ;
font-size: initial;
">
css 行内样式的使用
</p>
<span >
css 内联样式的使用
</span>
<link rel="stylesheet" type="text/css" href="css/c1.css"/>
<p> 外联样式的使用</p>
</body>
第66次（css）
学习主题：css
学习目标：
1 掌握css选择器
2 掌握css常用属性
3 掌握css定位
4 掌握css盒子模型
对应视频:
http://www.itbaizhan.cn/course/id/85.html
对应文档:
无
对应作业
- CSS选择器1
- 请说出三种常用选择器的使用场景?
通用选择器: 可以适用于 所有的标签.
元素/标选择器： 可以对一类元素进行设置
ID 选择器： 对单个标签进行设置
类 选择器： 可以对多个不同的标签进行设置
- 常用选择器的优先级是什么？
ID 〉 lass 〉标签〉通用选择器
- CSS选择器2
- 请说出子选择器和后代选择器的区别
后代选择器会将 父元素中的某一种的所有子元素进行设置.
- 请说出子选择器和后代选择器的区别
子选择器 父元素的某一种第一代子元素进行设置
- CSS常用属性1
- 罗列出本节课将的常用属性
Font-size : 12px 设置字体大小
Font-wight：bold 字体加粗
Font-family ： 宋体 设置字体样式
Text-decoration: none 去除下划线
Text-align :center 设置字体水平居中
Line -height ：40 px
当行号和容器的高度相同时，字体会自动垂直居中。
- CSS常用属性2
- 罗列出本节课将的常用属性
Background-img: url(网络地址)
Background-repeat : no-repeat 设置图片不重复
Background-position : center 设置位置居中
` background-size : 200px 300px 设置宽 高的长度
Background-color : rgb(255,0,0,.0.5) 0.5 是设置不透明度.
- CSS常用属性3
- 罗列出本节课将的常用属性
Opacity :设置内容的整体透明度
Display:block 将行内元素块级元素
Inline 块级元素行内元素
Float:left 设置 浮动到左侧
Padding-left:15px 设置内间距为15px
- CSS中的定位
- position 的取值有几个，各自的特性是什么？
绝对定位: absolute 定位离开之后释放之前的位置 基于外层父级标签来说
相对定位: relative 定位离开之后之前位置不释放 基于之前的位置而言
固定定位: fixed 始终是基于浏览器的左上角定位 适合做广告
默认定位 :static 初始化定位的操作
- 盒子模型
- margin 的作用和可用的值请简述？
给容器设置外边距 可以有四个参数 参数以顺时针进行设置.
中间不能有逗号分隔 只能是用空格
列如:
margin: 50px 40px 30px 20px;
- padding 和 margin 的特点和特性是什么？
注意的点:
Margin是对容易外边距的设置 在垂直位置 外边距会进行重叠(10+20 =20 取最大的)
在水平位置 外边距会进行合拼(10+20 =30 取和)
每个浏览器都会对页面设置留白 可以修改HTML 和body的margin和padding 的值进行修改.
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
