HTML/CSS/JavaScript个人学习笔记
- 前言
- 简介
- HTML
- 一些最常见的HTML标签汇总
- CSS
- 内联样式
- 内部样式表
前言
学习用途所做的个人笔记,部分资料图片来自: 菜鸟教程.,如有侵权或标注遗漏请随时告知 :)
简介
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"> 这是一个链接 </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属性为选择器时,前缀加上
.
,或是以标签名.属性名
的方式选择;
不定期更新~
更多推荐
HTML/CSS/JavaScript笔记
发布评论