menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

H5网页的基本构成

武飞扬头像
RiversTree
帮助1人

1、HTML

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

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

单标签比如<img>

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

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

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

  • 有些属性是公共的，每一个标签都可以设置（比如：class、id、title、lang 属性）
  • 有些属性是标签特有的，不是每个标签都可以设置（比如：meta标签的charset属性、img标签的alt属性等）
  • title属性的作用（当鼠标移到上面会显示值）
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    hello world
  9.  
    <a href="https://www.百度.com">百度</a>
  10.  
    <img src="https://www.百度.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png">
  11.  
     
  12.  
    <ul>
  13.  
    <li>张三</li>
  14.  
    <li>李四</li>
  15.  
    <li>王二</li>
  16.  
    <li>麻子</li>
  17.  
    </ul>
  18.  
     
  19.  
    <ol>
  20.  
    <li>张三</li>
  21.  
    <li>李四</li>
  22.  
    <li>王二</li>
  23.  
    <li>麻子</li>
  24.  
    </ol>
  25.  
     
  26.  
    </body>
  27.  
    </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) 
  • 字符串拼接如下：
  1.  
    <script>
  2.  
    const name='jack'
  3.  
    const age = 20
  4.  
    // my name is jack, age is 20
  5.  
    console.log('my name is' name ', age is' age)
  6.  
    // my name is jack, age is 20
  7.  
    console.log(`my name is ${name},age is ${age}` )
  8.  
    // my name is jack age is 20
  9.  
    console.log(`my name is ${'ja' 'ck'}, age is ${19 1}`)
  10.  
     
  11.  
    </script>
  • 字符串遍历如下：
  1.  
    <script>
  2.  
    const name='jack'
  3.  
    for (const c of name) {
  4.  
    console.log(c)
  5.  
    }
  6.  
     
  7.  
    for (let i = 0; i < name.length; i ) {
  8.  
    console.log(name.charAt(i))
  9.  
    }
  10.  
     
  11.  
    </script>
  • 数组的遍历如下：
  1.  
    <script>
  2.  
    const arr = [11, '22']
  3.  
    for (const e of arr) {
  4.  
    console.log(e)
  5.  
    }
  6.  
     
  7.  
    for (let i = 0; i < arr.length; i ) {
  8.  
    console.log(arr[i])
  9.  
    }
  10.  
     
  11.  
    arr.forEach((e, idx) => {
  12.  
    console.log(idx, e)
  13.  
    })
  14.  
     
  15.  
    </script>
学新通
  • 对象的遍历如下：
  1.  
    <script>
  2.  
    const person = {name: 'jack', age: 20}
  3.  
    for (const k in person) {
  4.  
    // name jack
  5.  
    // age 20
  6.  
    console.log(k,person[k])
  7.  
    }
  8.  
     
  9.  
    for (const k of Object.keys(person)) {
  10.  
    // name jack
  11.  
    // age 20
  12.  
    console.log(k,person[k])
  13.  
    }
  14.  
     
  15.  
    for (const entry of Object.entries(person)) {
  16.  
    // name jack
  17.  
    // age 20
  18.  
    console.log(entry[0],entry[1])
  19.  
    }
  20.  
     
  21.  
    for (const v of Object.values(person)) {
  22.  
    // jack
  23.  
    // 20
  24.  
    console.log(v)
  25.  
    }
  26.  
    </script>
学新通

函数如下：

  1.  
    <script>
  2.  
    function sum(a, b, c = 10) {
  3.  
    return a b c
  4.  
    }
  5.  
    console.log(sum(2,3,4)) // 9
  6.  
    console.log(sum(2,3)) // 15
  7.  
     
  8.  
     
  9.  
     
  10.  
    function execute(fn, a ,b) {
  11.  
    console.log(fn(a,b))
  12.  
    }
  13.  
     
  14.  
    function sum(a, b) {
  15.  
    return a b
  16.  
    }
  17.  
    execute(sum, 12, 45)
  18.  
     
  19.  
    // 匿名函数
  20.  
    execute(function (x, y) {
  21.  
    return x - y
  22.  
    }, 12, 45)
  23.  
     
  24.  
    // ES6后的箭头函数
  25.  
    execute((x, y) => {
  26.  
    return x * y
  27.  
    },12, 45)
  28.  
     
  29.  
    // 更简洁的写法
  30.  
    execute((x, y) => x * y,12, 45)
  31.  
     
  32.  
    // 函数甚至可以作为返回值
  33.  
     
  34.  
    function test() {
  35.  
    return sum
  36.  
    }
  37.  
     
  38.  
    // 30
  39.  
    console.log(test()(10, 20))
  40.  
     
  41.  
    </script>
学新通

标签的点击事件：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script>
  7.  
    function test() {
  8.  
    alert("按钮点击了")
  9.  
    }
  10.  
    </script>
  11.  
    </head>
  12.  
    <body>
  13.  
    <button onclick="test()">按钮</button>
  14.  
    </body>
  15.  
    </html>
学新通

 DOM操作（删除和添加）：

以下是删除元素：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script>
  7.  
    function remove() {
  8.  
    document.getElementById("second").remove()
  9.  
    }
  10.  
     
  11.  
    // 也可以通过css选择器查找DOM对象操作
  12.  
    function remove() {
  13.  
    document.querySelector('li:nth-of-type(2)').remove()
  14.  
    //或者以下方式
  15.  
    //document.querySelectorAll('li')[1].remove()
  16.  
    }
  17.  
    </script>
  18.  
    </head>
  19.  
    <body>
  20.  
    <ul>
  21.  
    <li>111</li>
  22.  
    <li id="second">222</li>
  23.  
    <li>333</li>
  24.  
    </ul>
  25.  
     
  26.  
    <button onclick="remove()">按钮</button>
  27.  
    </body>
  28.  
    </html>
学新通

学新通

学新通 

 以下是添加元素：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script>
  7.  
    function add() {
  8.  
    let li = document.createElement('li')
  9.  
    let txt = document.createTextNode('测试')
  10.  
    li.append(txt)
  11.  
    document.getElementsByTagName('ul')[0].append(li)
  12.  
    }
  13.  
    </script>
  14.  
    </head>
  15.  
    <body>
  16.  
    <ul>
  17.  
    </ul>
  18.  
     
  19.  
    <button onclick="add()">按钮</button>
  20.  
    </body>
  21.  
    </html>
学新通

学新通

主要交互处理

  • JavaScript简称JS，是广泛应用于前端开发中的脚本语言
  • JavaScript遵循Java的表达式语法、命名规范、基础流程控制
  • 常见用途：
  1. 跟用户进行交互
  2. 对标签的增删改查
  3. 实现绚丽的动画效果
  4. 跟服务端进行交互

 <script></script>标签对可以写在head和body标签中如下demo： 

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="zh">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script>
  7.  
    alert('hello world')
  8.  
    </script>
  9.  
    </head>
  10.  
    <body>
  11.  
    <script>
  12.  
    alert('hello world')
  13.  
    </script>
  14.  
    </body>
  15.  
    </html>
学新通

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

学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhfiaeec
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群