HTML的初步学习

零零..

已于 2024-10-07 17:15:11 修改

阅读量114

点赞数 2

文章标签： html 学习前端

于 2024-10-07 17:12:04 首次发布

本文链接：https://blog.csdn.net/dnfdaniu/article/details/142742656

版权

HTML简介：

HTML指的是超文本标记语言，是用来描述网页的一种语言。可以用它来建立自己的Web站点，HTML运行在浏览器上，由浏览器来解析。

HTML不是一种编程语言，而是一种标记语言，由浏览器来解析。

HTML 结构

一个基本的HTML文档：

<!DOCTYPE html> //声明为HTML5文档，doctype声明是不区分大小写的。
<html lang="zh"> //<html>与</html>之间的文本描述网页。
<head> //<head>与</head>之间的文本描述文档的（meta）元数据。可以包含脚本、样式、meta信息以及其它更多的信息
    <meta charset="UTF-8"> //<meta>标签提供了HTML文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。如<meta charset="utf-8">定义网页编码格式为utf-8。（ <meta> 标签通常位于<head>区域内）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title> //<title>与</title>之间的文本描述文档的标题。（<head> 中必须包含 <title>）
</head>
<body> //<body>与</body>之间的文本是可见的页面内容。
    <h1>欢迎来到我的网页</h1> //<h1>与</h1>之间的文本被显示为一个大标题
    <p>这是我的第一个HTML页面。</p> //<p> 与 </p> 之间的文本被显示为一个段落
</body>
</html>

HTML文档包含了HTML标签及文本内容，也叫做Web页面。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

虽然 Web 浏览器读取 HTML 文件作为网页显示，但并不直接显示 HTML 标签。

HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

后缀名包含.html（最常用）、.htm

<body> 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

常用的HTML编辑器：

Sublime Text：Sublime Text - Text Editing, Done Right

VS Code：Visual Studio Code - Code Editing. Redefined

运行HTML文件：

启动浏览器，选择文件菜单的打开文件命令，或者直接在文件夹中双击HTML文件

常用标签：

标题标签：<h1>到<h6>，用于定义标题的级别。
段落：<p>，用于定义文本段落。
链接：<a href="URL">文本</a>，用于创建超链接。
图片：<img src="图片URL" alt="描述">，用于插入图片。
列表：
分类列表：<ol><li>项目1</li></ol>
无序列表：<ul><li>项目1</li></ul>

标签分类：

单标签：<hr />、<input type="text" />、<!Doctype html>等
双标签：<html></html>、<head></head>、<title></title>等

标签关系：

包含（嵌套）关系：<head> <title></title> </head> 父子关系，<title>嵌套在<head>中<head>为父、<title>为子。
并列关系：<html> <head></head> <body></body> </html> 兄弟姐妹， <head>与<body>并列同级于<html>中，<head>和<body>是兄弟关系。

属性

标签可以有属性，用于提供额外信息。例如，<a>标签的href属性指定链接的目标。

属性是HTML元素提供的附加信息

属性一般描述于开始标签

属性总是以键值对（名称/值）的形式出现，比如：name="value"。

属性值应该始终被包括在引号内，双引号是最常用的，单引号也没问题，但是如果属性值本身就含有双引号，那就必须使用单引号了

<a href="https://www.example.com">访问示例网站</a>

常用属性：

class：为 html 元素定义一个或多个类名（类名从外部样式文件引入或在 HTML 文件的`<style>`标签中定义）

<p class="intro">这是一个段落，定义了一个类名。</p>

<p class="intro color">这是另一个段落定义多个类名。</p>

id：定义元素的唯一 id

<h1 id="header">html</h1>

style：规定元素的内联样式

<!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>
    <img src="https://via.placeholder.com/150" style="border: 2px solid red; width: 150px; height: 150px;" alt="示例图片">
    <p style="border: 1px dashed blue; padding: 10px;">这个段落有一个蓝色的虚线边框。</p>
</body>
</html>

title：规定元素的额外信息（可在工具提示中显示）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title属性示例</title>
</head>
<body>
    <a href="https://www.example.com" title="访问示例网站">点击这里访问示例网站</a>
</body>
</html>