Wed前端--HTML基础

目录

一、开发工具

二、HTML文档结构 

 2.1头部head

2.1.1title标记

2.1.2元信息meta标记

具体实例

​编辑


一、开发工具

最基础的开发工具是:HBuilder

二、HTML文档结构 

HTML文档由头部head和主体body组成

头部head标记中可以定义标题样式,头部信息不显示在网页上;

主体body 标记中可以定义段落,标题字,超链接,脚本,表格,表单

HTML文档的基本结构如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

 2.1头部head

头部head标记主要包含页面标题标记,元信息标记,样式标记,脚本标记,链接标记

头部标记所包含的信息不会展示在网页上。

2.1.1title标记

语法说明

<title>是开始标记

</title>是结束标记

两者之间内容显示在浏览器的标题栏上

例如:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body></body>
</html>

2.1.2元信息meta标记

 meta标记用来描述一个HTML网页文档属性,也称为元信息,这些信息不会显示在浏览器页面中,例如:作者,日期,时间

基本语法

			<meta name=""content="" ><meta http-equiv=""content="">

name属性用于描述网页,它是“名称/值”形式中的名称,name属性的值所描述的内容通过content属性表示,便于搜索引擎机器人查找,分类,其中最重要的是description、keywords、 robots

http-equiv属性用于提供HTTP协议的响应头报文,它回应给浏览器一些有用的信息,以帮助浏览器正确精准的显示网页内容,http-equiv属性的值所描述的内容通过content属性表示

meta标记的属性、取值如下所示

具体实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>传统美德故事:铁杵磨成针</title><style type="text/css">div{text-align: center;}p{text-align: left;text-indent:2em;margin: 3px ;}strong,em(color:red;)</style>	</head><body bgcolor="#FEFEFE" leftmargin="100px"rightmargin="100px"><h2 align="center">传统美德故事:铁杵磨成针</h2><hr size="1"color="red"width="100%" /><div id="class="><img src="R-C.jpg" /><p>唐朝大诗人李白,小时候不喜欢读书。一天,乘老师不在屋,悄悄溜出门去玩儿。他来到山下小河边,见一位老婆婆,在石头上磨一根铁杵。李白很纳闷,上前问:“老婆婆,您磨铁杵做什么?”老婆婆说:“我在磨针。”李白吃惊地问:“哎呀!铁杵这么粗大,怎样能磨成针呢?”老婆婆笑呵呵地说:“只要天天磨铁杵总能越磨越细,还怕磨不成针吗?” </p><p>聪明的李白听后,想到自己,心中惭愧,转身跑回了书屋。从此,他牢记<strong>“只要功夫深,铁杵磨成针”</strong>的道理,发奋读书,最后成为有名的大诗人。</p>“书山有路勤为径,学海无涯苦作舟”   中华民族自强不息的精神,在勤奋读书方面表现得格外突出。不论是善于治国的政治家,还是胸怀韬略的军事家;不论是思维敏捷的思想家,还是智慧超群的科学家,他们之所以在事业上不同凡响,都是与他们从小的远大抱负分不开的。俗话说:“有志者立常志,无志者常立志”,立志,贵在少年。 </p><hr size="1" color="red" width="100%" /></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初始C++模板

1.泛型编程 1.1什么事泛型编程 在学习C语言时&#xff0c;我们时常会有这样的烦恼&#xff1a; 在针对每一种不同的类型变量进行函数传参或者是运算处理时&#xff0c;我们总是编写不同的函数或者是进行不同的处理&#xff0c;才能达到目的&#xff0c;这时&#xff0c;我们…

(undone) 阅读 MapReduce 论文笔记

参考&#xff1a;https://pdos.csail.mit.edu/6.824/papers/mapreduce.pdf 摘要&#xff1a;简单介绍了 MapReduce 是在大型分布式系统上工作的 Introduction 的内容总结&#xff1a; 1.介绍背景&#xff1a;为什么我们需要分布式系统&#xff1f;MapReduce 的意义是哪些 2.简…

2024.9.26C++作业

1. 什么是虚函数&#xff0c;什么是纯虚函数&#xff1f; 1.虚函数在基类中声明&#xff0c;使用virtual关键字修饰成员函数&#xff0c;并且允许在派生类中重写。 2.在运行时&#xff0c;允许基类指针或者引用调用这个函数时&#xff0c;根据实际对象类型调用派生类&#xff…

大数据新视界 --大数据大厂之数据清洗工具 OpenRefine 实战:清理与转换数据

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

尚硅谷vue3+TypeScript笔记大全

源码及视频&#xff1a;通过百度网盘分享的文件&#xff1a;尚硅谷vue3 链接&#xff1a;https://pan.baidu.com/s/19zVM5Xsr1UP7tZ4D0mhVqA?pwdgmta 提取码&#xff1a;gmta 1. Vue3简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piec…

Qualcomm AI Hub模型优化1: Whisper-Base-En导出及问题解决

1 从Qualcomm AI Hub Module中选择Whisper-Base-En模块部署 1.1 进入module虚拟环境 python3 -m venv qai_hub_models_env && source qai_hub_models_env/bin/activate1.2 使用pip安装高通音频转录包 pip install "qai_hub_models[whisper_base_en]" 1.3…

人工智能对话系统/AI助理/PC/公众号/h5/小程序

