基础小白快速入门web前端开发技术----------->htm基础

HTML的文档结构


HTML 文档以<html>标记开始,以</html>标记结束

文档类型声明(Doctype):告知浏览器正在使用哪个HTML版本

<!DOCTYPE html>

根元素(Root element):通常是<html>元素,包裹着整个页面的所有内容

<html>

头部(Head):包含元信息和其他一些与页面内容不直接相关的信息。


元数据(Metadata):如字符编码声明、页面描述、关键词、作者等。
样式(Styles):通过<link>元素引入CSS文件或内联样式。
脚本(Scripts):通过<script>元素引入JavaScript文件或内联脚本。

<head><meta charset="UTF-8"><meta name="description" content="页面描述"><title>页面标题</title><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>

身体(Body):包含可见的页面内容,如文本、图片、视频、游戏、可播放的音频等

<body><!-- 页面内容 -->
</body>

注释(Comments):对代码进行解释和说明,浏览器会忽略注释。
 

<!-- 这是一个注释 -->

一个简单的HTML文档结构如下所示:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例页面</title>
</head>
<body><h1>欢迎来到我的网页</h1><p>这是一个段落。</p><img src="image.jpg" alt="描述图片内容">
</body>
</html>

head中的title


基本语法

<title>标记信息显示在浏览器的标题栏中</title>

<title>是开始标记,</title>是结束标记,两者之间内容为显示在浏览器的标题栏信息

meta  元信息  类似于网页的属性

Meta 不会直接显示在网页上,但用来解析浏览器网页

Meta属性分为两组:

name属性

content属性

name属性是名称

content属性是分类

属性说明
name

author

description

keywords

generator

定义网页作者

定义网页简短描述

定义网页关键词

定义编辑器

http-equiv

content-type

expires

refresh

set-cookie

内容管理

内容缓存过期时间

刷新与跳转

网页过期删除cookie

contentsome_text定义与http-equiv或name属性相关的元信息
说明
all文件将被检索,且页面上的链接可以被查询
none文件将不被检索,且页面上的链接不可以被查询
index文件将被检索
noindex文件将不被检索,且页面上的链接可以被查询
follow页面上的链接可以被查询
nofollow文件将被检索,但页面的链接不可以被查询

主体body


<body>开始标记

</body>结束标记

主体,网页的中间部分

是网页结构的主要骨架

body标记属性

设置body标技属性可以改变页面的显示效果,该标记主要属性有topmargin,leftmargin,text,bgcolor,background,link,alink,vlink

html是网页开发中的基本骨架,但由于刚开始的时候没有基础的规范,所以引进了css css能够让网页更加具可观赏性通俗来讲就是变得更加好看,并且代码还会很有规范

属性说明
text

rab(r,g,b)

rgb(r%,g%,b%)

#rrggbb 

#rgb

colorname

rgb函数(整数),r,g,b取值范围0——255

rgb函数(百分比)r,g,b取值氛围0-100

十六进制数据,取值范围0-9 A-F,可转换为#33FF00

颜色英文,red  green...

bgcolor同上背景颜色
alink同上链接颜色
link同上未访问链接的默认颜色
vlink同上已经被访问的链接颜色
backgroundurl背景图像
topmarginpixel上边距大小
leftmarginpixel左边距大小

htmlyufa

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

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

相关文章

java入门 - 规范你的代码注释

java基础语法-代码注释 注释只是为了提高可读性&#xff0c;不会被计算机编译。代码注释是架起程序设计者与程序阅读者之间的通信桥梁,最大限度的提高团队开发合作效率。也是程序代码可维护性的重要环节之一。 开发中注释可以分为三种方式&#xff1a; 行注释块注释类/方法注释…

Linux 大页内存 Huge Pages 虚拟内存

Linux 大页内存 Huge Pages 虚拟内存 - 秋来叶黄 - 博客园 (cnblogs.com) Linux为什么要有大页内存&#xff1f;为什么DPDK必须要设置大页内存&#xff1f;这都是由系统架构决定的。一开始为了解决一个问题&#xff0c;设计了对应的方案&#xff0c;随着事物的发展&#xff0c…

汽车信息安全--安全调试功能在量产后是否必须禁用(1)

目录 1.芯片生命周期与调试接口 2. 安全调试安全在哪里 2.1 常见安全调试解锁手段

Splitpanes拆分窗格插件使用

