妙味课堂——HTML+CSS(第一课)

时间：2022-07-02 12:47:29

一句话，还记忆不如烂笔头，何况还这么笨，记下笔记，也是记录这一路学习的过程。

妙味课堂第一课并未一味地先讲HTML，而是穿插着CSS讲解，这一点不同于一些其他视频，这一点挺特别的！所以这一课涉及到HTML的知识，也并未多讲，倒是CSS中的内容讲的比较多。记录如下：

  • HTML(Hypertext Markup Language)——超文本标记语言（结构）
  • css(Cascading Style Sheets)——层叠样式表（样式）
  • js(javascript)―― 行为

为了更快地初步了解这三种语言，给出我的第一个页面：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题 - title</title>

</head>

<body>

    内容 - content

    <div onclick="this.style.width = '800px'; this.style.height = '400px';" style="width: 100px; height: 100px; transition: 1s; border: 8px solid red; background: url(http://www.52ij.com/uploads/allimg/160317/003T95164-3.jpg);">aaaa</div>

</body>

</html>

效果(用文字表示)：点击图片，过渡1s，图片循循展开。(由于是一个动态效果图，所以小白不知道该怎么表示出)

下面初略说明(涉及到CSS和JavaScript的部分后面会说明，在此不赘述)：

<div>——标签

<div></div>——标签对

单标签：直接在后面斜杠结束的标签叫做单标签。

<!DOCTYPE HTML> !: 声明 注意   doc document 文档  type  类型 即声明文档类型为HTML
<meta charset="utf-8"/> 代码编码格式，通俗点说就是告诉浏览器我是按照什么编码的

样式表出现的位置

1、行间样式，如

<div style="……"></div>

例，特别说明HTML文件的注释是<!--  -->

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div style="width: 400px; height: 200px; background: blue;">块</div>

    一个块，宽度是300像素高度200像素背景是红色；

    <div style="width: 300px; height: 200px; background: red;"></div>

    行间样式

    <!-- html注释 -->

</body>

</html>

　2、内部样式，如

<style>…………</style>

　例，特别说明CSS中的注释是/*   */

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 400px;

            height: 200px;

            background: blue;

        }

        /*内部样式表*/

        /*css注释*/

    </style>

</head>

<body>

    <div id="box">块</div>

</body>

</html>

3、外部样式，如

<link rel="stylesheet" type="text/css" href="style.css">

例，

样式位置-外部1.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="./style.css">

</head>

<body>

    <div id="box">块</div>

    数码

</body>

</html>

样式位置-外部2.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="./style.css">

</head>

<body>

    <div id="box">块</div>

    汽车

</body>

</html>

style.css：

#box {

    width: 400px;

    height: 200px;

    background: blue;

}

下面详解一些常见样式

属性 属性值
width 宽度
height 高度

常见样式 一 background

background 背景
background-attachment fixed(背景是否滚动)
background-color red.....(背景颜色)
background-image url(icon.gif)(背景图片)
background-position center (top)0px(左右居中，上下居顶)/10px(X轴) 50px(Y轴) (背景图位置)
background-repeat no-repeat(背景图不重复)/repeat(背景图重复，铺满整个盒子)/repeat-x(背景图片横向重复)/repeat-y(背景图纵向重复)

background其实是一个复合属性，一个属性多个属性值。我们不必一个个写出以上这些属性，可以一次就写出包含多个属性的代码，如又能这样写(顺序无关紧要)：

background: url(bg.jpg) center top no-repeat gray fixed;　

例，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 500px;

            height: 200px;

            background: blue url(icon.gif) no-repeat center center;

        }

        #bg {

            height: 1500px;

            background: url(bg.jpg) center top no-repeat gray fixed;

        }

    </style>

</head>

<body id="bg">

    <div id="box"></div>

</body>

</html>

我们会发现向下滑的过程中，背景图片bg.jpg是固定不懂的，就是因为使用了background-attachment=fixed的缘故。

常见样式 一 border

border 边框
border-width 1px(边框宽度)
border-color red...(边框颜色)
border-style solid(实线)/dashed(虚线)/dotted(点线)（注意IE6不兼容）

border也是一个复合属性，我们同样可以如下写：

border: 1px dotted green;

让我们看看一个盒子(盒子模型)的边框构成：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 100px;

            height: 100px;

            border-top: 100px solid red;

            border-right: 100px solid green;

            border-bottom: 100px solid blue;

            border-left: 100px solid yellow;

        }

    </style>

</head>

<body>

    <div id="box"></div>

</body>

</html>

运行效果图：

妙味课堂——HTML+CSS(第一课)

如果盒子中的高度和宽度都设置为0，那么可以看到如下图所示的效果，似乎我们可以做出七巧板的东西。

妙味课堂——HTML+CSS(第一课)

常见样式 一 padding

内边距相当于给一个盒子加了填充厚度会影响盒子大小。

注意：盒子的width和height并不是整个盒子的大小，可以认为是盒子里面能放东西的部分(即容积)。

关于内边距与外边距，我已经在另一篇文章中HTML CSS——margin与padding的初学记录过，在此不赘述，只给出一个例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 340px;

            height: 240px;/*宽和高不是整个盒子的大小，可以认为是盒子里面能放东西的部分(即容积)*/

            border: 1px solid black;

            /*

            padding-top: 30px;

            padding-right: 30px;

            padding-bottom: 30px;

            padding-left: 30px;

            */

            padding: 30px;

        }

    </style>

</head>

