H5网页的基本构成

RiversTree

已于 2022-09-24 13:49:43 修改

阅读量1.9k

点赞数

分类专栏： H5前端开发文章标签： html5 css html javascript

于 2022-09-20 09:35:36 首次发布

本文链接：https://blog.csdn.net/weixin_45689945/article/details/126946692

版权

H5前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、HTML

内容结构，扩展名是.html (全称：Hyper Text Markup Language) 超文本标记语言。

成对存在的是标签对，比如<a></a>标签

单标签比如<img>

标签名不区分大小写：一般统一都是小写

每一个标签都可以拥有自己的属性，属性可以增强标签的功能

<起始标签属性名="属性值"> 可以有多个属性值，属性名是小写并且无序，属性值建议用双引号""

有些属性是公共的，每一个标签都可以设置（比如：class、id、title、lang 属性）
有些属性是标签特有的，不是每个标签都可以设置（比如：meta标签的charset属性、img标签的alt属性等）
title属性的作用（当鼠标移到上面会显示值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello world
    <a href="https://www.baidu.com">百度</a>
    <img  src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png">

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王二</li>
        <li>麻子</li>
    </ul>

    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王二</li>
        <li>麻子</li>
    </ol>

</body>
</html>

如下所示：

2、CSS

视觉效果

3、JavaScript

基础语法：

JS中用var、let定义变量（建议用let），const定义常量
常见打印：alert、console.log()
JS中有以下8种数据类型：

number：整数、浮点数。1、12.8

bigint：任意长度的整数，12345676543n

string：字符串，"jack"、'jack'、`jack`

boolean：真假，true、false

undefined：未分配的值，undefined

null：不存在或者无效，null

object：对象，{}、[]

symbol：唯一标识符

typeof类型运算符，2种语法：typeof x 或者 typeof(x)
字符串拼接如下：

<script>
        const name='jack' 
        const age = 20
        // my name is jack, age is 20
        console.log('my name is'+ name+', age is'+age)
        // my name is jack, age is 20
        console.log(`my name is ${name},age is ${age}` )
        // my name is jack age is 20
        console.log(`my name is ${'ja'+ 'ck'}, age is ${19 + 1}`)
        
    </script>

字符串遍历如下：

  <script>
        const name='jack'
        for (const c of name) {
            console.log(c)
        }

         for (let i = 0; i < name.length; i++) {
            console.log(name.charAt(i))
        }
        
    </script>

数组的遍历如下：

 <script>
       const arr = [11, '22']
        for (const e of arr) {
            console.log(e)
        }

       for (let i = 0; i < arr.length; i++) {
           console.log(arr[i])
       }

       arr.forEach((e, idx) => {
           console.log(idx, e)
       })

    </script>

对象的遍历如下：

<script>
     const person = {name: 'jack', age: 20}
     for (const k in person) {
         // name jack
         // age 20
         console.log(k,person[k])
     }

     for (const k of Object.keys(person)) {
         // name jack
         // age 20
         console.log(k,person[k])
     }

     for (const entry of Object.entries(person)) {
         // name jack
         // age 20
         console.log(entry[0],entry[1])
     }

      for (const v of Object.values(person)) {
         // jack
         // 20
         console.log(v)
     }
    </script>

函数如下：

  <script>
    function sum(a, b, c = 10) {
        return a + b + c
    }
    console.log(sum(2,3,4)) // 9
    console.log(sum(2,3)) // 15



    function execute(fn, a ,b) {
            console.log(fn(a,b))
        }

        function sum(a, b) {
            return a + b
        }
        execute(sum, 12, 45)

        // 匿名函数
        execute(function (x, y) {
            return x - y
        }, 12, 45)

        // ES6后的箭头函数
        execute((x, y) => {
            return x * y
        },12, 45)

        // 更简洁的写法
        execute((x, y) => x * y,12, 45)

        // 函数甚至可以作为返回值

        function test() {
            return sum
        }

        // 30
        console.log(test()(10, 20))

  </script>

标签的点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function test() {
            alert("按钮点击了")
        }
    </script>
</head>
<body>
    <button onclick="test()">按钮</button>
</body>
</html>

DOM操作（删除和添加）：

以下是删除元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function remove() {
            document.getElementById("second").remove()
        }

          // 也可以通过css选择器查找DOM对象操作
         function remove() {
           document.querySelector('li:nth-of-type(2)').remove()
            //或者以下方式
            //document.querySelectorAll('li')[1].remove()
        }
    </script>
</head>
<body>
    <ul>
        <li>111</li>
        <li id="second">222</li>
        <li>333</li>
    </ul>

    <button onclick="remove()">按钮</button>
</body>
</html>

以下是添加元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function add() {
            let li = document.createElement('li')
            let txt = document.createTextNode('测试')
            li.append(txt)
            document.getElementsByTagName('ul')[0].append(li)
        }
    </script>
</head>
<body>
    <ul>
    </ul>

    <button onclick="add()">按钮</button>
</body>
</html>

主要交互处理

JavaScript简称JS，是广泛应用于前端开发中的脚本语言
JavaScript遵循Java的表达式语法、命名规范、基础流程控制
常见用途：

跟用户进行交互
对标签的增删改查
实现绚丽的动画效果
跟服务端进行交互

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('hello world')
    </script>
</head>
<body>
    <script>
        alert('hello world')
    </script>
</body>
</html>

也可以引用js文件如下图：