当前位置: 首页 > news >正文

HTML5学习系列之简单使用1

HTML5学习系列之简单使用1

  • 前言
  • 基础显示学习
    • 定义网页标题
    • 定义网页元信息
    • 定义网页元信息
    • 定义文档结构
    • div元素
    • di和class
    • title
    • role
    • 注释
  • 总结


前言

下班加班期间的简单学习。


基础显示学习

定义网页标题

<html lang="en">
<head>
<title>从今天开始努力学习</title> 
</head>
<body>
</body>
</html>

定义网页元信息

定义网页的元信息。方便检索需要设置元信息(描述和关键词)

<meta charset="utf-8"/>  
<meta name="description" content="标准网页设计专业技术资讯”/》
<meta name="keywords" content="HTML,DHTML,CSS,XML,XHTML,JavaScript"/>

meta标签属性列表:
content:必须的,元信息。
http-equiv:把content信息关联到HTTP头部
name:content属性关联到一个名称
scheme:定义用于翻译content属性值的格式
charset:定义文档的字符编码

定义网页元信息

viewport(视口),即浏览器显示页面内容的屏幕区域。常用于定义一个虚拟的布局视口,解决早期页面在手机上显示的问题。
viewport标签设置说明:width、height、initial-scale、minimum-scale、maximum-scale、user-scalable
可以理解为定义一个合适的界面分辨率。

定义文档结构

:标签构建网页通用结构

...:定义文档标题

:定义段落文本

    1. :定义信息列表、导航列表、榜单结构等
      :定义表格结构 :定义表单结构 :定义行内包含框

<html>
<head><meta charset="UTF-8"><title> </title>
</head>
<body><h1>网页文档</h1><p>文档必须包含三个部分</p><ul><li>html——网页包含框</li><li>head——头部区域</li><li>body——主题内容</li></ul>
<body>
</html>

在这里插入图片描述

div元素

div为通用容器,可添加样式或JavaScript效果。

di和class

赋予额外的语义

<ul id="nav"></ul>
<h1 class="newshead">标题新闻</h1>

title

<ul title="标题"></ul>

role

当前元素所扮演的角色,增强文本的可读性和语义化。

注释

<!-- xxx -->

总结

学习HTML的基本结构。

相关文章:

HTML5学习系列之简单使用1

HTML5学习系列之简单使用1 前言基础显示学习定义网页标题定义网页元信息定义网页元信息定义文档结构div元素di和classtitlerole注释 总结 前言 下班加班期间的简单学习。 基础显示学习 定义网页标题 <html lang"en"> <head> <title>从今天开始努…...

计算机网络第一章(计算机网络开篇)

目录 一.什么是计算机网络1.0 何为计算机网络1.1 什么是Internet?1.2 互联网与互连网1.3 互联网基础结构发展的三个阶段 二.什么是网络协议2.1 协议的三要素2.2 internet协议标准 三. 互联网的组成3.1 边缘部分3.11 端系统之间的通信 3.2 核心部分3.21 数据交换技术 四. 计算机…...

百度秋招突击手册面试算法题:三数之和

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 …...

归并排序 图解 递归 + 非递归 + 笔记

前置知识&#xff1a;讲解019-算法笔试中处理输入和输出&#xff0c;讲解020-递归和master公式 (1)左部分排好序&#xff0c;右部分排好序&#xff0c;利用merge过程让左右整体有序(2)merge过程:谁小拷贝谁&#xff0c;直到左右两部分所有的数字耗尽(3)递归实现和非递归实现(4…...

2023 年最好的 Android 系统修复/刷机应用程序和软件

任何 Android 设备要顺利运行&#xff0c;其操作系统必须运行良好。幸运的是&#xff0c;对于大多数 Android 用户来说&#xff0c;这是不间断的。设备运行良好&#xff0c;打电话、共享文档等都没有问题。尽管如此&#xff0c;Android 操作系统可能会停止运行。这可能是由于特…...

Linux下内网穿透实现云原生观测分析工具的远程访问

&#x1f4d1;前言 本文主要是Linux下内网穿透实现云原生观测分析工具的远程访问设置的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &…...

卡数据兼容性要求-M2M架构

EUM 应在生产 eUICC 过程中安装并初始化 ISD-R. eUICC 出厂后&#xff0c; ISD-R 应进入 GlobalPlatform Card Specification [GP CS]第 5.3 节中定义的生命周期状态 "PERSONALIZED". ISD-R 权力授予应遵循[GS RPT]附录 C 中的定义. EUM 应在 eUICC 生产过程中安装并…...

C++入门篇3(类和对象【重点】)

