如何知道网站是否被k/青岛官网seo
1、标签语法
HTML超文本标记语言——HyperText Markup Language
- 超文本是链接
- 标记也叫标签,带尖括号的文本
2、HTML基本骨架
HTML基本骨架是网页模板
- html:整个网页
- head:网页头部,存放给浏览器看的代码,例如CSS
- body:网页主体,存放给用户看的代码,例如 图片、文字
- title:网页标题
VS Code快速生成骨架:在HTML文件(.html)中,!(英文)配合Enter/Tab键
3、标签的关系
作用:明确代码的书写位置
- 父子关系(嵌套关系)
- 兄弟关系(并列)
向后缩进:Tab
向前缩进:Shift+Tab
4、注释
注释就是对代码的解释和说明,其目的是能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。
<!-...->注释标签用来在源文档中插入注释,注释不会在浏览器中显示
在VS Code中,添加/删除注释的快捷键:Ctrl + /
5、标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名:h1~h6(双标签)
显示特点:
- 文字加粗
- 字号逐渐减小
- 独占一行(换行)
经验分析:
- h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo
- h2~h6没有使用次数的限制
6、段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
标签名:p(双标签)
如上图,有三个段落
显示特点:
- 独占一行
- 段落之间存在间隙
7、换行与水平线标签
- 换行:<br> (单标签)
- 水平线:<hr> (单标签)
8、文本格式化标签
作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
都是双标签
9、图形标签
作用:在网页中插入图片
src用于指定图像的位置和名称,是<img>的必须属性。建议以./开头,VS Code有提示功能
9.1 图像标签-属性
属性 | 作用 | 说明 |
alt | 替换文本 | 图片无法显示的时候显示的文字 |
title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
width | 图片的宽度 | 值为数字,没有单位 |
height | 图片的高度 | 值为数字,没有单位 |
- 属性名=“属性值”
- 属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序
10、路径
路径是指查找文件时,从起点到终点经历的路线。
- 相对路径:从当前文件位置出发查找目标文件
- 绝对路径:从盘符出发查找目标文件
- windows电脑从盘符出发
- Mac电脑从根目录出发
10.1 相对路径
10.2 绝对路径
- Windows电脑从盘符出发
- Mac电脑从根目录(/)出发
- Windows默认是 \,其他系统是 /,建议统一写为 /
- 文件的在线网址:https://www.itheima.com/images/logo.png
- 绝对路径的应用场景:友情链接
11、超链接
作用:点击跳转到其他页面
href属性值是跳转地址,是超链接的必须属性。
不确定跳转地址,可以使用 # 空链接
target="_blank"属性作用:在新窗口打开页面。
12、音频标签
常见属性
属性 | 作用 | 特殊说明 |
src(必须属性) | 音频URL | 支持格式:MP3、Ogg、Wav |
controls | 显示音频控制面板 | |
loop | 循环播放 | |
autoplay | 自动播放 | 为了提升用户体验,浏览器一般会禁用自动播放功能 |
13、视频标签
属性 | 作用 | 特殊说明 |
src(必须属性) | 视频URL | 支持格式:MP4、WebM、Ogg |
controls | 显示视频控制面板 | |
loop | 循环播放 | |
muted | 静音播放 | |
autoplay | 自动播放 | 为了提升用户体验,浏览器支持在静音状态自动播放 |
综合案例一
网页制作思路:从上到下,先整体再局部,逐步分析制作
分析内容 ---> 写代码 ---> 保存 --->刷新浏览器,看效果
<!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><h1>今日话题</h1><hr><p>IT之家 11 月 29 日消息,在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上,Redmi K70 系列新机正式发布,本文主要介绍标准版机型,该机定位“新一代旗舰性能新标杆”,售价 2499 元起<a href="./综合案例二.html">vue</a>,<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a> </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭载第二代骁龙 8</strong>,综合跑分超 171 万,辅以LPDDR5X 内存,UFS 4.0 闪存,支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。<ins>我很喜欢,你喜欢不</ins></p><p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置,具体来说,该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏,手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit,支持 120Hz 刷新率,480Hz 触控采样率(瞬时 2160Hz),3840Hz 高频 PWM 调光,12bit 色深,JNCD ≈ 0.35;</p><h2>影像方面</h2><p>该机前置 16MP(豪威 OV16A1Q),后置 50MP 主摄(光影猎人 800,1/1.55",OIS)+8MP 超广角(豪威 OV08D10)+2MP 微距(思特威 SC202PCS)三摄;续航方面,Redmi K70 搭载 5000mAh 电池,支持120W 快充,搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达,搭载 1012+1216 立体声双扬声器,通过双 Hi-Res 认证,搭载小米澎湃 OS 系统。</p>
</body>
</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><h1>今日话题</h1><hr><p>IT之家 11 月 29 日消息,在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上,Redmi K70 系列新机正式发布,本文主要介绍标准版机型,该机定位“新一代旗舰性能新标杆”,售价 2499 元起<a href="./综合案例二.html">vue</a>,<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a> </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭载第二代骁龙 8</strong>,综合跑分超 171 万,辅以LPDDR5X 内存,UFS 4.0 闪存,支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。<ins>我很喜欢,你喜欢不</ins></p><p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置,具体来说,该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏,手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit,支持 120Hz 刷新率,480Hz 触控采样率(瞬时 2160Hz),3840Hz 高频 PWM 调光,12bit 色深,JNCD ≈ 0.35;</p><h2>影像方面</h2><p>该机前置 16MP(豪威 OV16A1Q),后置 50MP 主摄(光影猎人 800,1/1.55",OIS)+8MP 超广角(豪威 OV08D10)+2MP 微距(思特威 SC202PCS)三摄;续航方面,Redmi K70 搭载 5000mAh 电池,支持120W 快充,搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达,搭载 1012+1216 立体声双扬声器,通过双 Hi-Res 认证,搭载小米澎湃 OS 系统。</p>
</body>
</html>
相关文章:

HTML-标签之文字排版、图片、链接、音视频
1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签,带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody…...

圣诞将至—C语言圣诞树代码来啦
文章目录 圣诞将至—C实现语言圣诞树源码 圣诞将至—C实现语言圣诞树 圣诞树 源码 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <math.h> #include <stdlib.h> #include <windows.h> #include <time.h> #define PI 3.14159265…...

Git常用命令#merge分支合并
要查看所有分支,包括本地和远程仓库的分支,可以使用以下命令: 1.查看分支 1.1 查看本地分支 git branch这个命令会列出本地所有的分支,当前所在的分支会有 * 标记。 1.2 查看远程分支 git branch -r这个命令会列出远程仓库的分…...

Windows server 2019 域环境部署
环境准备 准备3台服务器,配置都是8g2核,50g硬盘,操作系统版本Windows Server 2019 Datacenter 域服务器:adc,192.168.56.120服务器1:server1:,192.168.56.121服务器2:server2&…...

Cocos Creator加入图片没有被识别
原因,需要更换类型,选择下图中的类型...

java double类型保留两位小数并去除后面多余的0
public static void main(String[] args) {double value9.100001;//保留两位小数String format String.format("%.2f", value);//去除多余的0String strValue new BigDecimal(format).stripTrailingZeros().toPlainString();System.out.println("strValue &q…...

C++学习寄录(九.多态)
1.多态基本概念 先来看这样的代码,我的本意是想要输出“小猫在说话”,但实际输出的却是“动物在说话”。这是因为地址早绑定,在代码编译阶段就已经确定了函数地址;如果想要实现既定目标,那么这个dospeak(&…...

【Linux基础开发工具】yum生态vim的配置与使用
目录 前言 1. Linux 软件包管理器 yum 1.1 什么是yum 1.2 快速上手yum 1.3 yum生态 2. Linux编辑器vim 2.1 vim的模式 2.2 vim使用技巧 3. vim编辑器辅助功能配置 3.1 配置 3.2 用户sudo权限配置 总结 前言 Linux基础指令与权限之后,Linux系统开发工具的使用…...

java-HashMap、TreeMap、LinkedHashMap、ArrayList、LinkedList使用笔记
背景 Map<String, Integer> unsortedMap new HashMap<>(); unsortedMap.put("One", 1); unsortedMap.put("Two", 2); unsortedMap.put("Three", 3); unsortedMap.put("Four", 4); 一、关于排序 TreeMap&#…...

Oracle中mybatis批量更新报错ORA-00933:SQL命令未正确结束
项目场景: 最近在开发项目的过程中遇见了这个问题:Oracle中批量更新的时候报错 ORA-00933:SQL命令未正确结束 问题描述 mybatis批量更新报错ORA-00933:SQL命令未正确结束 <foreach item"item" index"index&q…...

Mysql综合案例练习<1>
MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books,表结构如下: CREATE DATABASE …...

Linux系统编程:线程总结
线程的概念 基本概念 所谓线程,通俗的说就是一个正在运行的函数。 在Linux系统中,线程是程序运行的最小单位,也被视为进程内部的控制序列。同一进程下的多个线程共享进程的所有资源,包括进程环境变量、打开的文件描述符、信号量…...

activemq启动成功但web管理页面却无法访问
前提: 在linux启动activemq成功!本地能ping通linux 处理方案: 确定防火墙是否关闭, 有两种处理方案:第一种-关闭防火墙;第二种-暴漏8161和61616两个端口 netstat -lnpt查看8161和61616端口 注意…...

【Flink on k8s】- 0 - Flink kubernetes operator 快速入门与实战
完整的课程,请点击链接。 目录 一、你将收获 二、适用人群 三、课程介绍...

毕设:《基于hive的音乐数据分析系统的设计与实现》
文章目录 环境启动一、爬取数据1.1、歌单信息1.2、每首歌前20条评论1.3、排行榜 二、搭建环境1.1、搭建JAVA1.2、配置hadoop1.3、配置Hadoop环境:YARN1.4、MYSQL1.5、HIVE(数据仓库)1.6、Sqoop(关系数据库数据迁移) 三、hadoop配置内存四、导…...

PHP使用HTTP代码示例模板
PHP是一种广泛用于服务器端的编程语言,它提供了许多内置的函数和扩展,以便开发人员能够轻松地处理HTTP请求和响应。在PHP中,您可以使用以下代码示例模板来处理HTTP请求和生成HTTP响应。 php复制代码 <?php // 处理GET请求 if ($…...

头歌题目-数组
任务描述 题目描述:找出具有m行n列二维数组Array的“鞍点”,即该位置上的元素在该行上最大,在该列上最小,其中1<m,n<10。 相关知识(略) 编程要求 输入 输入数据有多行,第一行有两个数m和n&#…...

C++ vector基本操作
目录 一、介绍 二、定义 三、迭代器 四、容量操作 1、size 2、capacity 3、empty 4、resize 5、reserve 总结(扩容机制) 五、增删查改 1、push_back & pop_back 2、find 3、insert 4、erase 5、swap 6、operator[] 一、介绍 vector…...

使用SLS日志服务采集Kong网关的日志
一、阿里云SLS 官方的接入文档已比较丰富了,本文不意重复说明此事。 站在使用的角度,以采集Kong的日志为示例,说明我们应该如何治理日志。 说白了,本文是想给你怎么省钱作一个建议,希望不会让你公司也“降本增笑”。…...

TA-Lib学习研究笔记(九)——Pattern Recognition (1)
TA-Lib学习研究笔记(九)——Pattern Recognition (1) 0.程序代码 形态识别的函数的应用,通过使用A股实际的数据,验证形态识别函数,用K线显示出现标志的形态走势,由于入口参数基本上…...

基于GAN的多尺度门合并多模态MRI图像合成
Multi-Modal MRI Image Synthesis via GAN With Multi-Scale Gate Mergence 基于GAN的多尺度门合并多模态MRI图像合成背景贡献实验方法生成器gate mergence (GM) strategy(门控融合策略)判别器 损失函数Thinking 基于GAN的多尺度门合并多模态MRI图像合成…...

浅谈https
1.网络传输的安全性 http 协议:不安全,未加密https 协议:安全,对请求报文和响应报文做加密 2.对称加密与非对称加密 2.1 对称加密 特点: 加解密使用 相同 秘钥 高效,适用于大量数据的加密场景 算法公开&a…...

计算两个结构的差
平面上有6个点,以6a1的方式运动 1 1 1 1 - - - 1 - - - 1 现在有一个点逃逸,剩下的5个点将如何运动? 2 2 2 3 - - - 3 - - - 3 将6a1的6个点减去1个点,只有两种可能,或者变成5a2,…...

class037 二叉树高频题目-下-不含树型dp【算法】
class037 二叉树高频题目-下-不含树型dp【算法】 code1 236. 二叉树的最近公共祖先 // 普通二叉树上寻找两个节点的最近公共祖先 // 测试链接 : https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-tree/ package class037;// 普通二叉树上寻找两个节点的最近…...

使用cpolar完成内网穿刺
cpolar官网上有一句评论:cpolar是用过最简单的内网穿刺工具! 实际体验下来,cpolar确实是能够非常简单地实现内网穿刺 先说弊端,免费版的cpolar提供的穿刺地址,有效期为一天,进程连接数有限,如…...

git的使用:基础配置和命令行
前言 代码管理工具,任何开发都离不开的话题。 到了任何公司,第一件事肯定是配置个人的电脑。主要就是三点,配置对应的开发环境,配置各类开发工具和配置git等代码管理工具拉取代码。 这篇文章主要是git的配置和最常用(我指的是最常用)的命令行使用 git基础配置 git的安装 …...

若依微服务项目整合rocketMq
原文链接:ttps://mp.weixin.qq.com/s/IYdo_suKvvReqCiEKjCeHw 第一步下载若依项目 第二步安装rocketMq(推荐在linux使用docker部署比较快) 第二步新建一个生产者模块儿,再建一个消费者模块 第四步在getway模块中配置接口映射规…...

连接服务器的ssh终端自动断开解放方法
在Linux中,SSH连接在一段时间内没有活动时可能会自动断开,这是为了安全性考虑的一种默认行为,以防止未经授权的访问。这个时间限制通常由SSH服务器的配置决定。你可以通过以下几种方式来处理这个问题: 1.使用SSH配置文件…...

Windows+WSL开发环境下微服务注册(Consul)指定IP
Win11下安装一个WSL2,做开发环境,简直是爽到不要不要的,相当于既有Windows下的完善生态,又有linux的便利。特别是,在linux下运行的服务端口号,完全和windows是相通的,直接在windows下浏览访问&a…...

通过K8S安装人大金仓数据库
1. 离线下载镜像,请点击 2. 官网下载镜像 https://www.kingbase.com.cn/xzzx/index.htm,根据自己的需求下载对应版本。 3. K8S需要的yaml清单 cat > kingbase.yaml << EOF apiVersion: apps/v1 kind: Deployment metadata:name: kingbase-…...