编程笔记 html5cssjs 004 我的第一个页面

编程笔记 html5&css&js 004 我的第一个页面

  • 一、基本结构
  • 二、HTML标签
  • 三、HTML元素
  • 四、HTML属性
  • 五、编写第一个网页
  • 六、使用VSCODE
  • 小结

开始编写网页,并且使用第一个网页成为一个母板,用于完成后续内容的学习。有一个基本要求,显示结果时不能一个白色背景的窗口,伤眼,不美观。

一、基本结构

前文说了,网页编程,实际是和浏览器的一个约定。也就是说你做的东西不满足浏览器的要求是不会被展现的。首先就是约定了一个网页文档的基本结构。

<!DOCTYPE html>
<html>
<head><title>我的网页</title><meta charset="utf-8">
</head>
<body><h1>标题一:hello html5</h1><p>段落一:hello html5.</p>
</body>
</html>

所有的HTML文档必须以 开始。
所有HTML文档本身以 开始以 结尾。
HTML文档的看见部分以 开始以 结尾。
这就是最基本的约定。

二、HTML标签

HTML标签是一种用于描述网页结构和呈现方式的标记语言。HTML标签以尖括号包围,并且通常是成对出现的,包括一个开始标签和一个结束标签。开始标签用于指示元素的开始,并且可能包含一些属性;结束标签用于指示元素的结束。
HTML标签用于定义网页中的不同元素,例如标题、段落、链接、图片等。每个元素通过HTML标签来定义其类型和属性。
例如,<h1>是定义网页标题的HTML标签,<p>是定义段落的HTML标签,<a>是定义链接的HTML标签,<img>是定义图片的HTML标签。通过正确使用HTML标签,可以组织和呈现网页内容。

三、HTML元素

HTML元素是由开始标签、结束标签和它们之间的内容组成的。HTML元素用于创建网页中的各种结构和内容。

一个HTML元素由以下几部分组成:

  • 开始标签:以尖括号包围,用于指示元素的开始。开始标签可以包含一些属性来定义元素的特征。
  • 结束标签:以尖括号包围,加上一个斜杠,用于指示元素的结束。
  • 内容:位于开始标签和结束标签之间的部分,用于定义元素的具体内容。

例如,以下是一个简单的HTML段落元素:

<p>这是一个段落。</p>

其中,<p>是开始标签,</p>是结束标签,"这是一个段落。"是段落元素的内容。在浏览器中呈现时,该段落元素将显示为一个段落。
通过使用不同的HTML元素和属性,可以构建出复杂的网页结构和呈现效果。
编写网页,首先就是学会运行种标签,构造HTML元素。

四、HTML属性

属性为 HTML 元素提供附加信息。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name=“value”。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 标签定义。链接的地址在 href 属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name=‘Bill “HelloWorld” Gates’

常见的HTML属性包括:
id:为元素指定唯一的标识符。
class:为元素指定一个或多个类。
style:为元素指定CSS样式。
href:用于超链接元素,指定链接的目标URL。
src:用于图像、音频、视频等元素,指定媒体的来源URL。
alt:用于图像元素,指定图像的替代文本。
title:为元素指定鼠标悬停时显示的文本。
value:用于表单元素,指定元素的初始值。
disabled:用于表单元素,禁用元素的交互功能。
readonly:用于文本输入框等表单元素,指定元素只读。
placeholder:用于文本输入框等表单元素,指定输入提示文本。
checked:用于复选框和单选框,指定默认选中状态。
required:用于表单元素,指定必填字段。
此外,还有许多其他属性,如data属性、event属性等,可以根据具体情况进行使用。

五、编写第一个网页

使网页背景不是一片白的办法:

  1. 使用浏览器插件,如Dark Reader。
  2. 加背景图片。
  3. 加标签属性。(不一定好使)
  4. 加CSS样式。
    我们使用加样式的方法。
<!DOCTYPE html>
<html><head><title>我的第一个网页</title><meta charset="utf-8"><style>body {background: color black;}</style>
</head>
<h1>这是我的第一个页面,也是一个母板</h1>
<p>这是一个段落内容</p><body>
</body></html>

运行结果:
在这里插入图片描述

六、使用VSCODE