<body>

    <div id="box">块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距块内边距</div>

</body>

</html>

常见样式 一margin

外边距的问题：

  1. 上下外边距会叠压；
  2. 父子级包含的时候子级的margin-top会传递给父级（内边距替代外边距）。

例，上下外边距会叠压：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

            margin-bottom: 30px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-top: 30px;

        }

    </style>

</head>

<body>

    <div id="box1"></div>

    <div id="box2"></div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

例，父子级包含的时候子级的margin-top会传递给父级（内边距替代外边距）

需求：id为box2的<div>距离id为box2的<div>

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-top: 100px;

        }

    </style>

</head>

<body>

    <div id="box1">

        <div id="box2"></div>

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

内边距替代外边距后：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 300px;

            background: blue;

            padding-top: 100px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="box1">

        <div id="box2"></div>

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

发现盒子的大小发生变化，要想一样，必须高度-100px

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box1 {

            width: 500px;

            height: 200px;

            background: blue;

            padding-top: 100px;

        }

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

        }

    </style>

</head>

<body>

    <div id="box1">

        <div id="box2"></div>

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

关于auto在margin中的应用：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-left: auto;/*计算右边的距离，统统都塞给左边*/

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin-right: auto;

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box2 {

            width: 300px;

            height: 100px;

            background: yellow;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div id="box2">

    </div>

</body>

</html>

妙味课堂——HTML+CSS(第一课)

常见样式 —文本设置

font-size 12px/14px/16px文字大小（一般均为偶数）
font-family  字体（中文默认宋体）
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高
text-align center/right/left(文本对齐方式)
text-indent  首行缩进(em缩进字符)
font-weight 文字着重
font-style 文字倾斜
text-decoration 文字修饰
letter-spacing  字母间距(可为负值，-10px)
word-spacing  单词间距(以空格为解析单位)

例，

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #box {

            width: 500px;

            height: 300px;

            border: 1px solid black;

            margin: 90px auto;

            font-size: 16px;

            font-family: 宋体;

            /*color: #a51a3b;*/

            color: rgb(165,26,59);

            line-height: 30px;

            text-align: left;

            text-indent: 2em;/*首行缩进两个字*/

            font-weight: normal;

            font-style: normal;

            text-decoration: none;

            /*letter-spacing: -10px;*/

            word-spacing: 30px;

        }

    </style>

</head>

<body>

    <div id="box">块文本设置块 go ogle 文本设 su n 置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置块文本设置块文本设置文本设置</div>

</body>

</html>  

下面图示行高(line-height)

妙味课堂——HTML+CSS(第一课)

妙味课堂——HTML+CSS(第一课)的更多相关文章

  1. 妙味课堂——HTML&plus;CSS&lpar;第二课&rpar;

    常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...

  2. 妙味课堂——HTML&plus;CSS&lpar;第四课&rpar;&lpar;二&rpar;

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  3. 妙味课堂——HTML&plus;CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  4. 妙味课堂——HTML&plus;CSS&lpar;第四课&rpar;&lpar;一&rpar;

    这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...

  5. 妙味课堂——HTML&plus;CSS&lpar;第三课&rpar;

    常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...

  6. 妙味课堂&colon;JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  7. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  8. 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  9. 妙味课堂&colon;JavaScript初级--第12课：json与数组

    1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. IOS-在ARC项目中使用非ARC框架或者类库

    1.在ARC项目中使用非ARC框架或者类库 IOS 4引入了Automatic Reference Count(ARC),编译器可以在编译时对obj-c对象进行内存管理. 之前,obj-c的内存管理方 ...

  2. Razor引擎中的&lowbar;ViewStart&period;cshtml

    Startup Code是在所有View执行之前加载和执行的代码. 在Razor引擎中的_ViewStart.cshtml 就是装载这些“预执行代码”的文件,它有两个特点: 一.就是所有View执行之 ...

  3. screen 命令

    # screen [-AmRvx -ls -wipe][-d <作业名称>][-h <行数>][-r <作业名称>][-s ][-S <作业名称>] 参 ...

  4. flex-mp3

    Mp3Player.as package ddw.adobe { import flash.events.Event; import flash.events.IOErrorEvent; import ...

  5. &lpar;Java 多线程系列&rpar;java volatile详解

    在前面的文章里面介绍了synchronized关键字的用法,这篇主要介绍volatile关键字的用法. Java语言提供了一种稍弱的同步机制,即volatile变量,用来确保将变量的更新操作通知到其它 ...

  6. 201521123033《Java程序设计》第1周学习总结

    1. 本周学习总结 (1)了解了JVM,JRE,JDK (2)配置java环境变量 (3)编译一些简单的java代码 2. 书面作业 为什么java程序可以跨平台运行?执行java程序的步骤是什么?( ...

  7. 如何开发jQuery插件

    一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...

  8. Java注解Retention、Documented、Target的含义

    Retention注解 Retention(保留)注解说明,这种类型的注解会被保留到那个阶段. 有三个值: 1.RetentionPolicy.SOURCE -- 这种类型的Annotations只在 ...

  9. Sql Server 2012 集群配置

    基于Windows Server 2008 R2的WSFC实现SQL Server 2012高可用性组(AlwaysOn Group) 2012年5月 微软新一代数据库产品SQL Server 201 ...

  10. scala-LinkedList

    LinkedList每隔元素乘以3: import scala.collection.mutable.LinkedList var list1=LinkedList.apply(1,2,3,4,5) ...

相关文章