一张网页从meta标签开始

本文介绍了网页中常用的元标签,包括网页编码、缓存控制、浏览器兼容性等设置,还涉及了针对特定浏览器如360浏览器的配置以及移动端适配等内容。

  • 规定网页编码

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  • 设置http cache时间,在快速迭代的项目中,我们可以设置max-age=604800s,也就是七天

<meta http-equiv="Cache-Control" content="max-age=604800" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="always" name="referrer">
<meta name="description" content="网站描述">
<meta name="keywords" content="关键词1、关键词2">
<meta name="viewport" content="width=1226">
  • 规定360安全浏览器使用webki内核进行渲染

<meta name="renderer" content="webkit">

360浏览器开发者中心

  • 申明网站为pc站,避免被转码

<meta name="applicable-device" content="pc">
  • 禁止浏览器转码

<meta http-equiv="Cache-Control" content="no-transform" />
  • 禁止浏览器识别手机号码

<meta name="format-detection" content="telephone=no">
  • 声明视窗大小,禁止用户缩放,移动端必备

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no


源引:http://segmentfault.com/a/1190000004180939

HBuilderX是一个基于WebIDE的前端开发工具,它可以帮助开发者快速构建HTML、CSS和JavaScript应用。如果你想用HBuilderX创建一个相册网页,可以使用列表标签`<ul>`和`<li>`来模拟图片的显示。下面是一个简单的例子: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>相册示例</title> <!-- 引入样式,如果需要自定义样式 --> <style> .album-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; cursor: pointer; } </style> </head> <body> <h1>我的相册</h1> <div id="album-container"> <ul class="album-list"> <!-- 使用v-for遍历相册数据 --> <li v-for="(item, index) in albumItems" :key="index" class="album-item"> <img :src="item.src" alt="图片{{ index + 1 }}"> <p>{{ item.title }}</p> <button @click="showDetails(index)">查看详情</button> </li> </ul> </div> <!-- 省略部分:假设你在Vue.js中管理数据 --> <script src="https://unpkg.com/vue@next"></script> <script> const app = createApp({ data() { return { albumItems: [ { src: 'image1.jpg', title: '照片1' }, { src: 'image2.jpg', title: '照片2' }, // ... 更多图片数据 ], }; }, methods: { showDetails(index) { console.log(`点击了第${index+1}张照片`); // 这里你可以添加实际的详细展示逻辑 }, }, }); app.mount('#album-container'); </script> </body> </html> ``` 在这个例子中,`<li>`标签用于显示每张图片,通过`v-for`指令和`data`里的数组`albumItems`动态渲染。每个条目包含一张图片、标题以及一个“查看详情”的按钮。当用户点击按钮时,会触发`showDetails`方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值