html字体代码_第50天 HTML和css的学习

第65次(html和css)

学习主题：html和css

学习目标：

1 掌握html5新增标签的使用

2 掌握css入门

对应视频:

http://www.itbaizhan.cn/course/id/85.html

对应作业

HTML5的介绍
1. HTML的整个发展的历史版本是什么?

Html 1.0

Html 2.0

Html 3.0

HTML 4.0 HTML4.01 –XHTML(比h4 语义更加严谨.)

HTML 5

HTML5相比HTML4而言他的优点是什么?

去除了HTML4中不常用的标签
HTML5新增了一些语义标签
功能强大

HTML5中的增强表单标签
1. 请问常用的H5的增强表单标签有哪些，请列举?

邮箱: <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/>

</form>

HTML5中新增结构标签
1. H5中新增的结构标签的作用是什么?

和 div一样的效果,可以代替div 使用,但是一般还是使用div.

HTML5中音频视频标签
1. 如何书写一个相对完整的音频标签?

浏览器版本过低,请升级后再打开!!!

</audio>

如何书写一个相对完整的视频标签?

浏览器版本过低,请升级后再打开!!!

</video>

视频标签是如何使用的?

Embed 可以添加为视频,也可以是音频.

HTML5中绘图和其他标签
1. details 标签的作用?

相当于 select option 标签, 但是details 中可以放很多不同的标签.更加灵活.

<summary>点击打开下拉框</summary>

点击打开

</details>

刻度标签的是如何使用的?

Max: 设置刻度标签的最大值

Min: 最小值

Low: 最低界限 (低于变色)

High: 最高界限 (高于变色)

Value: 设置标签的当前值

CSS的入门
1. 简述CSS的作用?

HTML 虽然可以在一定程度上修饰网页,但是页面的整体还是不够美观.
HTML 进行网页的书写重复的代码比较多,后期的维护性不够好.
1. CSS使用的载体是什么?

Html css是对html代码的修饰.

引入CSS样式
1. 简述你对就近原则的理解?

HTML 加载代码时,会从上而下的运行,如果引入的css 样式的属性重叠时,会执行最近的哪一个 css 的样式,其他的样式会进行叠加.

请问 CSS的几种引入方式的使用场合分别是什么?

内联样式只能使用于当前网页
外联样式相当于独立出来的css样式,可以用于多个HTML
行内样式只能用于此标签行,会产生大量的代码.
导入样式(不推荐使用.)

<head>

<title>引入css样式</title>

span{

color: yellow ;

font-size: x-large;

}

</style>

</head>

<body>

<p style=" color :red ;

font-size: initial;

css 行内样式的使用

</p>

<span >

css 内联样式的使用

</span>

<p> 外联样式的使用</p>

</body>

第66次（css）

学习主题：css

学习目标：

1 掌握css选择器

2 掌握css常用属性

3 掌握css定位

4 掌握css盒子模型

对应视频:

http://www.itbaizhan.cn/course/id/85.html

对应文档:

无

对应作业

CSS选择器1
1. 请说出三种常用选择器的使用场景?

通用选择器: 可以适用于所有的标签.

元素/标选择器：可以对一类元素进行设置

ID 选择器：对单个标签进行设置

类选择器：可以对多个不同的标签进行设置

常用选择器的优先级是什么？

ID 〉 lass 〉标签〉通用选择器

CSS选择器2
1. 请说出子选择器和后代选择器的区别

后代选择器会将父元素中的某一种的所有子元素进行设置.

请说出子选择器和后代选择器的区别

子选择器父元素的某一种第一代子元素进行设置

CSS常用属性1
1. 罗列出本节课将的常用属性

Font-size : 12px 设置字体大小

Font-wight：bold 字体加粗

Font-family ：宋体设置字体样式

Text-decoration: none 去除下划线

Text-align :center 设置字体水平居中

Line -height ：40 px

当行号和容器的高度相同时，字体会自动垂直居中。

CSS常用属性2
1. 罗列出本节课将的常用属性

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
1. 罗列出本节课将的常用属性

Opacity :设置内容的整体透明度

Display:block 将行内元素块级元素

Inline 块级元素行内元素

Float:left 设置浮动到左侧

Padding-left:15px 设置内间距为15px

CSS中的定位
1. position 的取值有几个，各自的特性是什么？

绝对定位: absolute 定位离开之后释放之前的位置基于外层父级标签来说

相对定位: relative 定位离开之后之前位置不释放基于之前的位置而言

固定定位: fixed 始终是基于浏览器的左上角定位适合做广告

默认定位 :static 初始化定位的操作

盒子模型
1. margin 的作用和可用的值请简述？

给容器设置外边距可以有四个参数参数以顺时针进行设置.

中间不能有逗号分隔只能是用空格

列如:

margin: 50px 40px 30px 20px;

padding 和 margin 的特点和特性是什么？

注意的点:

Margin是对容易外边距的设置在垂直位置外边距会进行重叠(10+20 =20 取最大的)

在水平位置外边距会进行合拼(10+20 =30 取和)

每个浏览器都会对页面设置留白可以修改HTML 和body的margin和padding 的值进行修改.