一文入门HTML+CSS+JS（样例后续更新）

• 前言
• HTML，CSS和JS的关系
• HTML
• • head元素
  • • title
    • link
    • meta
  • body元素
  • • 设置网页正文颜色与背景颜色
    • 添加网页背景图片
    • 设置网页链接文字颜色
    • 设置网页边框
  • 文字与段落标记
  • • • 普通文字的输入
    • 对文字字体的设置 font
    • 使用文字的修饰标记设置文字格式
    • 标题字设置 h1
    • 段落标记 p
    • 换行标记 br
    • 预格式化标记 pre
    • 剧中标记 conter
    • 水平线标记 hr
    • 设置滚动字幕
  • 列表标记
  • • 有序列表
    • • 有序列表的前导符设置
    • 无序列表
  • 图片标记
  • 框架结构
  • • 左右分割窗口
    • 上下分割窗口
    • 嵌入浮动框架标记
  • 超链接
  • • 创建超链接
    • 书签链接
    • 文件下载
  • 在网页中使用表格
  • • 表格标记
    • tr标记
  • td和th标记
  • 在网页中创建表单
  • • 表单标记包括
    • 文本域标记
• CSS
• • 基础语法
  • 选择器
  • CSS常用属性
  • • 常用字体属性
    • 常用文本属性
    • 常用列表属性
    • 常用颜色&背景属性
  • HTML中引入CSS方式
  • • 内联方式
    • 嵌入方式
    • 连接方式
• CSS&DIV布局
• • 盒子模型
  • 盒子border属性
  • 盒子padding属性
  • 盒子margin属性
  • 盒子的浮动
  • 盒子的定位
  • Div标记与Span标记
• JS基础
• • 变量
  • 常量
  • 数据类型
  • Html中引入JS脚本方式
  • 事件驱动&事件处理
  • 脚本函数
  • JavaScript常用对象
  • • string对象
    • Math对象:
    • Date对象：
  • Document 对象方法
  • • window对象
    • 延时函数

前言

23年2月27号刚刚入学奥克兰大学PGD of CS Semester One，选了CS732这门课，本来以为用Django水水就能过去的课程，老师却开始教React，React作为最新的前端框架，在国内的使用率本身就不高，再加上自己之前前端完全没有受过系统的训练，之前写的全栈项目基本都是复制粘贴现成的CSS和JS模板，然后用Bootstrap现成的网页模板做的。但是这门课期中有一个20%总成绩的测试，所以还是需要好好学一学前端的一些基础。

此文不用于任何商业用途，完全是个人学习过程以及资料的汇总，侵必删。

HTML，CSS和JS的关系

HTML、CSS、JS（JavaScript）共同构建了我们看到的所有网页展示和交互。

• HTML（HyperText Markup Language）是超文本标记语言。
• CSS（Cascading Style Sheets）是级联样式表。
• JavaScript 是一种脚本语言，主要用于前端页面的 DOM 处理。

文本的意思，大家应该都明白，随手在桌面上建立一个 .txt 文件，就是一个文本文件。

那什么是 HTML 超文本标记语言呢？超文本就是超越文本的意思，表示它不仅仅是简单的文本，它比普通的 .txt 文件还要高级。那到底高级在哪里呢？第二个词 Markup （标记），就是对一个普通的 .txt 文件里的文字进行标记，标记其中的一段为 title，标记另一段应该另起一行，标记任意一段为某个意思等。

最后，这些记号超越了普通文本的标记，它们对普通文本的修饰，构成了一套规则，这套规则就是 HTML。

以盖房子类比，必须定义这个房子有多长、多宽，每一块面积如何规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室。将这些定义好，网页也就有了最基本的样子。总之，HTML 就是用来布局网页中的每一个元素的。

CSS 中的“样式”就是指外观。还以盖房为例，定义好了各个空间，房子也盖起来了，但还要装修，例如给客厅贴壁纸、给卧室铺地板。CSS 就是起装修作用的，要和 HTML —起配合使用。

JavaScript 是一种脚本语言，它在网页中的作用是控制 HTML 中的每一个元素，有时要删除元素，有时要添加新元素。

大家可能遇到过这样的场景：单击网页上的一个按钮，会有一个网页上从没有过的元素显示出来，这就是利用 JavaScript 实现的。

房子已经装修好，贴上了墙纸，铺上了地板，桌子、板凳、沙发都已经摆好，一切都很完美。可是，一个有生活情趣的住户时常要买些新家具，或者把茶几换个位置，这时，移动、添加、减少物件就只能靠 JavaScript 实现。

当前互联网上的任何一个网页都是由它们三个构建起来的，虽然简单，但不可不知。

HTML

head元素

head元素是所有头部元素的容器，指示浏览器再何处可以找到样式表，提供元素信息等

以下标签都可以添加到head部分：

表格上，我们可以先掌握,

title

title元素可定义浏览器窗口的标题，比如我现在用CSDN写文章的窗口标题

link

link元素可以设置网页的logo，比如CSDN的logo的引用

通常情况下，代码如下

meta

指定网页的描述，关键词，文件的最后修改时间，作者以及其他元数据。
元数据不会显示在客户端，但是会被浏览器解析。

指定时间自动刷新（这里设置的是2秒）

指定时间跳转道指定页面：

下面这两个一个在JS会讲，一个在CSS会讲，后面再学习，现在可以先跳过

脚本函数

function 函数名(参数1, 参数2, ... , 参数3) {
// 需要执⾏的代码块
}

案例: 把填写进的表单的数据打印出来

Document
 

JavaScript常用对象

string对象

charAt()：返回在指定位置的字符。
charCodeAt()：返回在指定的位置的字符的 Unicode 编码。
concat()：连接字符串。
fromCharCode()：从字符编码创建⼀个字符串。
String indexOf()：检索字符串，返回字符串出现的位置，如果没有找到，返回-1。
lastIndexOf()：从后向前搜索字符串，返回字符串出现的位置，如果没有找到，返回-1 。
split()：把字符串分割为字符串数组。
substr()：从起始索引号提取字符串中指定数⽬的字符。
substring()：提取字符串中两个指定的索引号之间的字符。
toLowerCase()：把字符串转换为⼩写。
toUpperCase()：把字符串转换为⼤写。

Math对象:

Date对象：

Document 对象方法

window对象

1. window.open(url,name);
打开新窗⼝
注：window.open(url,name);
name取值:
_blank - URL加载到⼀个新的窗⼝。这是默认
_self - URL替换当前⻚⾯

window.open("https://www.runoob.com","_blank");

2. window.close();
关闭当前窗⼝

alert(); //提示框
confirm(“请输⼊”); //带确认,取消按钮的提示框
prompt(“请输⼊”,“2”); //带输⼊⽂本的提示框

还有延时函数

延时函数

function test() {
alert("test");
}
var time1=setTimeout(test, 1000);
var time2=setInterval(test,1000);

清除定时器：

window.clearInterval(time2)
window.clearTimeout(time1)