Day45 初识HTML

Day45 初识HTML

文章目录

  • Day45 初识HTML
    • 一、HTML简介
    • 二、HTML运行环境
    • 三、前端开发工作模式
    • 四、HTML基本结构
    • 五、常用的标签
    • 六、锚链接
    • 七、HBuilder下载

一、HTML简介

HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

HTML提供了许多标记,如段落标记p、标题标记 h1-h6、超链接标记 a、图片标记 img等,网页中需要定义什么内容,就用相应的HTML标记描述即可。

理解: 用于前端,展示页面、与用户交互 — HTML

二、HTML运行环境

HTML是一种用于创建网页的标记语言,但它本身并不是一种编程语言,因此不需要像编程语言那样在特定的运行环境中执行。HTML文档在浏览器中被解释和渲染,这意味着浏览器是HTML的主要运行环境。

浏览器解析HTML文档并将其呈现为网页,用户可以通过浏览器访问和与网页交互。不同的浏览器(如Chrome、Firefox、Safari等)可能会有不同的渲染引擎和特性,但它们都支持基本的HTML标记。

三、前端开发工作模式

  1. 需求分析:前端开发人员与产品经理、设计师等合作,了解产品需求,确定网页或应用的功能和设计要求。
  2. 界面设计:根据需求和设计稿,进行界面设计和布局,包括页面结构、样式、交互效果等。
  3. 编码实现:使用HTML、CSS和JavaScript等技术,将设计稿转化为可交互的网页或应用,实现页面布局、样式设计、动态效果等。
  4. 调试测试:进行代码调试、测试和优化,确保页面在不同浏览器和设备上的兼容性和性能表现。
  5. 与后端对接:与后端开发人员合作,实现前后端数据交互和功能的完整实现。
  6. 版本管理:使用版本管理工具(如Git)管理代码,保证团队协作和代码的可追溯性。
  7. 持续学习:跟踪前端技术的发展,不断学习新的技术和工具,提升自身的技术水平。
  8. 项目部署:将开发完成的网页或应用部署到服务器上,确保用户可以访问和使用。

四、HTML基本结构

1、基本结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Page Title</title>
</head>
<body><h1>This is a Heading</h1><p>This is a paragraph.</p>
</body>
</html>

2、结构解析:

  • <html> :HTML文档的根元素,包含整个页面的内容。
  • <head>:包含了页面的元数据(如字符编码、视口设置)和引入的外部资源(如CSS、JavaScript)。
  • <meta>:提供关于HTML文档的元数据,如字符编码和视口设置。
  • <title>:定义网页的标题,在浏览器标签页中显示。
  • <body>:包含了页面的可见内容,如文本、图像、链接等。
  • <h1>:定义标题,h1到h6表示不同级别的标题,h1是最高级别。
  • <p>:定义段落,用于包裹文本内容。

五、常用的标签

1、常用标签:

  1. <html>:定义HTML文档的根元素。
  2. <head>:包含文档的元数据,如标题、引入的样式表和脚本等。
  3. <title>:定义文档的标题,显示在浏览器标签页上。
  4. <body>:包含文档的可见内容。
  5. <h1>-<h6>:定义标题,h1为最高级标题,h6为最低级标题。
  6. <p>:定义段落。
  7. <a>:创建超链接。
  8. <img>:插入图像。
  9. <ul>:定义无序列表。
  10. <ol>:定义有序列表。
  11. <li>:定义列表项。
  12. <div>:定义文档中的块级元素,用于组织内容。
  13. <span>:定义文档中的行内元素,用于设置文本样式。
  14. <table>:定义表格。
  15. <tr>:定义表格行。
  16. <td>:定义表格数据单元格。
  17. <th>:定义表头单元格。
  18. <form>:定义表单。
  19. <input>:定义输入字段。
  20. <button>:定义按钮。

2、无序列表案例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ul type="square" ><li>xxx</li><li>yyy</li><li>zzz</li></ul></body>
</html>

3、有序列表案例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h3>注册流程:</h3><!--ol - 有序列表type - 展示类型(1-阿拉伯数字  a-小写英文字母  A-大写英文字母    i-小写罗马数字    I-大写罗马数字)li - 列表项--><ol type="1"><li>填写基本信息</li><li>绑定银行账号</li><li>绑定手机号</li><li>注册成功</li></ol></body>
</html>

