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

第65次(html和css)

第65次(html和css)

学习主题:html和css

学习目标:

1 掌握html5新增标签的使用

2 掌握css入门

对应视频:

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

对应作业

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

Html 1.0

Html 2.0

Html 3.0

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

HTML 5

  1. HTML5相比HTML4而言他的优点是什么?
  1. 去除了HTML4中不常用的标签
  2. HTML5新增了一些语义标签
  3. 功能强大
  1. HTML5中的增强表单标签
    1. 请问常用的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>

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

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

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

<audio controls="controls">

<source src="/H5/img/程佳佳 - 山楂树之恋.flac""></source>

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

</audio>

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

<video src="/H5/img/00a发刊词:为什么人人都要懂点犯罪心理学?.mp4" controls="controls">

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

</video>

  1. 视频标签是如何使用的?

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

<embed src="/H5/img/00a发刊词:为什么人人都要懂点犯罪心理学?.mp4" controls="controls" ></embed>

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

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

<details >

<!--设置下拉框的名称-->

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

<img src ="img/QQ.png" />

<p> 使用<qq></qq></p>

点击打开

</details>

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

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

Min: 最小值

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

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

Value: 设置标签的 当前值

<meter max="100" min="0" value="20" low="30" high="70"> </meter>

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

Html css是对html代码的修饰.

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

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

  1. 请问 CSS的几种引入方式的使用场合分别是什么?
  1. 内联样式 只能使用于当前网页
  2. 外联样式 相当于独立出来的css样式,可以用于多个HTML
  3. 行内样式 只能用于此标签行,会产生大量的代码.
  4. 导入样式(不推荐使用.)

<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

对应文档:

对应作业

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

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

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

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

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

  1. 常用选择器的优先级是什么?

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

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

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

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

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

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

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

Font-wight:bold 字体加粗

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

Text-decoration: none 去除下划线

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

Line -height :40 px

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

  1. 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 是设置不透明度.

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

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

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

Inline 块级元素行内元素

Float:left 设置 浮动到左侧

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

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

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

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

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

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

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

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

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

列如:

margin: 50px 40px 30px 20px;

  1. padding 和 margin 的特点和特性是什么?

注意的点:

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值