前端基础之 HTML CSS JavaScript
AI-摘要
Furry GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
前端基础知识
1. HTML 与 CSS
1.1 基础文本样式
基本的HTML结构：
<html>
<body>
</body>
</html>基础文本元素：文本 <p>；标题 <h1>；链接 <a>；引用 <q>
特殊文本元素： 块引用 <blockquote> ；地址 <address> 等
基本元素属性：
style ：设定样式（与 CSS 有关）
href：设定链接
示例代码：
<html>
<body >
<h2 style="background-color: red;font-family: verdana;text-align: center;">This is a heading.</h2>
<p style="border-color: green;">This is a paragraph.</p>
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<bdo dir="rtl">This text will be written from right to left</bdo>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<a href="http://www.w3school.com.cn/">Visit W3School</a><br>
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a><br>
<!-- <a name="label">锚（显示在页面上的文本）</a><br> -->
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>1.2 元素块、类与id
元素块<div> 有两个属性：
class：
同一个类名可以由多个 HTML 元素使用
调用方式
.类名
id：
一个 id 名称只能由页面中的一个 HTML 元素使用
调用方式
#元素名
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 同一个类名可以由多个 HTML 元素使用 */
.cities{
background-color:black;
color:white;
margin:20px;
padding:20px;
}
span.red {color:red;}
/* 一个 id 名称只能由页面中的一个 HTML 元素使用 */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">我的<span class="red">重要的</span>标题</h1>
<h2 id="C4">第四章</h2>
<div class = "cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<a href="#C4">跳转到第四章</a>
</body>
</html>1.3 头部
title：定义文档标题
base：标签为页面上的所有链接规定默认地址或默认目标（target）
link：定义文档与外部资源之间的关系，最常用于连接样式表
style：标签用于为 HTML 文档定义样式信息
meta：元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<html>
<head>
<!-- title 定义一个文档的标题 -->
<title>03头部 — Title of the document</title>
<!-- base 标签为页面上的所有链接规定默认地址或默认目标（target） -->
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
<!-- link 标签定义文档与外部资源之间的关系，最常用于连接样式表 -->
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<!-- style 标签用于为 HTML 文档定义样式信息 -->
<style type="text/css">
body{background-color: cadetblue;}
p {color:blueviolet;}
</style>
<!-- meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 -->
<meta charset="UTF-8">
<meta name="author" content="扎西拉姆Furry">
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
</head>
<body>
<h1>我是个标题</h1>
<p>The content of the document...... </p>
<br />
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>1.4 CSS
展现形式
CSS 有三种展现形式：外部CSS、内部CSS、行内CSS
优先级：谁最后出现谁优先。
选择器
CSS有三种选择器：元素选择器、id选择器、类选择器
元素选择器根据元素名称来选择 HTML 元素；
id 选择器使用 HTML 元素的 id 属性来选择特定元素 元素的 id 在页面中是唯一的 id 名称不能以数字开头
类选择器选择有特定 class 属性的 HTML 元素
<!DOCTYPE html>
<html>
<head>
<!-- 内部CSS -->
<style>
/* 这里写css文件 */
/* 这里 p 是元素选择器 */
/* 元素选择器根据元素名称来选择 HTML 元素 */
p {
/* color 是属性 red 是值 */
color: red;
text-align: center;
}
/* id 选择器使用 HTML 元素的 id 属性来选择特定元素
元素的 id 在页面中是唯一的
id 名称不能以数字开头 */
#para1 {
text-align: center;
color: rgb(227, 142, 15);
}
/* 类选择器选择有特定 class 属性的 HTML 元素 */
*.clazz {
text-align: center;
color: blueviolet;
}
/* 可以指定只有特定的 HTML 元素会受类的影响 */
p.clazz{
color:rgb(255, 0, 170);
}
/* 元素也可以引用多个类（见下方HTML代码） */
/* 如需对选择器进行分组，请用逗号来分隔每个选择器 */
*.large ,h2 {
/* 轮廓 */
outline-style: auto;
}
</style>
<!-- 外部CSS -->
<!-- 内部、外部CSS看先后，后出现的决定样式，尝试把下一行注掉，就可以看到内部CSS： -->
<link rel="stylesheet" type="text/CSS" href="01Basic.css">
</head>
<body>
<h1 class="clazz">Title H1</h1>
<h2>This is H2</h2>
<p>Hello World!</p>
<!-- 元素也可以引用多个类 -->
<p class="clazz large">Hello CSS! Class = clazz</p>
<p id = para1 >这些段落是通过 CSS 设置样式的。</p>
<!-- 行内CSS -->
<h3 style="outline: auto;" >333</h3>
</body>
</html>/* 外部CSS示例 */
/* 这里写css文件 */
/* 这里 p 是元素选择器 */
/* 元素选择器根据元素名称来选择 HTML 元素 */
p {
/* color 是属性 red 是值 */
color: rgb(145, 215, 6);
text-align: center;
}
/* id 选择器使用 HTML 元素的 id 属性来选择特定元素
元素的 id 在页面中是唯一的
id 名称不能以数字开头 */
#para1 {
text-align: center;
color: rgb(188, 15, 227);
}
/* 类选择器选择有特定 class 属性的 HTML 元素 */
*.clazz {
text-align: center;
color: rgb(226, 43, 55);
}
/* 可以指定只有特定的 HTML 元素会受类的影响 */
p.clazz{
color:rgb(229, 255, 0);
}
/* 元素也可以引用多个类 */
/* 如需对选择器进行分组，请用逗号来分隔每个选择器 */
*.large ,h2 {
/* 轮廓 */
outline-style: auto;
}2. JavaScript 与 api
2.1 使用与输出
2.1.1 使用
script既可以放在head里，也可以放在body里；
script既可以直接写入，也可以放置在外部文件中
有三种方式：
(1) script放在head里 + 直接写入
(2) script放在head里 + 外部引用
(3) script放在body里 + 直接写入
2.1.2 输出方式
使用console.log( )进行输出
使用 document.write( ) 进行输出
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
使用 window.alert( ) 进行输出
使用 innerHTML 进行输出
示例代码：
<!DOCTYPE html>
<html>
<head>
<!-- script既可以放在head里，也可以放在body里-->
<!-- script既可以直接写入，也可以放置在外部文件中 -->
<!-- (1) script放在head里 + 直接写入 -->
<script>
function myFunctionHead() {
// 1.使用console.log()进行输出
document.getElementById("demo").innerHTML = "段落被更改：head";
console.log(5 + 6);
}
</script>
<!-- (2) script放在head里 + 外部引用 -->
<script src="01myScript.js"></script>
</script>
</head>
<body>
<h1>一张网页</h1>
<p id = "demo">一个段落</p>
<button type="button" onclick="myFunctionHead()">试一试Head + console.log()</button>
<button type="button" onclick="myFunctionBody()">试一试Body + window.alert()</button>
<button type="button" onclick="myFunctionEx()">试一试外部 + innerHTML</button>
<button onclick="
// 2.使用 document.write 进行输出
// 在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
document.write(5 + 4)
">试一试document.write()</button>
<!-- (3) script放在body里 + 直接写入 -->
<script>
function myFunctionBody() {
document.getElementById("demo").innerHTML = "段落被更改：body";
// 3. 使用 window.alert 进行输出
window.alert(5 + 9 + ":alert2222");
}
</script>
</body>
</html>function myFunctionEx(){
// 4.使用innerHTML进行输出
document.getElementById("demo").innerHTML="段落被更改：外部";
}2.2 语言基础
变量、作用域、运算符、赋值、函数、对象、字符串、数组、控制流语句
// 变量、作用域、运算符、赋值、函数、对象、字符串、数字、控制流语句
// 1.变量
var x = 7, y = 8, z = x + y ,text = "Hello!";
// 1.1 标识符命名：几乎与C、Java相同的命名规则
// 1.2 数据类型：只关注 (1)数值 (2)字符串
// 1.3 如果声明后不赋值，则值为 undefined
var carName;
// document.getElementById("test").innerHTML = carName;
document.write("carName = " + carName + "<br>");
// 1.4 字符串拼接与算术加法: stringValue = 15169
var stringValue = 8 + 7 + "16" + 9;
document.write("stringValue = " + stringValue + "<br>");
// 1.5 再次声明变量后不会丢值
var stringValue;
document.write("再次声明：stringValue = " + stringValue + "<br>");
// 2. let const 关键词
// 2.1 循环作用域（块作用域）
function loop(){
// 2.1.1 在循环中使用 var
var iV = 7;
for (var iV = 0; iV < 10; iV++) {
// 语句
}
console.log("iV = "+iV);
// 2.1.2 在循环中使用 let
let iL = 7;
for (let iL = 0; iL < 10; iL++) {
// 语句
}
console.log("iL = "+iL);
// 2.1.3 在块作用域中使用 const
const iC = 1;
{
const iC = 2;
console.log("iC in = " + iC);
}
console.log("iC out = " + iC);
return "OK!";
}
// 2.2 函数作用域：let和var相似
// 2.3 全局作用域：let和var相似
var carName = "porsche";
// 此处的代码可使用 window.carName
let carName2 = "porsche";
// 此处的代码不可使用 window.carName
// 2.4 关于 const 的特性
// 2.4.1 常量对象可以更改和添加，但是常量不可以
const car = {type:"porsche", model:"911", color:"Black"};
car.color = "White";
car.owner = "Bill";
// car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
// 2.4.2 常量数组可以更改和添加，但是常量不可以
const cars = ["Audi", "BMW", "porsche"];
cars[0] = "Honda";
cars.push("Volvo");
// cars = ["Honda", "Toyota", "Volvo"]; // ERROR
// 2.5 重新声明
// 简而言之 const 在同一作用域中只能声明一次
// 在它同一作用域之前、之后，用 var let const 再声明都不允许
// 3.运算符
// 3.1 算术运算符
// 幂运算
{
let x = 5;
let y = x ** 2;
let z = Math.pow(x, 2);
}
// 3.2 赋值运算符
// 3.3 比较运算符
// == 和 ===
// == 若 x 与 y 值相同 x==y 为true
// === 若 x 与 y 类型相同 x===y 为true
// 值相同但类型不同
null == undefined; // true
null === undefined; // false
"Bill" == new String("Bill"); // true
"Bill" === new String("Bill"); // false
// 不同对象的值直接无法比较
new String("Bill") == new String("Bill"); // false
// 3.4 逻辑运算符
// 3.5 类型运算符 见 4.4 typeof
// 3.6 位运算符
// 4. 数据类型
// 4.1 动态类型
{
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值
var x = null; // 现在 x 是 object
}
// 4.2 数组
{
let cars = ["Benchi", "Baoma", "Jieke"];
}
// 4.3 对象
{
let person = {firstName:"Bill", lastName:"Gates",age :62};
}
// 4.4 typeof 运算符
// 4.4.1 空值、undefined 和 null
console.log(typeof(undefined));
console.log(typeof"");
console.log(typeof(null));
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
// 4.4.2 原始数据
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
//4.4.3 复杂数据
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (并非 "array"，参见下面的注释)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
// 5.函数
function func(a, b){
return a * b;
}
// 6.对象
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 6.1 访问对象属性
person.firstName;
person["firstName"];
person.fullName; // 会返回方法代码
// 6.2 访问对象方法
person.fullName();
// 7.字符串
var txt = 'It\'s good to see you again';
// 7.1 字符串长度
var sln = txt.length;
// 7.2 转义字符 如上文中 \' 代表单引号
// 注意 \n 等转义字符 在 HTML 中没有任何意义！！3. Vue3 与 element-plus
3.1 Vue3项目结构
── vue3
├── src // 源代码根目录
├── assets
├── components
├── pages // 页面编写
├── App.vue
├── main.js
├── public // 公共静态资源
├── node_modules // 依赖文件
├── index.html
├── package.json // 依赖管理文件
├── dist // 生产环境打包文件3.2 Vue文件结构
// 编写HTML代码
<template>
</template>
// 编写JS TS代码
<script setup>
</script>
// CSS样式代码
<style scoped>
</style>3.3 运行Vue项目
# Project Setup
npm install
# Compile and Hot-Reload for Development
npm run dev
# Compile and Minify for Production
npm run build参考：
哈工大威海课程《Web应用开发技术》辛国栋 22WHSE31004 32学时 2学分
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
