【Web前端系列课程（一）】HTML+CSS

老夏 · 发表于 2019-12-19 21:13:42

第一章 HTML简介
1.1 HTML简介
第二章网页的基本组成部分
2.1 网页的基本组成部分
第三章 HTML字符实体
3.1 HTML字符实体
第四章 HTML颜色
4.1 HTML颜色
第五章 HTML标签
5.1 html和body标签
5.2 行内标签和块标签
5.3 格式标签
5.4 文本标签
5.5 图片标签
5.6 超链接标签
5.7 表格标签
5.8 表单标签
5.9 内嵌框架标签
5.10 框架标签
5.11 HTML5语义标签
5.12 音频标签
5.13 视频标签
5.14 embed标签
第六章 CSS简介
6.1 CSS简介
第七章 CSS基本语法
7.1 CSS基本语法
第八章 CSS选择器
8.1 元素选择器
8.2 类选择器
8.3 id选择器
8.4 分组选择器
8.5 派生选择器
8.6 伪类选择器
8.7 伪元素选择器
8.8 属性选择器
8.9 CSS优先级
第九章 CSS样式
9.1 字体
9.2 文本
9.3 背景
9.4 表格
9.5 尺寸
9.6 文本框
9.7 列表
9.8 轮廓
9.9 鼠标
9.10 display和visibility
9.11 overflow
第十章 CSS框模型
10.1 CSS框模型概述
10.2 内边距
10.3 边框
10.4 外边距
10.5 外边距合并
第十一章 CSS定位
11.1 CSS定位概述
11.2 相对定位和绝对定位
11.3 浮动
第十二章 CSS3样式
12.1 CSS3边框
12.2 CSS3背景
12.3 CSS3文本效果
12.4 CSS3字体
12.5 CSS3转换
12.6 CSS3过渡
12.7 CSS3动画

老夏 · 发表于 2020-4-14 21:14:26

第一章 HTML简介
1.1 HTML简介

      HTML（HyperText Markup Language，超文本标记语言），是一种用于创建网页的标准标记语言。
      我们可以使用HTML来建立自己的WEB站点，HTML运行在浏览器上，由浏览器来解析，并以网页的形式显示出它们。所以，我们可以将HTML文档称为网页，HTML文档的后缀名为.html或.htm，我们推荐使用.html。
      但是，HTML并不是一种编程语言，而是一种标记语言，标记语言是由一套标记标签组成。
      HTML标记标签通常被称为HTML标签，是由尖括号包围的关键词组成，比如<html>；HTML标签通常是成对出现的，比如<p>和</p>；HTML标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

老夏 · 发表于 2020-4-14 21:17:36

第二章网页的基本组成部分
2.1 网页的基本组成部分

下面我们通过一段HTML文档，来简单了解一下网页的基本组成：

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
<img src="wecoding.jpg">
<p><b><i><u>全民编程</u></i></b></p>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 09:53:18

第三章 HTML字符实体
3.1 HTML字符实体

在HTML中，某些字符是预留的, 如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体。

字符实体	实体
<	<
>	>
	空格
&	&
«	<<
»	>>
×	x

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 09:58:29

第四章 HTML颜色
4.1 HTML颜色

在HTML中，我们可以通过使用英文单词（不建议使用）、十六进制和十进制来表示所需要的颜色。

类别	代码
十六进制颜色	#FF0000
十六进制颜色（简写）	#F00
十进制颜色	rgb(0,255,0)
十进制透明颜色	rgba(0,0,255,0.5)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<font color="#FF0000">老夏学院</font>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 10:03:43

第五章 HTML标签
5.1 html和body标签

我们了解一下html和body标签的区别：
（1）html代表整个文档屏幕。
（2）body代表文档中真正的数据区域。
（3）当html没有设置背景色，此时body的背景色是文档整个屏幕。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
background:#F00;
}
body{
background:#F0F;
}
</style>
</head>
<body>
老夏学院
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 10:04:58

第五章 HTML标签
5.2 行内标签和块标签

标签	作用	类别
div	无意义块标签	双标签，块标签
span	无意义行内标签	双标签，行内标签

      根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，比如div元素，它的默认display属性值为"block"，使得该元素成为了块标签；而span元素的默认display属性值为"inline"，则使该元素成为了行内标签。
      而像"div"这样的块标签，会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整这个矩形的样子；相反，像"span"这样的行内标签，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内标签设置高度、宽度、内外边距（除左右）等属性，都是无效的。
      块标签和行内标签的主要区别如下：
（1）块标签会独占一行，其宽度自动填满其父元素宽度，行内标签不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。
（2）一般情况下，块标签可以设置width和height属性，但是，即使块标签设置了宽度，仍然是独占一行，而行内标签设置width和height属性是无效的。
（3）块标签可以设置margin和padding属性，并且会产生边距效果，而行内标签只有水平方向的padding-left，padding-right，margin-left，margin-right属性会产生边距效果，而竖直方向的padding-top，padding-bottom，margin-top，margin-bottom属性不会产生边距效果。

老夏 · 发表于 2020-4-15 10:27:03

第五章 HTML标签
5.3 格式标签

标签	作用	类别
<br>	换行	单标签
<nobr>	不换行	双标签
<center>	居中	双标签
<pre>	按源格式输出	双标签
<ul>	无序列表	双标签，块标签
<ol>	有序列表	双标签，块标签
<li>	列表项	双标签，块标签
<dl>	自定义列表	双标签，块标签
<dt>	自定义标题	双标签，块标签
<dd>	自定义列表内容	双标签，块标签
<hr>	导航线	单标签

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
</dl>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 10:37:16

第五章 HTML标签
5.4 文本标签

标签	作用	类别
<h1>-<h6>	加粗字体	双标签，块标签
<p>	段落	双标签，块标签
<b>	加粗	双标签
<i>	斜体	双标签
<u>	下划线	双标签
<font>	文字（属性size和color）	双标签

注意，font标签已经被淘汰，实际应用过程中，使用CSS进行代替。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>老夏学院</h1>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 10:46:53

第五章 HTML标签
5.5 图片标签

标签	属性	描述
img	src	图像的URL地址
	width	图像宽度
	height	图像高度
	alt	如果无法显示图像，浏览器将显示替代文本
	title	图像简介

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="wecoding.jpg" width="100px" alt="老夏学院" title="老夏学院">
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

【Web前端系列课程（一）】HTML+CSS

浏览过的版块

院长

资深讲师