HTML基础

声明!
学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关,切勿触碰法律底线,否则后果自负!!!!有兴趣的小伙伴可以点击下面连接进入b站主页B站泷羽sec

HTML简介

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言

HTML 不是一种编程语言,而是一种标记语言

HTML 使用标记标签来描述网页

HTML 文档包含标签与文本内容

HTML文档也叫做web页面

HTML基本结构概述

<!DOCTYPE html>声明:位于文档最前端,表明这是 HTML5 文档,让浏览器按 HTML5 标准解析页面。

html

html 复制代码
<html>
  <!-- 其他元素嵌套在这里 -->
</html>

<html>元素是HTML文档的根元素,其他元素都嵌套其中。

html 复制代码
<head>
  <!-- 元数据 -->
</head>

<head>元素包含元数据,如字符编码和页面标题。

head内标签

<meta> 标签

  • 字符编码设置

    html 复制代码
    <meta charset="UTF-8"> 

    确保正确解析网页中的文字内容。

  • 页面描述和关键词设置

    html 复制代码
    <meta name="description" content="这是一个关于HTML结构讲解的网页,包含详细的head标签内容">
    <meta name="keywords" content="HTML, head标签, 网页结构">
  • 视窗设置

    html 复制代码
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> 标签

html 复制代码
<title>HTML Head标签详解 - 学习网页基础知识</title>

定义网页的标题,显示在浏览器标签栏上。

<link> 标签

  • 样式表链接

    html 复制代码
    <link rel="stylesheet" type="text/css" href="styles.css">
  • 图标链接(favicon)

    html 复制代码
    <link rel="shortcut icon" href="favicon.ico">

<script> 标签

  • 外部脚本链接

    html 复制代码
    <script src="script.js" defer></script>
  • 内联脚本

    html 复制代码
    <script> function showMessage() { alert('欢迎来到这个网页!'); } </script>

body

html 复制代码
<body>
  <!-- 可见内容 -->
</body>

<body>元素包含可见内容,如文本、图像和链接等。

简单的HTML基本结构示例

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个简单的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是网页的主要内容部分。</p>
</body>
</html>

body内标签

文本相关标签

  • 段落标签

    html 复制代码
    <p>这是一个段落。</p>
  • 标题标签

    html 复制代码
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
  • 内联标签

    html 复制代码
    <p>这是一段包含<span style="color: red;">红色文字</span>的段落。</p>
  • 强调标签

    html 复制代码
    <p>这个词很<strong>重要</strong>,而这个词是<em>需要特别注意的</em>。</p>

列表标签

  • 无序列表

    html 复制代码
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  • 有序列表

    html 复制代码
    <ol>
      <li>第一个项目</li>
      <li>第二个项目</li>
    </ol>

链接标签 <a>

html 复制代码
<a href="https://www.baidu.com">访问示例网站</a>
<a href="#section-2">跳转到第二部分</a>
<a href="document.pdf" download>下载文档</a>

图像标签 <img>

html 复制代码
<img src="image.jpg" alt="风景图">

表格标签 <table>

html 复制代码
<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

表单标签 <form>

html 复制代码
<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
相关推荐
爱分享的程序员19 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘24 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出26 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的26 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解29 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵32 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im33 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man33 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构