前端笔记一

最新推荐文章于 2024-10-16 11:23:07 发布

贾俊杰123

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量24

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2301_80330239/article/details/134383726

版权

01-第一个html页面  ：<marquee loop="2" bgcolor="pink"><input type="text" disabled bgcolor="green">你们都是祖国的花骨朵儿</marquee>

02-html骨架  ：<!DOCTYPE html>
<!-- 声明文档遵循html5 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>你们都是祖国的花骨朵儿</title>
</head>

<body>
    你们都是祖国的花骨朵儿
    <!-- 南昌市的纪念册首都机场凯撒    ctrl+/ -->


</body>

</html>

03-文章标题标签  ：<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>我是标题一</h1>
    <h2>我是标题二</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>


</body>

</html>

04-段落标签  ：<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>11月7日中午，鹤城区舞水小学西校区一学生在校午餐时发现疑似异物，下午放学后带回家，随后其家长将疑似异物拍照上传至网络，并于9日下午3时许又发至抖音，后被人加工在网上传播。</p>

    <p>日下午1时许，鹤城区市场监管局接到其家长向12345市长热线投诉的交办件后，在学校负责人见证下，依法对涉事学校食堂香辣兔丁菜品留样样品实施了封存；下午5时许，在鹤城区教育局、鹤城公安分局及学生父母见证下，区市场监管局又依法对保存在该学生家中的疑似异物实施了封存。
    </p>
</body>

</html>
05-文本格式化标签  ：<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p><strong>11月7日</strong>中午，鹤城区舞水小学西校区一学生在校午餐时发现疑似异物，下午放学后带回家，随后其家长将疑似异物拍照上传至网络，并于<b>9日下午3时</b>许又发至抖音，后被人加工在网上传播。
    </p>

    <!-- 水平线：单标签 -->
    <hr />

    <p>日下午1时许，<br />鹤城区市场监管局接到其家长向<i>12345</i>市长热线投诉的交办件后，<em>在学校负责人见证下，</em>依法对涉事学校食堂香辣兔丁菜品留样样品实施了封存；<del>下午5时许，</del>在鹤城区教育局、鹤城公安分局及学生父母见证下，<s>区市场监管局又依法</s>对保存在该学生家中的疑似异物实施了封存。

        x<sup>2</sup>
        x<sub>2</sub>
    </p>
    <pre>
    鹅鹅鹅，
    曲项向天歌，
    白毛浮绿水，
    红掌拨清波。
    </pre>
</body>

</html>


06-插入图片  ：<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>你是狗子1号</h1>
    <img src="../images/dog2.jfif" width="300px" height="150px" title="别看我黑，我可俊着呢">
    <h1>你是狗子2号</h1>
    <img src="./dog1.jfif" width="300px" alt="别看我瘦，浑身都是腱子肉">


    <!-- 相对路径： ../代表当前文件的上一级别   ./  代表当前文件-->
    <!-- 绝对路径： -->
    <img src="https://t7.baidu.com/it/u=832449998,3859178369&fm=193&f=GIF" alt="">


    <img src="C:\\Users\\21195\\Desktop\\南航金城\\web前端周二周四周天\\11-12\\images\\dog2.jfif" alt="">

</body>

</html>


07-无序列表：  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul type="square">
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>

    </ul>
</body>

</html>


08-有序列表：  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol type="1" start="5">
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>

    </ol>
</body>

</html>


09-自定义列表：  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt><img src="./dog1.jfif" alt="" width="200px"></dt>
        <dd>公司地址</dd>
        <dd>投诉电话</dd>

    </dl>
</body>

</html>

计算机基础：
硬件：控制器、运算器、输入设备、输出设备、存储（内存、磁盘）
软件：系统软件：window、linux、mac
   应用软件：腾讯视频、网易云
   b/s架构：browser server
   c/s架构：client 客户端

html（结构）、css（表现）、javascript（行为）

标签：
双标签：<标签属性="属性值" 属性="属性值">内容</标签>
属性：给标签提供附加信息大多数属性以键值对的形式存在
如果属性名和属性值一样，可以只写属性值
单标签：
<标签属性="属性值" />

html骨架生成：vscode里：shift+！+shift

常用标签：b/strong（字体变粗体）
i/em （文字变斜体）
u （字体加下划线）
del （删除线）