十分钟学会html超文本标记语言

Blankspace学

已于 2024-11-14 23:45:15 修改

阅读量619

点赞数 8

文章标签： html 前端

于 2024-11-14 23:13:39 首次发布

本文链接：https://blog.youkuaiyun.com/w916917913/article/details/143782811

版权

前言

本次学习的是在b站up主泷羽sec课程有感而发，如涉及侵权马上删除文章。
笔记的只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。
！！注意：蓝色点击均可进入相关对应网站。

文章目录

前言
一、html基础
总结

一、html基础

HTML（HyperTextMarkupLanguage超文本标记语言，一种标记语言，不是一种编程语言）是用来描述网页的一种语言，使用标记标签来描述网页

1、HTML基本结构概述

HTML网页有一个标准结构，主要由以下几个关键部分组成：
文档类型声明、HTML根元素、头部（head）和主体（body）部分。
这种结构为浏览器解析和显示网页内容提供了清晰的框架。

2、文档类型声明（DOCTYPE）

<!DOCTYPE html>        
这是HTML5的文档类型声明。
它必须位于HTML文件的第一行，作用是告知浏览器文档所遵循的HTML版本，
以便浏览器能够正确的渲染页面。对于HTML5来说，这个声明简洁明了，
统一了HTML文档类型的标准，取代了以往复杂的DTD（文档类型定义）声明。

3、HTML根元素（html）

<html>作为HTML文档的根标签，所有其他的HTML元素都被包含在它里面。
它有开始标签<html>和结束标签</html>。
这个标签界定了整个HTML文档的范围，浏览器会识别其中的内容为有效的HTML代码

4、头部文件（head）

<head> 此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特重要作用，但不会直接在网页的可见区域显示。
<title> 用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上。

<meta> 用于提供多种类型的元数据。
字符编码设置>> <meta charset="UTF-8"> 确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集
设置页面描述>> <meta name="descripiton" content="这是一个充满趣味的网页"用于向搜索引擎描述网页内容
设置关键词>> <meta name="keywords" content="网页,趣味,示例" 可设置关键词帮助搜索引擎索引网页

<link> 主要用于链接外部资源，最常见的链接css样式表
<link rel="stylesheet" href="style.css" >>
其中 rel="stylesheet" 表明这是一个样式表链接， href 属性制定了css文件的路径。通过这种方式，可以实现页内容与样式的分离，方便网页设计和维护

<script> 可用于在HTML文档中嵌入 Javascript 代码或引用外部的 JavaScript 文件，脚本可以为网页添加交互功能。
嵌入代码>> <script>alert('欢迎来我的网页');</script>
引用外部文件>> <script src="script.js"></script> >>这里 src 属性指定了JavaScript 文件的路径。

5、主体部分（body）

<body> 包含了所有在网页中可见的内容
文本、图形、超链接、表格、表单

6、文本元素（p）

可以使用段落标签 <p> 来组织文本
<p>这是一段普通的文本内容</p>
标题标签 <h1> - <h6> 可用于创建不同级别的标题， <h1> 表示最高级别的标题，重
要性依次递减。

7、图像元素（img）

使用 <img> 标签来插入图像
<img src="image.jpg" alt="图像描述">
src 指定图像的来源路径， alt 属性在图像无法正常显示时提供替代文本，对于可访问性和SEO都很重要

8、超链接元素（a）

通过 <a> 标签创建超链接
<a href="www.example.com">点击跳转</a>
href 属性定义了链接的目标URL，标签内的文本是用户看到的可点击的链接内容

9、表格内容（table、tr、td）

使用 <table> 标签创建表格， <tr> 表示表格行， <td> 表示表格单元格
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

完整练习页面展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>我的示例网页</title>
</head>

<body>
  <!-- 文本元素 -->
  <p>欢迎来到这个示例网页，这里会展示一些HTML元素的用法示例。</p>

  <!-- 图像元素，注意这里的图片路径需要根据实际情况调整，此处假设图片在和HTML文件相同的目录下名为example.jpg -->
  <img src="example.jpg" alt="示例图片" width="300" height="200">

  <!-- 超链接元素 -->
  <p>你可以点击 <a href="https://www.example.com">这个链接</a> 访问更多有趣的内容哦。</p>

  <!-- 表格内容 -->
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </table>
</body>

</html>