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标记。

三、前端开发工作模式

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

四、HTML基本结构

1、基本结构：

html"><!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、常用标签：

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

2、无序列表案例：

html"><!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、有序列表案例：

html"><!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、示例代码：

html"><!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>