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的基本结构。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/130627.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

内存缓存系统

胤凯 (oyto.github.io)&#xff0c;欢迎到我的博客阅读。 今天我们围绕一个面试题来实现一个内存缓存系统。 面试题内容 1. 支持设置过期时间&#xff0c;精度到秒 2. 支持设置最大内存&#xff0c;当内存超出时做出合理的处理 3. 支持并发安全 4. 按照以下接口要求实现 typ…

【poi导出excel模板——通过建造者模式+策略模式+函数式接口实现】

poi导出excel模板——通过建造者模式策略模式函数式接口实现 poi导出excel示例优化思路代码实现补充建造者模式策略模式 poi导出excel示例 首先我们现看一下poi如何导出excel&#xff0c;这里举个例子&#xff1a;目前想要导出一个Map<sex,List>信息&#xff0c;sex作为…

使用Dockerfile依赖maven基础镜像部署springboot的程序案例

1、准备springboot Demo代码 就一个controller层代码&#xff0c;返回当前时间及hello world 2、项目根目录下&#xff0c;新建DockerFile文件 注意&#xff0c;等本地配置完毕后&#xff0c;Dockerfile文件需要与项目helloworld同级&#xff0c;这里先放项目里面 3、docker …

【MATLAB源码-第73期】基于matlab的OFDM-IM索引调制系统不同子载波数目误码率对比,对比OFDM系统。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 OFDM-IM索引调制技术是一种新型的无线通信技术&#xff0c;它将正交频分复用&#xff08;OFDM&#xff09;和索引调制&#xff08;IM&#xff09;相结合&#xff0c;以提高频谱效率和系统容量。OFDM-IM索引调制技术的基本思想…

Flink SQL自定义标量函数(Scalar Function)

使用场景&#xff1a; 标量函数即 UDF&#xff0c;⽤于进⼀条数据出⼀条数据的场景。 开发流程&#xff1a; 实现 org.apache.flink.table.functions.ScalarFunction 接⼝实现⼀个或者多个⾃定义的 eval 函数&#xff0c;名称必须叫做 eval&#xff0c;eval ⽅法签名必须是 p…

快速入门安装及使用git与svn的区别常用命令

一、导言 1、什么是svn&#xff1f; SVN是Subversion的简称&#xff0c;是一个集中式版本控制系统。与Git不同&#xff0c;SVN没有分布式的特性。在SVN中&#xff0c;项目的代码仓库位于服务器上&#xff0c;团队成员通过向服务器提交和获取代码来实现版本控制。SVN记录了每个…

Hbuilder打包项目为h5

Hbuilder打包项目为h5 manifest.json 配置 修改 web 配置下的 页面标题、路由模式、运行的基础路径 发行 H5 发行 填入网站标题和网站域名 编译 编译完成之后存放在 unpackage/dist/build/h5 目录下

Day26力扣打卡

打卡记录 搜索旋转排序数组&#xff08;二分&#xff09; 链接 class Solution {int findMin(vector<int> &nums) {int left -1, right nums.size() - 1; // 开区间 (-1, n-1)while (left 1 < right) { // 开区间不为空int mid left (right - left) / 2;if…

医学图像 ABIDE 等数据集 .nii.gz Python格式化显示

nii.gz 文件 .nii.gz 文件通常是医学影像数据的一种常见格式&#xff0c;比如神经影像&#xff08;如脑部MRI&#xff09;。这种文件格式通常是经过gzip压缩的NIfTI格式&#xff08;Neuroimaging Informatics Technology Initiative&#xff09;。 要在Python中查看.nii.gz文…

设备零部件更换ar远程指导系统加强培训效果

随着科技的发展&#xff0c;AR技术已经成为了一种广泛应用的新型技术。AR远程指导系统作为AR技术的一种应用&#xff0c;具有非常广泛的应用前景。 一、应用场景 气象监测AR教学软件适用于多个领域&#xff0c;包括气象、环境、地理等。在教学过程中&#xff0c;软件可以帮助学…

黑客(网络安全)技术——高效自学1.0

前言 前几天发布了一篇 网络安全&#xff08;黑客&#xff09;自学 没想到收到了许多人的私信想要学习网安黑客技术&#xff01;却不知道从哪里开始学起&#xff01;怎么学 今天给大家分享一下&#xff0c;很多人上来就说想学习黑客&#xff0c;但是连方向都没搞清楚就开始学习…

Paimon 与 Spark 的集成(一)

Paimon Apache Paimon (incubating) 是一项流式数据湖存储技术&#xff0c;可以为用户提供高吞吐、低延迟的数据摄入、流式订阅以及实时查询能力。Paimon 采用开放的数据格式和技术理念&#xff0c;可以与 ApacheFlink / Spark / Trino 等诸多业界主流计算引擎进行对接&#xf…

听GPT 讲Rust源代码--library/core/src(2)

题图来自 5 Ways Rust Programming Language Is Used[1] File: rust/library/core/src/iter/adapters/by_ref_sized.rs 在Rust的源代码中&#xff0c;rust/library/core/src/iter/adapters/by_ref_sized.rs 文件实现了 ByRefSized 适配器&#xff0c;该适配器用于创建一个可以以…

在Node.js中,什么是事件发射器(EventEmitter)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

全新Inner-IoU损失函数!!!通过辅助边界框计算IoU有效提升检测效果

摘要 1 简介 2 方法 2.1 边界框回归模式分析 2.2 Inner-IoU 损失 3 实验 3.1 模拟实验 3.2 对比实验 3.2.1 PASCAL VOC上的YOLOv7 3.2.2 YOLOv5 在 AI-TOD 上 4. 参考 摘要 随着检测器的快速发展&#xff0c;边界框回归&#xff08;BBR&#xff09;损失函数不断进…

11月份 四川汽车托运报价已经上线

中国人不骗中国人!! 国庆小长假的高峰期过后 放假综合症的你还没痊愈吧 今天给大家整理了9条最新线路 广州到四川的托运单价便宜到&#x1f4a5; 核算下来不过几毛钱&#x1f4b0; 相比起自驾的漫长和疲惫&#x1f697; 托运不得不说真的很省事 - 赠送保险 很多客户第一次运车 …

多目标优化框架

随着模型越来越复杂&#xff0c;优化目标越来越多&#xff0c;传统算法都慢慢地无法胜任复杂优化任务&#xff0c;更为智能的优化方法也就应运而生了。其中有一类是进化优化算法&#xff0c;这类算法的思想来源是自然界的“优胜劣汰”法则&#xff0c;通过不停地保留好的个体最…

艾默生Emerson EDI需求分析

艾默生Emerson是一家全球领先的工程技术和解决方案提供商。该公司总部位于美国&#xff0c;成立于1890年&#xff0c;经过多年的发展&#xff0c;已经发展成为一个多元化的跨国企业&#xff0c;业务遍及工业、商业和消费者市场。艾默生提供各种产品和服务&#xff0c;包括自动化…

CSS3 过度效果、动画、多列

一、CSS3过度&#xff1a; CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点&#xff0c;必须规定两相内容&#xff1a;指定要添加效果的CSS属性&#xff1b;指定效果的持续时间。如果为指定持续时间&#xff0c;transition将没有任何效果。 <style> div…

Python 的 datetime 模块

目录 简介 一、date类 &#xff08;一&#xff09;date 类属性 &#xff08;二&#xff09;date 类方法 &#xff08;三&#xff09;实例属性 &#xff08;四&#xff09;实例的方法 二、time类 &#xff08;一&#xff09;time 类属性 &#xff08;二&#xff09;tim…