HTML：初识框架及常用标签

作者：

fangys

基础常识

网页的本质：文本文件

网页=后缀名为.html的纯文本文件

浏览器=翻译官（把文本文件翻译成界面）

HTML=超文本标记语言

环境搭建与HTML骨架

开发工具

VSCode

基础框架

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    欢迎来到我的网页世界！
</body>
</html>

解析

<!DOCTYPE html>：声明这是HTML5

<html>：所有代码的大容器，网页的根

<head>：网页的“大脑”，放置不显示在页面的信息

<title>：浏览器标签栏上显示的内容

<body>：网页的主体内容，显示在页面上的具体内容

核心标签

一：块级元素与行内元素

块级元素：独占一行，宽度100%。如：<h1>～<h6>，<p>，<div>。

行内元素：多个排在一行，宽高由内容撑开。如：<span>，<strong>，<em>。

<body>
    <!-- 1. 标题标签：从大到小，用于文章标题 -->
    <h1>一级标题：网页大标题</h1>
    <h2>二级标题：章节标题</h2>
    <h3>三级标题：小节标题</h3>
    
    <!-- 2. 段落标签 -->
    <p>这是一个段落。段落之间有自动的间距，阅读更舒服。</p>
    <p>这是第二个段落。HTML会忽略代码中的多个空格和换行。</p>
    
    <!-- 3. 强调标签（行内） -->
    <p>这句话里有<strong>加粗强调</strong>和<em>斜体强调</em>。</p>
    
    <!-- 4. 无语义的容器：div(块) 和 span(行内) -->
    <div>我是一个块，独占一行</div>
    <span>我是行内1</span><span>我是行内2</span>
</body>

二：图片与路径

图片：<img src=”图片地址” alt=”图片描述”>

路径：

网络图片：src="https://picsum.photos/200/150" (演示用随机图片)。
本地图片：相对文件夹，相对路径
alt属性：当图片加载失败时显示的文字，对盲人读屏软件友好。

三：超链接与列表

超链接：<a href=”网址”>点击文字</a>

<!-- 链接到外部网站（记得带http://） -->
<a href="https://www.baidu.com" target="_blank">打开百度</a>
<!-- target="_blank" 表示在新标签页打开，非常重要 -->

<!-- 链接到页面内的某个位置（锚点） -->
<h2 id="section1">第一部分</h2>
<a href="#section1">回到第一部分</a>

列表：

<!-- 无序列表：导航菜单常用 -->
<ul>
    <li>首页</li>
    <li>关于我们</li>
    <li>联系方式</li>
</ul>

<!-- 有序列表：步骤说明 -->
<ol>
    <li>打开编辑器</li>
    <li>新建文件</li>
    <li>保存为.html</li>
</ol>