0%

Html5+CSS前端开发学习

中国林业大学-web前端开发mooc笔记

1-2 网站与网页

网站(Website)是指网页(Webpage)的合集

主页一般称为index

关键的网页元素:

logo站标

导航栏

超文本链接

banner横幅(一般作为广告

表单(填写的内容,例如登录账号

网站->文件夹(网页->文件)-(放置于)->服务器端

浏览器:解析网页源代码,渲染网页

1-3web前端开发的技术构成和技术标准

结构:HTML//从语义角度,描述页面结构

样式:CSS//从审美角度,美化页面

行为:JavaScript//从交互的角度,提升用户体验

w3c组织负责技术标准制定

官方网站www.w3.org

官方学习网站www.w3school.com.cn

2.HTML

2.1HTML概述

HTML是超文本标记语言

以标签作为基本单位,不区分大小写

开始标签结束标签成对出现<a></a>

单独出现的标签尾部自带一个\例如<aaa\>

标签、属性:

<img src="" alt=""\>

标签 属性 属性 其间以空格隔开,一个标签可以带有多个属性

2.2HTML文件结构

html文件的基本结构

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title></title>//标题
//头部内容
</head>

<body>
//主体内容
</body>
</html>

html5标准文件基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>//文档类型:符合html5标准
<html lang="en">//搜索引擎属性 en zh
<head>
<meta charset="UTF-8">//元数据 指出字符集编码方式
<title></title>//标题
//头部内容
</head>

<body>
//主体内容
//实际展示的内容
</body>
</html>

编码方式:

ASCII

GB2312 简体中文

Unicode 万国码

UTF-8

2-3 HTML标签

1
2
3
4
5
6
7
8
9
10
11
<p>段落</p>
<br />换行
<a href="url:/">链接</a>
<h1>一级标题</h1>
<h6>六级标题</h6>
<hr />创建水平线
<!-- 注释 -->
<!--
多行
注释
-->

属性

HTML 提示:使用小写属性

属性和属性值对大小写不敏感

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

1
name='Bill "HelloWorld" Gates'

下面列出了适用于大多数 HTML 元素的属性:

属性 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)

不建议使用(已经被样式替代)的标签/属性:

标签 描述
定义居中的内容。
定义 HTML 字体。
定义删除线文本
定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色

Style属性实例

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色:

1
2
3
4
5
6
7
8
<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

1
2
3
4
5
6
7
8
<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式:

1
2
3
4
5
6
7
8
<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

文本格式化

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。

我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

HTML 引文、引用和定义元素

标签 描述
定义缩写或首字母缩略语。
定义文档作者或拥有者的联系信息。
定义文本方向。
定义从其他来源引用的节。
定义项目或缩略词的定义。
定义短的行内引用。
定义著作的标题。

颜色,颜色使用十六进制RGB #66CCFF

HTML css样式表

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过