以下是使用VS Code编写和调试网页的一些步骤,不够用自己再查一下:

  1. 安装VS Code:首先,确保你已经在你的计算机上安装了VS Code。你可以从VS Code的官方网站(https://code.visualstudio.com/)下载适合你操作系统的版本,并按照指示进行安装。
  2. 安装必要的插件:VS Code有很多插件可以帮助你编写和调试网页。以下是一些常用的插件:
    • HTML插件:用于提供HTML语法高亮、代码补全和代码片段等功能。
    • CSS插件:用于提供CSS语法高亮、代码补全和代码片段等功能。
    • JavaScript插件:用于提供JavaScript语法高亮、代码补全和代码片段等功能。
    • Live Server插件:提供一个本地服务器,用于实时预览你的网页。
    • Debugger for Chrome插件:用于与Chrome浏览器进行调试。
      你可以在VS Code的插件商店(https://marketplace.visualstudio.com/)中搜索并安装这些插件。
  3. 创建网页项目:在VS Code中创建一个新的文件夹来存放你的网页文件。然后,在该文件夹中创建一个名为index.html的文件,并在该文件中编写你的HTML代码。
  4. 实时预览网页:在VS Code的侧边栏中找到Live Server插件,然后点击右上角的“Go Live”按钮。这将启动一个本地服务器,并在浏览器中打开你的网页。现在,你可以在VS Code中进行代码编辑,并在浏览器中实时预览你的更改。
  5. 调试网页:在VS Code中打开你的网页文件(index.html),然后按下F5键或点击菜单栏中的调试按钮。在调试面板中,选择“Chrome”作为调试目标,并点击“创建一个启动配置文件”按钮。然后,按照提示配置调试器,并点击“开始调试”按钮。此时,VS Code将与Chrome浏览器建立连接,并在浏览器中打开你的网页。你可以使用VS Code的调试工具来设置断点、逐行调试代码等。

输入并执行上述代码。

小结

这里我们就开始了网页编写的历程,本人认为这是一个人人应当具备的技能。

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

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

相关文章

二叉树数据结构:深入了解二叉树的概念、特性与结构

在探索栈和队列之后&#xff08;大家可以移步至我的数据结构专栏&#xff09;&#xff1a;T-rLN的数据结构专栏 我们转向了更为复杂而有趣的数据结构——二叉树。本文将引领我们进入二叉树的世界&#xff0c;从最基本的概念和结构开始&#xff0c;逐步深入了解二叉树的顺序结构…

C语言停车场模型详解

C语言停车场模型详解 1. 引言2. 代码概述3. 代码详解3.1 定义常量和数据结构3.2 初始化车库3.3 查找车辆所在车库3.4 查找车辆所在的车位3.5 打印车库状态3.6 打印等候车辆3.7 车辆入库3.8 车辆出库3.9 菜单功能3.10 主函数 5.效果展示5.完整代码6. 总结 1. 引言 本文将介绍一…

hyper-v ubuntu 3节点 k8s集群搭建

前奏 搭建一主二从的k8s集群&#xff0c;如图所示&#xff0c;准备3台虚拟机。 不会创建的同学&#xff0c;可以看我上上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135086252 和上篇博客&#xff1a;https://blog.csdn.net/dawnto/article/details/135…

(04730)半导体器件之基本放大器工作原理(三)

本文主要阐述多级与差动放大器 为使输入的微弱信号进行放大后能获得足够的输出功率去推动负载运行&#xff0c;往往要采用所谓的多级放大电路&#xff0c;信号逐级通过放大&#xff0c;直至得到输出信号。这就必须考虑放大电路级与级之间的信号传递方法&#xff0c;或者称为耦…

微软官方系统镜像安装U盘制作

https://www.microsoft.com/zh-cn/software-download/windows11https://www.microsoft.com/zh-cn/software-download/windows10工具下载地址 #win10 https://download.microsoft.com/download/b/0/5/b053c6bc-fc07-4785-a66a-63c5aeb715a9/MediaCreationTool21H2.exehttps://d…

GC控制器(Garbagecollector)源码解析

KubeController Garbagecollector 本文从源码的角度分析KubeController Garbagecollector相关功能的实现。 本篇kubernetes版本为v1.27.3。 kubernetes项目地址: https://github.com/kubernetes/kubernetes controller命令main入口: cmd/kube-controller-manager/controller-…

k8s的网络类型

部署 CNI 网络组件 部署 flannel K8S 中 Pod 网络通信&#xff1a; ●Pod 内容器与容器之间的通信 在同一个 Pod 内的容器&#xff08;Pod 内的容器是不会跨宿主机的&#xff09;共享同一个网络命名空间&#xff0c; 相当于它们在同一台机器上一样&#xff0c;可以用 localho…

internet download manager 6.42怎么删除卸载,2024最新idm卸载不干净怎么解决

internet download manager 6.42简称为IDM&#xff0c;这是一款非常好用的下载软件&#xff0c;很多小伙伴都在使用。如果后续我们不再需要使用该软件&#xff0c;小伙伴们知道具体该如何将其卸载掉吗&#xff0c;其实卸载方法是非常简单的&#xff0c;只需要进行几个非常简单的…

Qt+Opencv:模板匹配

一、模板匹配应用场景闲聊 在很多机器视觉的应用场景都有用到模板匹配的功能&#xff0c;常常用来判断是否有目标检测对象&#xff0c;以及检测对象在图像中的位置。譬如在AOI检测软件中&#xff0c;通过拍摄Mark点的图像&#xff0c;进行mark模板的匹配&#xff0c;从而进行晶…

【Java EE初阶三 】线程的状态与安全(上)

1. join方法与多线程 1.1 初识多线程 为了提高cpu得利用率&#xff0c;因此就引入了多个线程的概念&#xff1b;即每个线程负责完成整个程序的一部分工作即可。 写一个代码&#xff0c;让主线程&#xff0c;创建一个新的线程&#xff0c;由新线程负责完成运算&#xff08;12。…

数模学习day01-层次分析法模型

已经一个多月没有更新过文章了&#xff0c;为了保住那绩点的意思微弱的优势&#xff0c;直接开摆&#xff0c;开始复习专业课和公共课考试了&#xff0c;结果虽然有遗憾但是还是算不错&#xff0c;至少没有掉到3.xx嘿嘿。 然后现在就要开始学习数学建模和算法同步了。接下来的文…

element ui Checkbox 多选框组件 lable不支持Object类型的值的问题

浅浅记录一下&#xff0c;遇到这个问题的心理路程吧&#xff0c;首先我遇到的问题是多选框的值回显不打对勾&#xff0c;&#xff08;例如&#xff1a;你新增的时候多选&#xff0c;然后点击编辑的时候选过的值没有被勾选&#xff0c;其实是被勾选上了&#xff0c;但是没有显示…

Ubuntu中fdisk磁盘分区并挂载、扩容逻辑卷

Ubuntu中fdisk磁盘分区并挂载、扩容逻辑卷 一&#xff1a;fdisk磁盘分区并挂载1.查看磁盘分区信息2.分区3.强制系统重新读取分区(避免重启系统)4.格式化分区5.创建挂载目录6.设置开机自动挂载&#xff1a;7.验证并自动挂载(执行了该命令不需要重启系统)8.查看挂载007.异常情况处…

Zulip:开源团队协作工具,高效沟通与远程办公 | 开源日报 No.126

zulip/zulip Stars: 18.9k License: Apache-2.0 Zulip 是一个开源的团队协作工具&#xff0c;拥有独特的基于主题的线程功能&#xff0c;结合了电子邮件和聊天的优点&#xff0c;使远程工作更加高效和愉快。它是唯一设计用于实时和异步对话的现代团队聊天应用程序。 其核心优势…

【线性代数】通过矩阵乘法得到的线性方程组和原来的线性方程组同解吗?

一、通过矩阵乘法得到的线性方程组和原来的线性方程组同解吗&#xff1f; 如果你进行的矩阵乘法涉及一个线性方程组 Ax b&#xff0c;并且你乘以一个可逆矩阵 M&#xff0c;且产生新的方程组 M(Ax) Mb&#xff0c;那么这两个系统是等价的&#xff1b;它们具有相同的解集。这…

RabbitMq知识概述

本文来说下RabbitMq相关的知识与概念 文章目录 概述AMQP协议Exchange 消息如何保证100&#xff05;投递什么是生产端的可靠性投递可靠性投递保障方案 消息幂等性高并发的情况下如何避免消息重复消费confirm 确认消息、Return返回消息如何实现confirm确认消息return消息机制 消费…

《数据库开发实践》之存储过程【知识点罗列+例题演练】

一、什么是存储过程&#xff1f; 1.概念理解&#xff1a; 存储过程是一组为了完成特定功能的SQL语句集。通过组成SQL语句和控制语句&#xff0c;提供一种封装任务的方法。因此在创建编译好某个存储过程后&#xff0c;因为存储过程中有可执行操作的sql语句&#xff0c;用户可以…

表单(HTML)

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>个人信息</title></head><body><h1>个人信息</h1><form><fieldset><legend>基本信息</legend><label for"…

【机组期末速成】计算机的运算方法|进制转换|无符号数与有符号数|数的定点表示与浮点表示|定点运算

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;计算机组成原理&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 一、本章考点总览 二、考点分析 1、日常我们采用十进制来表示数据&#xff0c;计算机如何表示&#xf…

PolarNet: 一种改进的时实激光雷达点云语义分割网格表示方法

PolarNet介绍 github工程代码&#xff1a;https://github.com/edwardzhou130/PolarSeg 点云语义分割在自动驾驶领域的感知模块占据重要地位, 从多年前基于传统的点云聚类和分割,到近些年基于深度学习的点云语义分割方法, 技术逐渐成熟已经进入实时端到端的阶段. 前有基于球面…