>>>系统简述&#xff1a; GPTCMS基于TP6UniappVUE3开发&#xff0c;已集成文心一言、灵犀星火、ChatGLM&#xff08;清华旗下&#xff09;、讯飞星火&#xff08;即将&#xff09;、api2d、意间AI、ChatGPT、GPT3.5、GPT4、Stable Diffusion、MidJourney-V4、MidJour…

基于Python大数据可视化的民族服饰数据分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

第十届蓝桥杯嵌入式省赛程序设计题解析(基于HAL库)

一.题目分析 &#xff08;1&#xff09;.题目 &#xff08;2&#xff09;.题目分析 1.参考配置界面 注意上限和下限的调整&#xff0c;上限值必须大于下限值&#xff0c;低于下限LD2会闪烁&#xff0c;低于上限LD1会闪烁 2.按键功能分析 B1&#xff1a;显示界面和设置界面相互切…

Java IO 和 NIO

在 Java 编程中&#xff0c;输入输出&#xff08;IO&#xff09;是不可或缺的部分&#xff0c;随着技术的发展&#xff0c;Java 的 IO 系统也经历了显著的变化。本文将深入探讨 Java IO 和 NIO 的历史、优缺点以及适用场景。 1. Java IO 的历史 Java IO 包&#xff08;java.i…

Solidity智能合约中的异常处理(error、require 和 assert)

Solidity 中的三种抛出异常方法&#xff1a;error、require 和 assert 在 Solidity 开发中&#xff0c;异常处理是确保智能合约安全性和正确性的关键步骤。Solidity 提供了三种主要方法来抛出异常&#xff1a;error、require 和 assert。本文将详细介绍这三种方法的用途、实现方…

nginx+keepalived健康检查案例详解(解决nginx出现故障却不能快速切换到备份服务器的问题)

文章目录 简介配置过程前置环境请看创建健康检查脚本结果测试 简介 在我们通过nginxkeepalived实现高可用后&#xff0c;会发现nginx出现故障的时候keepalived并不会将虚拟ip切换到备份服务器上其原理就是nginx和keepalived是两个独立的服务&#xff0c;Nginx的故障状态不会触…

使用Docker-Compose部署SpringBoot项目的案例

Docker-Compose是Docker官方的一个开源项目&#xff0c;主要用于实现对Docker容器集群的快速编排和管理。该项目由Python编写&#xff0c;通过调用Docker服务提供的API来管理容器。只要所操作的平台支持Docker API&#xff0c;就可以利用Docker-Compose进行编排管理。Docker-Co…

【微服务即时通讯系统】——brpc远程过程调用、百度开源的RPC框架、brpc的介绍、brpc的安装、brpc使用和功能测试

文章目录 brpc1. brpc的介绍1.1 rpc的介绍1.2 rpc的原理1.3 grpc和brpc 2. brpc的安装3. brpc使用3.1 brpc接口介绍 4. brpc使用测试4.1 brpc同步和异步调用 brpc 1. brpc的介绍 1.1 rpc的介绍 RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用&#xff0c;是一…

X86下一文带你构建Apollo9.0运行环境(基于Ubuntu20.04避坑版)

X86下一文带你构建Apollo9.0运行环境基于Ubuntu20.04避坑版 前言准备安装基础软件1.安装Docker19.03安装Nvidia驱动安装配置Nvidia container toolkit 下载Apollo源码&#xff08;笔者下载的是releases下9.0.0版本&#xff0c;大家可以参考&#xff09;编译Apollo9.0下载资源包…

如何使用GitHub Desktop管理GitLab库

不管是新手还是老手&#xff0c;Github Desktop都是在苹果系统和Windows系统上管理与创建项目的不错的方式&#xff0c;GitHub Desktop都能够让在GitHub上的工作流更为简单快捷。 注意&#xff0c;以下步骤只支持原版的GitHub Desktop 第一步 从这下载GitHub Desktop打开你的G…

【hot100-java】【柱状图中最大的矩形】

R9-栈篇 面积最大矩形的高度一定是 heights 中的元素 简单解释&#xff0c;就是说&#xff0c;最大高度必然是heights中的一个元素&#xff0c;我们假设是h&#xff0c;然后我们基于h&#xff0c;左右拓展&#xff0c;尽量拓展到h越来越高&#xff08;符合单调栈&#xff09;&a…

手机改IP地址怎么弄?全面解析与操作指南

在当今数字化时代&#xff0c;IP地址作为设备在网络中的唯一标识&#xff0c;其重要性不言而喻。有时候&#xff0c;出于隐私保护、网络访问需求或其他特定原因&#xff0c;我们可能需要更改手机的IP地址。然而&#xff0c;对于大多数普通用户来说&#xff0c;如何操作可能还是…

Redis 篇-深入了解 Redis 中的 RESP 通信协议与内存回收(过期 key 处理、内存淘汰策略)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Redis 通信协议 - RESP 协议 2.0 Redis 内存回收 2.1 Redis 内存回收 - 过期 key 处理 2.1.1 Redis 是如何知道一个 Key 是否过期呢&#xff1f; 2.1.2 是不是 TT…

Linux基础(三):安装CentOS7(系统安装+桥接联网+换源)

1.分区设置 由于使用 GPT 的关系&#xff0c; 因此根本无须考虑主/延伸/逻辑分区的差异。CentOS 默认使用 LVM 的方式来管理你的文件系统。使用GPT进行分区&#xff1a; 开机管理程序&#xff08; boot loader&#xff09; 使用CentOS 7.x默认的grub2软件。 2.各种分区格式 …