当前位置: 首页 > 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…...

Java GC 调优:从理论到实战

Java GC 调优&#xff1a;从理论到实战 在现代Java应用中&#xff0c;垃圾回收&#xff08;GC&#xff09;性能直接影响系统的吞吐量、延迟和稳定性。随着微服务和高并发场景的普及&#xff0c;GC调优从“可选技能”变成了开发者的必修课。本文将带你从基础理论到实战技巧&…...

ROHM罗姆推出支持10Gbps以上高速I/F的ESD保护二极管的特点和应用方案

全球知名半导体制造商ROHM(总部位于日本京都市)宣布,推出兼具业界超低动态电阻(Rdyn)*1和超低电容特性的ESD(静电放电)保护二极管*2“RESDxVx系列”。该系列产品适用于需要高速数据传输的众多应用领域。 近年来,在工业设备和车载市场,高速信号传输的普及与电子设备的小…...

Golang怎么安装和配置开发环境_Golang环境搭建完整教程【总结】

Go环境无需传统IDE&#xff0c;只需装好go命令、配置PATH&#xff08;macOS/Linux检查which go或修改shell配置&#xff0c;Windows检查PowerShell的Get-Command go及系统环境变量&#xff09;&#xff0c;启用模块模式&#xff08;go env -w GO111MODULEon&#xff09;、清理v…...

蓝桥杯单片机 | 实战解析【进阶04】基于24C02的按键次数掉电存储与动态显示系统

1. 项目背景与需求分析 在蓝桥杯单片机竞赛中&#xff0c;数据持久化存储是一个非常重要的考点。24C02作为一款经典的EEPROM芯片&#xff0c;经常被用来实现掉电不丢失的数据存储功能。这次我们要实现的功能是记录三个独立按键的触发次数&#xff0c;并且在系统断电后依然能够保…...

WiMAX 802.16d技术架构与宽带部署实践

1. WiMAX 802.16d技术架构解析WiMAX 802.16d标准采用正交频分复用&#xff08;OFDM&#xff09;作为核心技术&#xff0c;通过将高速数据流分割为多个低速子载波传输&#xff0c;有效对抗多径干扰。其物理层支持256点FFT变换&#xff0c;每个子载波可独立选择BPSK、QPSK、16QAM…...

ChemCrow架构深度解析:构建AI化学助手的核心技术栈

ChemCrow架构深度解析&#xff1a;构建AI化学助手的核心技术栈 【免费下载链接】chemcrow-public Chemcrow 项目地址: https://gitcode.com/gh_mirrors/ch/chemcrow-public 在化学研究领域&#xff0c;传统的数据分析和反应预测往往需要研究人员在多个专业工具间切换&am…...

SYN6288语音合成模块避坑指南:ESP32-S串口通信失败,我用MAX2323解决了

SYN6288语音合成模块实战&#xff1a;ESP32-S串口通信故障排查与电平转换方案 当你在智能硬件项目中尝试集成语音合成功能时&#xff0c;SYN6288模块因其高性价比和中文支持成为热门选择。但很多开发者第一次将3.3V的ESP32-S与5V供电的SYN6288连接时&#xff0c;会遇到一个典型…...

区块链应用·数据共享消除数字鸿沟

基于FISCO BCOS与Go语言构建可信数据共享基础设施,打通跨机构、跨地域的信任壁垒 一、数字鸿沟的根源:信任缺失下的“数据孤岛” 数字鸿沟(Digital Divide)不仅存在于不同区域、不同群体之间,更深层次地体现在数据持有者之间的信任鸿沟。在传统信息系统中,数据分散存储于…...

MySQL Explain 执行计划性能对比

MySQL Explain执行计划性能对比&#xff1a;优化查询的关键利器 在数据库性能优化中&#xff0c;MySQL的Explain执行计划是分析SQL查询效率的重要工具。通过Explain&#xff0c;开发者可以直观地了解查询的执行路径、索引使用情况以及潜在的性能瓶颈。本文将从多个角度对比Exp…...

如何快速找到你需要的公共API?终极Public APIs资源库完全指南

如何快速找到你需要的公共API&#xff1f;终极Public APIs资源库完全指南 【免费下载链接】public-apis A collaborative list of public APIs for developers 项目地址: https://gitcode.com/GitHub_Trending/publ/public-apis 在当今数字化开发时代&#xff0c;API已经…...