HTML/CSS/JavaScript笔记
HTML/CSS/JavaScript个人学习笔记
- 前言
- 简介
- HTML
- 一些最常见的HTML标签汇总
- CSS
- 内联样式
- 内部样式表
学习用途所做的个人笔记，部分资料图片来自： 菜鸟教程.，如有侵权或标注遗漏请随时告知 ：）
简介HTML：超文本标记语言，是一种描述性语言。 CSS：层叠样式表，是一种用来表现HTML、XML等文件样式的语言，如字体、颜色、位置等等。 JavaScript：多用于前端网页开发的脚本编程语言，是一门解释型的，弱类型的语言。虽然名字里带个 Java，但实际上和Java本身没什么关系。
HTMLHTML主体结构如下 ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>题目</title> </head> <body> <h1>标题</h1> <p>段落。</p> </body> </html>此处用菜鸟教程中的一张图片来说明：
接下来看一行HTML代码：
<p>我的第一个段落</p>这一行代码就是一个HTML元素，由开始标签：<p>、元素内容：我的第一个段落、结束标签：我的</p> 组成。
再看这一行代码：
<a href="www.baidu"> 这是一个链接 </a>标签<a>定义超链接或锚点，属性href用于指定超链接目标的 URL。 这里涉及到了一个新的概念，即HTML属性。属性用于设置HTML元素的各种附加信，一般描述于开始标签的内部。 下面列出了适用于大多数HTML元素的属性：
| class | 为html元素定义一个或多个类名，方便按类别定义样式 |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信 (作为工具条使用) |
| a | 超链接或锚 |
| b | 粗体 |
| br | 换行 |
| center | 居中（文本） |
| h1~h6 | 标题（一到六级） |
| hr | 水平尺 |
| href | 超文本引用（贴链接） |
| i | 斜体（文本） |
| src | 源文件链接 |
| strong | 加重（文本） |
| sub | 下标（文本） |
| sup | 上标（文本） |
| code | 源代码（文本） |
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 | 规定当内容溢出元素框时发生的事情 |
在头部通过<style>标签进行全局样式表的定义。可以通过标签、ID、类名等来选择指定的元素。 例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</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>结果如下：
不定期更新~