中国林业大学-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 | <html> |
html5标准文件基本结构
1 | //文档类型:符合html5标准 |
编码方式:
ASCII
GB2312 简体中文
Unicode 万国码
UTF-8
2-3 HTML标签
1 | <p>段落</p> |
属性
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 | <html> |
HTML 样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
1 | <html> |
HTML 样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式:
1 | <html> |
文本格式化
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。
文本格式化标签
标签 | 描述 |
---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
定义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
“计算机输出”标签
标签 | 描述 |
---|---|
<code> |
定义计算机代码。 |
<kbd> |
定义键盘码。 |
<samp> |
定义计算机代码样本。 |
<tt> |
定义打字机代码。 |
<var> |
定义变量。 |
<pre> |
定义预格式文本。 |
HTML 引文、引用和定义元素
标签 | 描述 |
---|---|
定义缩写或首字母缩略语。 | |
定义文档作者或拥有者的联系信息。 | |
定义文本方向。 | |
定义从其他来源引用的节。 | |
定义项目或缩略词的定义。 | |
定义短的行内引用。 | |
定义著作的标题。 |
颜色,颜色使用十六进制RGB #66CCFF
HTML css样式表
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
1 | <head> |
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过