六、锚链接

1、定义: 在HTML中,锚链接(Anchor Link)是一种用于在页面内或跨页面之间创建超链接的方法。通过锚链接,用户可以快速跳转到页面内的特定位置或跳转到其他页面的特定位置

2、示例代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻 </h1><h1>法治新闻 </h1><h1>法治新闻 </h1><h1>法治新闻 </h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

3、代码解析:

在目录中,我们使用``标签的href属性来指向这些锚点,通过在href属性中添加#符号和对应的锚点名称,实现锚链接的创建。点击目录中的链接将会快速跳转到相应的内容部分

通过使用锚链接,可以方便用户在页面内部进行导航和跳转,提升用户体验和页面的可用性。

七、HBuilder下载

官方下载地址:http://www.dcloud.io/

其实eclipse也可以进行这方面的开发工作,只是提示方面做得不太好 。

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

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

相关文章

Django性能之道:缓存应用与优化实战

title: Django性能之道&#xff1a;缓存应用与优化实战 date: 2024/5/11 18:34:22 updated: 2024/5/11 18:34:22 categories: 后端开发 tags: 缓存系统Redis优点Memcached优缺点Django缓存数据库优化性能监控安全实践 引言 在当今的互联网时代&#xff0c;用户对网站和应用…

一个优秀 Maven 项目,各 Model 间最佳继承设计方案

1.单一职责原则 (Single Responsibility Principle): 每个模块应该专注于执行一个清晰且明确定义的功能&#xff0c;遵循单一职责原则&#xff0c;以降低模块的复杂性。 2.高内聚性 (High Cohesion): 模块内的组件和类应该紧密相关&#xff0c;共同实现模块的目标。高内聚性…

java编程-策略模式

需求: 1.机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。 2.机票最终优惠价格的计算方案如下:旺季&#xff08;5-10月&#xff09;头等舱9折&#xff0c;经济舱8.5折&#xff0c;淡季&#xff08;11月到来年4月)头等舱7折&am…

macOS DOSBox 汇编环境搭建

正文 一、安装DOSBox 首先前往DOSBox的官网下载并安装最新版本的DOSBox。 二、下载必备的工具包 在用户目录下新建一个文件夹&#xff0c;比如 dosbox: mkdir dosbox然后下载一些常用的工具。下载好了后&#xff0c;将这些工具解压&#xff0c;重新放在 dosbox 这个文件夹…

【基础绘图】 09.小提琴图

效果图&#xff1a; 主要步骤&#xff1a; 1. 数据准备&#xff1a;生成随机数组 2. 数据处理&#xff1a;计算四分位数、中位数、均值、最大最小值 3. 图像绘制&#xff1a;绘制小提琴图 详细代码&#xff1a;着急的直接拖到最后有完整代码 步骤一&#xff1a;导入库包及…

Redis 6.x的ACL功能

Redis ACL Redis ACL (访问控制列表) 是 Access Control List 的缩写&#xff0c;它允许某些连接在可以执行的命令和可以访问的密钥方面受到限制。它的工作方式是&#xff0c;在连接后&#xff0c;客户端需要提供 username/用户名 和有效 password/密码 来进行 authenticate/身…

作为一名新能源汽车热管理仿真工程师需要具备哪些素养与技能

作为一名新能源汽车热管理仿真工程师&#xff0c;需要具备多方面的素养与技能&#xff0c;才能胜任这一岗位的工作。从工程素养到技术技能&#xff0c;再到沟通能力和团队合作&#xff0c;以下是对这些方面的探讨。 理论知识基础 首先&#xff0c;工程素养是新能源汽车热管理仿…

SQL分库分表

一、介绍 问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈: 1. IO瓶颈:热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘IO&#xff0c;效率较低。…

Python 开发 框架安全:Django SQL注入漏洞测试.(CVE-2021-35042)

什么是 Django 框架 Django 是一个用 Python 编写的 Web 应用程序框架。它提供了许多工具和库&#xff0c;使得开发 Web 应用程序变得更加容易和高效。Django 遵循了“MTV”&#xff08;模型-模板-视图&#xff09;的设计模式&#xff0c;将应用程序的不同组件分离开来&#x…

【图论 回溯 广度优先搜索】126. 单词接龙 II

