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

妙味课堂第一课并未一味地先讲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>

运行效果图：

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

常见样式 一 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>

例，父子级包含的时候子级的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>

内边距替代外边距后：

<!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>

发现盒子的大小发生变化，要想一样，必须高度-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>

关于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>

<!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>

<!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>

常见样式 —文本设置

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)

转载于:https://www.cnblogs.com/yerenyuan/p/5347364.html

妙味课堂——HTML+CSS(第一课)相关推荐

  1. 妙味课堂——HTML+CSS基础笔记

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

  2. 妙味课堂html css,CSS3详解（妙味课堂）

    2017-09-01 1. 属性选择器 属性选择器的链接: E[attr]: div[title]{background:blue;}: E[attr="value"]:div[t ...

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

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

  4. 妙味课堂cctv移动端项目

    2019独角兽企业重金招聘Python工程师标准>>> 项目介绍 妙味课堂仿cctv项目 移动端准备工作 viewport 这里根据psd,宽度为640,所以使用了下面的meta & ...

  5. 妙味课堂 - 前端初窥 -

    Ps技术 - 切图 测量 测量:F8.信息面板 切图(抠图) command + c 复制 command + n 新建同等大小纸张 command + d 粘贴 command + s 保存 css ...

  6. 李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频

    使用JavaScript编写一个Base.js基础库,然后通过这个基础库+自行开发的插件,最终完成一个精简型博客主题的前端功能. 这是一个问答系统精简版,高仿了一些知乎网站的部分功能.通过这个小型项目 ...

  7. Javascript简单选项卡_妙味课堂

    上周末为止看完了html+css的视频教程,这周开始Javascript,看的妙味课堂的教程,多做练习,同时强化html和css. 思路: 选项卡,简单来说有两部分组成,上面的按钮和下面相应要显示的块 ...

  8. 倒计时 妙味课堂_jQuery实现倒计时（倒计时年月日可自己输入）

    $(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = " ...

  9. 妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享

    <妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...

最新文章

  1. android 中改变按钮按下时的颜色
  2. 用InstallShield 打包工具 打 Win32 程序 (depends.exe 用看程序都依赖了哪些dll)
  3. proc除了能用于oracle开发_能不能用于mysql开发_Oracle数据库开发(二).Linux下配置使用ProC...
  4. 解決memcache 有時無法連接的問題
  5. Django 的cookie 与 session组件
  6. viper4android 生效,另一种让V4a音效在Poweramp上生效的方法
  7. oracle表压缩比,oracle的compress 特性介绍
  8. mysql5.6.28安装_mysql5.6.28源码安装
  9. requests获取响应时间(elapsed)与超时（timeout）
  10. AR研究-Demo集
  11. 微软高层人士变动！张祺晋升为微软公司全球资深副总裁
  12. CentOS Linux服务器实现攻防演练
  13. 批标准化（batch normalization）与层标准化（layer normalization）比较
  14. Proteus总线连接心得
  15. Linux和Windows中下载FFmpeg
  16. Android 360度全景图片 源码
  17. 《Hud 2589》Phalanx详解
  18. EETI eGTouch Linux 驱动的安装与使用
  19. 马士兵mysql_MYSQL相关总结(马士兵教育)
  20. Failed to build custom metric java.lang.NumberFormatException: For input string: “∞“

热门文章

  1. Deno 并不是下一代 Node.js
  2. 基于容器的全链路运维平台实践
  3. 搜索专题： HDU1428漫步校园
  4. Java基础小常识-继承-（10）
  5. 将构件发布到私有的nexus maven 仓库
  6. CSDN-Code平台使用过程中的5点经验教训
  7. Java x和y之间的全部素数
  8. C++ 使用dynamic_cast执行基类向派生类的转换
  9. Linux系统抓包回放,Linux下24小时持续网络抓包（TCPDUMP）
  10. HashMap源码分析1：添加元素