文章目录 C入门篇3&#xff08;类和对象【重点】&#xff09;1、面向过程和面向对象2、类的引入3、类的定义4、类的访问限定符及封装4.1、访问限定符4.2、封装 5、类的作用域6、类的实例化&#xff08;对象&#xff09;7、类对象模型7.1、类对象的存储方式7.2、结构体&#xff…...

【开源】基于Vue.js的生活废品回收系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨…...

Mysql配置主从复制-GTID模式

目录 主从复制 主从复制的定义 主从复制的原理 主从复制的优势 主从复制的形式 主从复制的模式 主从复制的类型 GTID模式 GTID的概念 GTID的优势 GTID的原理 GTID的配置 Mysql主服务器 ​编辑 Mysql从服务器 ​编辑 主从复制 主从复制的定义 是指把数据从一个…...

Flink之状态管理

Flink状态管理 状态概述状态分类 键控、按键分区状态概述值状态 ValueState列表状态 ListStateMap状态 MapState归约状态 ReducingState聚合状态 Aggregating State 算子状态概述列表状态 ListState联合列表状态 UnionListState广播状态 Broadcast State 状态有效期 (TTL)概述S…...

[Mac软件]Adobe Media Encoder 2024 V24.0.2免激活版

软件说明 使用Media Encoder&#xff0c;您将能够处理和管理多媒体。插入、转码、创建代理版本&#xff0c;并几乎以任何可用的格式输出。在应用程序中以单一方式使用多媒体&#xff0c;包括Premiere Pro、After Effects和Audition。 紧密整合 与Adobe Premiere Pro、After …...

Bytebase 2.11.0 - 支持 OceanBase Oracle 模式

&#x1f680; 新功能 支持 OceanBase Oracle 模式。支持设置 MySQL 在线变更参数。新增项目数据库查看者的角色。 &#x1f384; 改进 支持在项目中直接选择所有用户并为之添加角色。 调整了项目页面的布局。在 SQL 编辑器中通过悬浮面板展示表和列的详情。 &#x1faa6; …...

『CV学习笔记』文本识别算法CRNNSVTR介绍

文本识别算法CRNN&SVTR介绍 文章目录 一. 文本识别1.1. 文本识别方法介绍1.1.1. 规则文本识别1.1.2. 不规则文本识别1.2. CRNN算法原理1.2.1. CRNN基本网络结构1.3. SVTR算法原理二. 参考文献一. 文本识别 文本识别是OCR(Optical Character Recognition)的一个子任务,其…...

HaaS510开板式DTU真机连云:上报监测数据至阿里云物联网平台

背景 HaaS: Hardware as a Service。 HAAS510 是一种开板式 DTU &#xff0c;旨在为用户已开发好的设备快速增加 4G 连云能力的 4G CAT1 数传模块。它通过将模组与用户设备集成到一个外壳内&#xff0c;既保持设备的一体性&#xff0c;又降低重新开发 PCB 的时间消耗和模组开…...

贾扬清开源 AI 框架 Caffe | 开源英雄

【编者按】在开源与人工智能的灿烂星河里&#xff0c;贾扬清的名字都格外地耀眼。因为导师 Trevor Darrell 教授的一句“你是想多花时间写一篇大家估计不是很在意的毕业论文&#xff0c;还是写一个将来大家都会用的框架&#xff1f;”&#xff0c;学生贾扬清一头扎进了创 Caffe…...

【objectarx.net】使用公式自动更新表格项的内容

使用公式自动更新表格项的内容...

CSS 移动端 1px(线条/边框) 不同机型上显示粗细不同,解决办法

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍&#xff0c;1px的边框在devicePixelRatio2的移动显示屏下会显示成2px&#xff0c;所以在高清瓶下看着1px总是感觉变胖了 <!DOCTYPE html> <html lang"en"> <head&g…...

vue3使用vuex的示例(模块化功能)

目录 1. store/index.ts 2. main.ts 3. App.vue调用 4. 如果删除moduleA的namespaced属性, 保留moduleB的namespaced:true 5. 则App.vue修改为: 1. store/index.ts 注意: 需要使用时带上模块名称的namespaced必须为true, 不写或者为false时调用时不需要写模块名称(获取st…...

Vatee万腾的科技决策力奇迹:Vatee科技决策力的独特之选

在金融投资的复杂领域中&#xff0c;Vatee万腾以其独特的科技决策力创造了一场真正的奇迹。这不仅是一种引领投资者走向成功的选择&#xff0c;更是一种开启新时代的科技决策奇迹。 Vatee的科技决策力背后蕴藏着强大的智慧和创新。通过大数据分析、智能算法的运用&#xff0c;V…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...