了解Web前端1（前端三剑客基础知识）

一天亿点

已于 2024-04-08 18:52:32 修改

阅读量2k

点赞数 30

文章标签：前端 java html css javascript

于 2024-04-08 13:55:48 首次发布

本文链接：https://blog.csdn.net/qq_45737510/article/details/137431967

版权

学习文档w3school 在线教程

1前端三剑客

1. html (Hyper Text Markup Language，即超文本标记语言，主要负责网页的结构和内容)

2. css (Cascading Style Sheets, 主要是对网页对象和模型样式进行格式的编辑)

3. javascript (主要作用于网页的行为，动作)

下面详细说一下三个部分的具体内容。

（1）html

1.1html主要框架

最外层主要包含三层标签<head> <body> <script>

head常见标签

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML文档。

<html>：整个HTML文档的根元素。

<head>：文档头部，用于指定文档的元信息和引入外部资源。

<meta>：指定文档的元信息，图中第一行为编码格式，第二行为浏览器兼容性。

<title>：指定页面的标题，显示在浏览器最顶端。

其中css样式使用标签<style>写在head中

<body>：文档的主体部分，包含所有的页面内容。

<script>：js代码

1.2常用到的标签

图片标签：<img src='图片相对路径或者绝对路径' width='400px' height='300px'> </img>

长宽所填的单位：px：像素，%：相较于父级的百分比

标题标签<h1> - <h6> 水平线标签<hr> <span>标签：没有语义的块标签

<a>：超链接

<br>：换行标签 <p>: 段落标签

音频标签：<audio> 视频标签：<vidio> 文本加粗：<b> <strong>

（2）css

css引入方法

行内样式: <h1 style="...">
内嵌样式: <style> ... </style>
外联样式: xxx.css <link href=" . .." >

css选择器

元素选择器: 标签名{ ... }
id选择器: #id属性值{ .... }
类选择器: .class属性值{ ... }
优先级:id选择器>类选择器>元素选择器

css属性

颜色属性：color，三种表示方法

关键字:red、green
rgb表示法: rgb(255,0,0). rgb(134,100, 89)
十六进制: #ff0000、#cccccc、#ccc

字体大小：font size（px）

text-decoration:规定添加文本的修饰，none表示定义标准的文本（可以修改超链接为普通字体）

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

（3）javascript

基础语法

输出语句：

window.alert("Hello JS"); //弹出框

document.write("Hello JS"); //写入HTML页面

console.log("Hello JS"); //浏览器控制台

变量：var a = 0;

let 定义的是一个局部变量，不可以重复声明

let a = 0;

原始数据类型(五种)：

alert(typeof 3.14);//number

alert(typeof 'Hello');//string(单双引号都行)

alert(typeof true);//boolean

alert(typeof null);//object(null)

var a ;

alert(typeof a);//undefined?

运算符：大部分与java一样

（特殊）

===与==

==会进行类型转换

===不会进行类型转换

JS对象

主要学习了五个部分：

Array，String，JSON，

BOM(Browser Object Model，即浏览器对象模型),

DOM(Document Object Model，文档对象模型)

常用事件

事件绑定（两种方法）：

<body>

<input type="button" id="btn1" value="事件绑定1" οnclick="on()">

<input type="button" id="btn2" value="事件绑定2">

</body>

<script>

function on(){

alert("按钮1被点击了...");

}

document.getElementById('btn2').onclick = function(){

alert("按钮2被点击了...");

}

</script>