本文涉及知识点 图论 回溯 深度优先搜索 广度优先搜索 图论知识汇总 LeetCode 126. 单词接龙 II 按字典 wordList 完成从单词 beginWord 到单词 endWord 转化&#xff0c;一个表示此过程的 转换序列 是形式上像 beginWord -> s1 -> s2 -> … -> sk 这样的单词序…

新能源行业网间数据交换,更好用更专业的工具是什么?

新能源行业涵盖了多个方面&#xff0c;包括但不限于新能源汽车、可再生能源技术等。新能源行业发展具有重要的意义&#xff0c;新能源企业的研发数据极其重要&#xff0c;为了保障网络安全和数据安全&#xff0c;许多新能源企业采用逻辑隔离的方式进行网络隔离&#xff0c;此时…

【网络基础】网络层 之 IP协议与分片、网段划分、IP地址分类、子网掩码与路由

文章目录 网络层1. IP协议段格式1.1 分片1.2 *为什么存在分片 / 分片是什么 ?*1.3 *如何理解 / 实现 分片与组装*1.4 深入具体&#xff1a;分片 和 组装 的过程1.5 为什么不推荐 分片 2. 网段划分2.1 举例&#xff1a;国际间通信 && 国家内通信2.2 理解网段划分 3. IP…

[Kubernetes] Istio on Kubernetes 实践

文章目录 1.Kubernetes 创建2.Istio 部署2.1 下载 Istio2.2 安装 Istio 3.Istio on Kubernetes 实践3.1 部署 Bookinfo 示例应用3.2 确定入站 IP 和端口 1.Kubernetes 创建 主机名内部ip外部ipmaster192.168.66.2139.198.36.40node1192.168.66.3139.198.1.192node2192.168.66.…

传输层的端到端的流量控制和网络层的流量控制,有什么区别,他们互补在什么地方

传输层的端到端流量控制和网络层的流量控制在以下几个方面有所区别&#xff0c;并在一定程度上相互补充&#xff1a; 控制对象&#xff1a; 传输层的端到端流量控制主要关注单个会话或连接的流量。它在发送端和接收端之间进行&#xff0c;确保发送方不会发送过多的数据&#xf…

Ps 滤镜:粉笔和炭笔

Ps菜单&#xff1a;滤镜/滤镜库/素描/粉笔和炭笔 Filter Gallery/Sketch/Chalk & Charcoal 粉笔和炭笔 Chalk & Charcoal滤镜可以模拟传统的粉笔和炭笔画风格&#xff0c;通过特定的纹理和线条重绘图像的高光、中间色调和阴影区域。此滤镜非常适合于为数字图像添加手绘…

璩静是为了薅百度羊毛

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 百度副总裁璩静离职了&#xff0c;网传她的年薪是1500万&#xff0c;而璩静在4月24日注册了一个文化传媒公司&#xff0c;大家都认为璩静是在为离职做准备。但松松我认为不是。 我认为&#xff1a;璩静成立新公司是…

[力扣题解]53. 最大子数组和

题目&#xff1a;53. 最大子数组和 思路 贪心法&#xff1b; 从头到尾遍历&#xff0c;对遇见的元素求和&#xff0c;如果和<0&#xff0c;就重新开始&#xff0c;因为前一段是负数&#xff0c;对我们希望的最大的和是没有帮助的&#xff1b; 代码 // 贪心法 // 和<0…

组织机构树形列表实现

源码地址&#xff1a;https://www.lanzouw.com/itjDc1ydraof 本来上传了源码&#xff0c;但是发现只能VIP才能下载&#xff0c;所以重新上传到蓝奏云上了&#xff0c;链接如下&#xff1a; 先看下效果图&#xff1a; 可以自己写HTML来自定义每一项的内容显示&#xff0c;包括…

物联网到底物联了个啥?——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网&#xff0c;这个听起来似乎颇具科技感和未来感的词汇&#xff0c;其实早已悄然渗透到我们生活的方方面面。从智能家居到智慧城市&#xff0c;从工业自动化到医疗健康&#xff0c;物联网技术正在以其独特的魅力改变着我们的生活方式…

2024.04.30校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招&实习 | 零跑汽车校园招聘 - 三电研发专场&#xff08;内推&#xff09; 校招&实习 | 零跑汽车校园招聘 - 三电研发专场&#xff08;内推&#xff09; 2、校招丨海尔智家2…