声明!
学习视频来自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文档的根元素,其他元素都嵌套其中。
head
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>