首页 > 代码库 > HTML+CSS基础课程笔记(MOOC)陆续添加中...

HTML+CSS基础课程笔记(MOOC)陆续添加中...

第1章 HTML 介绍

技术分享
 1 <!DOCTYPE HTML> 2 <html> 3     <head> 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5         <title>制作我的第一个网页</title> 6     </head> 7     <body> 8         <h1>hello world</h1> 9     </body>10 </html>
代码初体验,制作我的第一个网页
技术分享
1 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。2 3 2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。4 5 3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
HTML和css的关系
技术分享
1 网页中每一个内容在浏览器中的显示,都要存放到各种标签中。
认识HTML标签
技术分享
1 1. 标签由英文尖括号<>括起来,如<html>就是一个标签。2 3 2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。4 5 3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面6 7 4. HTML标签不区分大小写,<h1><H1>是一样的,但建议小写,因为大部分程序员都以小写为准。
标签的语法
技术分享
 1 一个HTML文件是有自己固定的结构的。 2  3 <html> 4     <head>...</head> 5     <body>...</body> 6 </html> 7 代码讲解: 8  9 1. <html></html>称为根标签,所有的网页标签都在<html></html>中。10 11 2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script><style><link><meta>等标签12 3. 在<body></body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
认识HTML文件基本结构
技术分享
 1 文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 2  3 下面这些标签可用在 head 部分: 4  5 <head> 6     <title>...</title> 7     <meta> 8     <link> 9     <style>...</style>10     <script>...</script>11 </head>
认识head标签
技术分享
1 <!--注释文字 -->
了解HTML的代码注释

第2章 认识标签(第一部分)

技术分享
1 什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。2 3 讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?4 5 1. 更容易被搜索引擎收录。6 7 2. 更容易让屏幕阅读器读出网页内容。
语义化,让你的网页更好的被搜索引擎理解
技术分享
1 在网页上要展示出来的页面内容一定要放在body标签中。
标签,网页上的显示内容放在这里
技术分享
1  注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中
添加段落
技术分享
1 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。2 语法:3 <hx>标题文本</hx> (x为1-6)
了解标签,为你的网页添加标题

加入强调语气,使用<strong>和<em>标签

技术分享
 1 <!--<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。--> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>了不起的盖茨比</title> 7 <style> 8 span{ 9   color:blue;  10 }11 </style>12 </head>13 <body>14     <p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>15     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>16 </body>17 </html>
使用标签为文字设置单独样式

 

<q>标签,短文本引用

<blockquote>标签,长文本引用

使用<br>标签分行显示文本

为你的网页中添加一些空格

认识<hr>标签,添加水平横线

<address>标签,为网页加入地址信息

想加入一行代码吗?使用<code>标签

使用<pre>标签为你的网页加入大段代码

第3章认识标签(第二部分)

  1. 使用ul,添加新闻信息列表
  2. 使用ol,添加图书销售排行榜
  3. 认识div在排版中的作用
  4. 给div命名,使逻辑更加清晰
  5. table标签,认识网页上的表格
  6. 用css样式,为表格加入边框
  7. caption标签,为表格添加标题和摘要

第4章 认识标签(第三部分)

  1. 使用<a>标签,连接到另一个页面
  2. 在新建浏览器窗口中打开连接
  3. 使用mailto在网页中连接Email地址
  4. 认识<img>标签 ,为网页插入图片

第5章 与浏览者交互,表单标签

  1. 使用表单标签,与用户交互
  2. 文本输入框、密码输入框
  3. 文本域,支持多行文本输入
  4. 使用单选框、复选框,让用户选择
  5. 使用下拉列表框,节省空间
  6. 使用下拉列表框进行多选
  7. 使用提交按钮,提交数据
  8. 使用重置按钮,重置表单信息
  9. form表单中的label标签

第6章 开始学习css,为网页添加样式

  1. 认识css样式
  2. css样式的优势
  3. css代码语法
  4. css注释代码

第7章 css样式基本知识

  1. 内嵌式css样式,直接写在现有的HTML标签中
  2. 嵌入式css样式,卸载当前文件中
  3. 外部式css样式,写在单独的文件中
  4. 三种方法的优先级

第8章 css选择器

  1. 什么是选择器
  2. 标签选择器
  3. 类选择器
  4. ID选择器
  5. 类和ID选择器的区别
  6. 子选择器
  7. 包含(后代)选择器
  8. 通用选择器
  9. 伪类选择器
  10. 分组选择器

第9章 css的继承、层叠和特殊性

  1. 继承
  2. 特殊性
  3. 层叠
  4. 重要性

第10章 css格式化排版

  1. 文字排版--字体
  2. 文字排版--字号、颜色
  3. 文字排版--粗体
  4. 文字排版--斜体
  5. 文字排版--下划线
  6. 文字排版--删除下
  7. 文字排版--缩进
  8. 文字排版--行间距(行高)
  9. 文字排版--中文字间距、字母间距
  10. 文字排版--对齐

第11章 css盒子模型

  1. 元素分类
  2. 元素分类--块级元素
  3. 元素分类--内联元素
  4. 元素 分类--内联块状元素
  5. 什么是盒子模型(02:14)
  6. 盒模型--边框(一)
  7. 盒模型--边框(二)
  8. 盒模型--宽度和高度
  9. 盒模型--填充
  10. 盒模型--边界

第12章 css布局模型

  1. css布局模型
  2. 流动模型(一)
  3. 流动模型(二)
  4. 浮动模型
  5. 什么是层模型
  6. 层模型--绝对定位
  7. 层模型--相对定位
  8. 层模型--固定定位
  9. Relative与Absolute组合使用

第13章 css代码缩写,占用更少的宽带

  1. 盒模型代码简写
  2. 颜色值缩写
  3. 字体缩写

第14章 单位和值

  1. 颜色值
  2. 长度值

第15章 css样式设置小技巧

  1. 水平居中设置-行内元素
  2. 水平居中设置-定宽块状元素
  3. 水平居中总结-不定宽块状元素方法(一)
  4. 水平居中总结-不定宽块状元素方法(二)
  5. 水平居中总结-不定宽块状元素方法(三)
  6. 垂直居中-父元素高度确定的单行文本
  7. 垂直居中-父元素高度确定的多行文本(方法一)
  8. 垂直居中-父元素高度确定的多行文本(方法二)
  9. 隐性改变display类型

HTML+CSS基础课程笔记(MOOC)陆续添加中...