目录 基本用法 纵向排列 遍历渲染 动态拆分宽度 项目开发中用到了拆分窗格(就是下面的效果&#xff0c;可以拆分网页&#xff0c;我们项目通常都是用左右两块拆分&#xff0c;可以通过拖动图标进行左右拖动)&#xff0c;于是就发现了一个很好用的插件&#xff1a;Splitpane…

上位机图像处理和嵌入式模块部署(qmacvisual畸变矫正)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 大部分同学在开始做计算机图像的时候&#xff0c;是没有意识到畸变矫正这个问题的。当然不仅仅是畸变矫正&#xff0c;很多同学还会忽略光源的问题…

python异常:Exception、BaseException接收异常,并打印异常信息msg

except IOEerror 只能接收到 IO 类型的错误&#xff0c;对于抛出的 NameError 类型的错误&#xff0c;在 Python 中所有的异常类都继承 Exception&#xff0c;所以我们可以使用它来接收所有的异常。 1.Exception接收异常 源码&#xff1a; open("test1.py",r) pr…

Qt散文一

Qt的事件分为普通事件和系统事件&#xff0c;普通事件比如用户按下键盘&#xff0c;系统事件比如定时器事件。事件循环的开始是从main函数的QApplication&#xff0c;然后调用exec()开始的&#xff0c;在执行exec()函数之后&#xff0c;程序将进入事件循环来监听应用程序的事件…

4款智能文章生成器推荐,为你创作文章效率高

智能文章生成器的出现为创作者带来了很多方便&#xff0c;尤其是在当今信息爆炸的时代&#xff0c;内容创作已经成为许多人日常工作中不可或缺的一部分。无论是博客、新闻报道、营销文案还是学术论文&#xff0c;高质量的文章往往需要耗费大量的时间和精力来撰写。但有了智能文…

LLM(大语言模型)常用评测指标-困惑度(Perplexity)

困惑度&#xff08;Perplexity&#xff09; 是自然语言处理&#xff08;NLP&#xff09;中常用的一种评估语言模型的指标。它衡量的是模型对测试数据的预测能力&#xff0c;即模型对测试集中单词序列出现概率的预测准确度。困惑度越低&#xff0c;表示模型对数据的预测越准确。…

固态硬盘格式化后怎么恢复 固态硬盘被格式化后如何恢复

你知道吗,固态硬盘被格式化后,还有一线生机可以让你把数据找回来!固态硬盘被格式化后如何恢复?不要慌张,我们来一步一步地看看该怎么做。首先,你需要知道格式化并不是真正意义上的删除数据,而是把硬盘上的文件系统清空,让数据变得不可见。所以,只要你没有在格式化后往…

Linux —— 定时任务(sleep、crontab、at)

目录 1、使用 sleep 来完成定时任务 2、使用 crontab 来进行定时任务 3、使用 at 来执行单次的定时任务 1、使用 sleep 来完成定时任务 sleep n 等待 n 秒再继续往后执行 usleep n 等待 n 微秒再继续往后执行&#xff08;1 秒等于 1 000 000 微秒&#xf…

uniapp使用Echarts图表H5显示正常 打包app显示异常

uniapp使用Echarts在H5页面调试 调试完在H5正常显示 然后通过安卓机调试的时候 发现直接空白了 还有这个爆错 Initialize failed: invalid dom 我有多个图表、图表是通过v-for循环出来的 解决方案 原来是yarn直接安装Echarts 然后改成本地JS文件引入 gitbub文件地址 — dist/…

二十几岁的我们:在旷野中找寻自我

二十几岁&#xff0c;这是一个充满变数、充满机遇和挑战的年纪。它如同一片辽阔的旷野&#xff0c;每个人都在其中寻找自己的方向&#xff0c;摸索着自己的道路。这是一个既令人兴奋又令人迷茫的年纪&#xff0c;我们穿着不同的鞋子&#xff0c;注定要走不同的路。 在这个年纪里…

MySQL表字段数据类型设计建议

MySQL表字段数据类型设计建议 前言阿里巴巴Mysql字段类型规范一、数值类型二、日期和时间类型三、字符串类型四、IP存储总结 前言 最新的 Java 面试题&#xff0c;技术栈涉及 Java 基础、集合、多线程、Mysql、分布式、Spring全家桶、MyBatis、Dubbo、缓存、消息队列、Linux……

面向对象(下)

目录 01、static1.1、static的使用1.2、static应用举例1.3、单例(Singleton)设计模式 02、main方法的语法03、类的成员之四&#xff1a;代码块04、关键字&#xff1a;final05、抽象类与抽象方法5.1、多态的应用&#xff1a;模板方法设计模式(TemplateMethod) 06、接口(interfac…

redis中setnx命令的底层原理是什么

该命令的含义是set if not exists,Redis是单线程的&#xff0c;所有的命令都是串行执行的。而且Redis的SETNX操作是原子的&#xff0c;即使有大量的线程同时发送SETNX命令&#xff0c;Redis也会一个接一个地执行这些命令。也就是说&#xff0c;即使有多个线程同时使用SETNX尝试…

直接码住!引流四大关键要素一定要知道!

在当今流量盛行的时代&#xff0c;要想做好引流工作&#xff0c;就必须了解并掌握引流的四大关键要素&#xff0c;接下来就一起来看看这四大要素分别是什么吧&#xff01; 1、渠道 选择合适的引流渠道是引流工作中至关重要的一环。不同的产品或服务适合的渠道可能会有所不同&…

(九)Android布局类型(约束布局ConstraintLayout)

约束布局&#xff08;ConstraintLayout&#xff09;与相对布局差不多&#xff0c;是创建一个应用后默认的布局方式&#xff0c;比相对布局更加灵活&#xff0c;一般用于平铺的布局&#xff08;不适用于层叠布局&#xff09;&#xff0c;常用于托拖拽方式构建页面&#xff0c;最…

第五篇:数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第五篇&#xff1a;第五篇&#xff1a;数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南 --- 我为什么要翻译介绍美国人工智能科技公司IAB系列技术标准&#xff08;2&#xff09; ​​​​​​​翻译计划 第一篇序言第二篇简介和目录第三篇概述- IA…

由浅到深认识C语言(2):C语言的类型及语句

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…