前言
学习用途所做的个人笔记，部分资料图片来自： 菜鸟教程.，如有侵权或标注遗漏请随时告知 ：）
简介
HTML：超文本标记语言，是一种描述性语言。
CSS：层叠样式表，是一种用来表现HTML、XML等文件样式的语言，如字体、颜色、位置等等。
JavaScript：多用于前端网页开发的脚本编程语言，是一门解释型的，弱类型的语言。虽然名字里带个 Java，但实际上和Java本身没什么关系。
HTML
HTML主体结构如下 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>题目</title>
</head>
<body>
<h1>标题</h1>
<p>段落。</p>
</body>
</html>
此处用菜鸟教程中的一张图片来说明：
- <meta>元素可提供有关页面的元信息,要写在头元素内。
charset="utf-8"定义网页编码格式为 utf-8，否则可能会有中文乱码的现象； - <h> 元素定义一个大标题,<p>元素定义一个段落
- 定义<h1>、<h2>，可以指定一级、二级标题。
- 常用单位如下：
px --像素（pixel）
em–相对长度单位
pt --点（point）
接下来看一行HTML代码：
<p>我的第一个段落</p>
这一行代码就是一个HTML元素，由开始标签：<p>、元素内容：我的第一个段落、结束标签：我的</p> 组成。
再看这一行代码：
<a href="http://www.baidu.com"> 这是一个链接 </a>
标签<a>定义超链接或锚点，属性href用于指定超链接目标的 URL。
这里涉及到了一个新的概念，即HTML属性。属性用于设置HTML元素的各种附加信息，一般描述于开始标签的内部。
下面列出了适用于大多数HTML元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名，方便按类别定义样式 |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
一些最常见的HTML标签汇总
| 标签 | 描述 |
|---|---|
| a | 超链接或锚 |
| b | 粗体 |
| br | 换行 |
| center | 居中（文本） |
| h1~h6 | 标题（一到六级） |
| hr | 水平尺 |
| href | 超文本引用（贴链接） |
| i | 斜体（文本） |
| src | 源文件链接 |
| strong | 加重（文本） |
| sub | 下标（文本） |
| sup | 上标（文本） |
| code | 源代码（文本） |
CSS
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS 可以通过以下三种方式添加到HTML中:
内联样式：在HTML元素中使用"style" 属性
内部样式表：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 ：使用外部 CSS 文件
当样式定义重复时，优先级为：内联样式 > 内部样式 >外部样式> 浏览器默认样式
我们主要讨论前两种方式，也即直接在HTML文件中进行CSS样式的编程。
内联样式
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
用style属性来描述元素p中的各种样式，以下列举一些常用的样式属性：
| 属性 | 描述 |
|---|---|
| border | 设置对象的边框属性（复合属性） |
| border-right-color | 设置或检索对象的右边边框颜色 |
| background | 设置对象的背景特性（复合属性） |
| outline | 设置或检索对象外的线条轮廓（复合属性） |
| padding | 设置对象的内边距属性（复合属性） |
| margin | 设置对象的外边距属性（复合属性） |
| width | 设置宽度 |
| height | 设置高度 |
| color | 设置文本的颜色 |
| text-align | 设置文本的对齐方式 |
| line-height | 设置行高 |
| font | 字体属性（复合属性） |
| z-index | 设置元素的堆叠顺序 |
| overflow | 规定当内容溢出元素框时发生的事情 |
内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
在头部通过<style>标签进行全局样式表的定义。可以通过标签、ID、类名等来选择指定的元素。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.red
{
color:red;
}
h3.green
{
color:green;
}
p
{
color:blue;
}
#hello4
{
color:yellow;
}
</style>
</head>
<body>
<h1 id="hello1" class="red">红色一级标题</h1>
<h2 id="hello2" class="red">红色二级标题</h1>
<h3 id="hello3" class="green">绿色三级标题</h1>
<h4 id="hello4" class="green">黄色四级标题</h1>
<p id="hello5" class="none">蓝色段落。</p>
</body>
</html>
结果如下：
- 以id为选择器时，前缀加上
#； - 以class属性为选择器时，前缀加上
.，或是以标签名.属性名的方式选择；
不定期更新~
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
