前端基础知识

什么是HTML

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>php中文网</p>
</body>
</html>

注释：

1.<html>元素：
<html>元素定义了整个HtML文档
2.<head>元素：
<head>标签用于存放：
title，meta，base，style，script，link
3，<title>元素：
为html文档定义一个标题
4，<body>元素：
定义文档主体

HTML元素的三个通用属性。

1 id属性:获取当前元素，具有唯一性。

2 class属性：获取类属性，可以用class为标签设定一个可以服用的标识，具有相同class的标签就会有i相同的特点。

3 style属性：行内元素。

HTML选择器的优先级

优先级：

id选择器>标签选择器。

行内样式>id选择器。

类选择器>标签选择器。

id选择器>类选择器。

即：

行内样式（最高级）>id选择器>类选择器>标签选择器。

JS(JavaScrip)

1.一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型

2.特点:

1.与html和css结合客户端的技术

2.能够动态修改html,css中的属性等内容,形成动态效果

3.解释型语言

4.区分大小写

5.弱类型的语言

3.格式:

<script>
        let girl={
            sum:function (a,b) {
                return a+b;
          }
        };
    </script>

<p id="p">php中文网</p>
    <script>
        const el = document.getElementById('p');
        console.log(el);
        el.style.backgroundColor="red";
    </script>

效果图：

" class="reference-link">

4 js获取元素的方法

1， document.getElementById(“id名”);

2，document.getElementsByClassName(“类名”);

3，const p = document.getElementsByTagName(“标签名”);

4，显示一个：

let y = document.querySelector(“.类名”);

5，显示多个：

ocument.querySelectorAll(“.类名”);

" class="reference-link">效果图：

前端基础知识

前端基础知识

什么是HTML

HTML骨架

HTML元素的三个通用属性。

1 id属性:获取当前元素，具有唯一性。

2 class属性：获取类属性，可以用class为标签设定一个可以服用的标识，具有相同class的标签就会有i相同的特点。

3 style属性：行内元素。

HTML选择器的优先级

优先级：

id选择器>标签选择器 。

行内样式>id选择器 。

类选择器>标签选择器 。

id选择器>类选择器 。

即：

行内样式（最高级）>id选择器>类选择器>标签选择器。

JS(JavaScrip)

1.一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型

2.特点:

1.与html和css结合客户端的技术

2.能够动态修改html,css中的属性等内容,形成动态效果

3.解释型语言

4.区分大小写

5.弱类型的语言

3.格式:

效果图：

" class="reference-link">

4 js获取元素的方法

1， document.getElementById(“id名”);

2，document.getElementsByClassName(“类名”);

3，const p = document.getElementsByTagName(“标签名”);

4，显示一个：

let y = document.querySelector(“.类名”);

5，显示多个：

ocument.querySelectorAll(“.类名”);

" class="reference-link">效果图：

相关文章

id选择器>标签选择器。

行内样式>id选择器。

类选择器>标签选择器。

id选择器>类选择器。