前端开发体系+html文件详解

原创

已于 2024-07-15 10:15:24 修改 · 677 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2024-07-14 14:13:54 首次发布

首先简要介绍前端的整体体系：

html骨架

html标签（元素）由三部分组成：标签，标签属性，标签内容。

例如：

<div style="color: red" id="zzz">1020前端体系</div>

<!DOCTYPE html>
<!-- 英文状态下！生成框架 -->
<!-- 英文状态下Ctrl+?标记为注释 -->
<html lang="en">
<head>
<!-- <head></head>标签设置页面配置信息 -->
    <meta charset="UTF-8">
    <!-- 设置页面编码配置信息 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <title></title>设置页面标题 -->
</head>
<body>
<!-- <body></body>设置页面主题 -->
    
</body>
</html>

body主体内基本元素

基本元素

<h1>zzzz</h1>
    <h2>zzzz<h2> 换行、行间空隙、加粗、分级
    <p>aaaa</p> 换行、行间空隙
    <div>dddd</div> 换行
    <span>qqqq</span> 无明显格式，作用：形成独立空间便于单独操作
    <hr> 水平线
    <br> 换行，可用在内容之间

超文本（超链接跳转）

<a href="https://www.bilibili.com" target="_blank">a标签跳转至b站</a>
配套属性：href：指定超文本资源路径
                 target：指定超文本资源路径打开方式   _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口)  _top（跳出顶级窗口)

配套属性：href：指定超文本资源路径

target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)

锚点

<a name="top">指定的位置</a>
.
.
.
<a href="#top">回到指定位置</a>        #后面跟的是所要对应a标签的名字

此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径

<a href="#top" style="position:fixed;right:10px;top:10px;"></a>(将锚点固定位置，右上角)

图片标签

列表标签

       <ul>

最低0.47元/天解锁文章

新学期VIP享超值加赠