各种标签笔记

已于 2024-06-03 17:55:18 修改
阅读量68 收藏
点赞数 1
文章标签： css
于 2023-07-09 22:15:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74543941/article/details/131623965
版权

  • 一.应用软件

    • c/s架构：APP
    • B/S架构：网端（browser server）

  • 二.html：超文本标记语言 ----- 超：从一个页面到另一个页面

  • 三.语法规范：

    • 标签名全部小写
    • <标签名> 标签体 </标签名>
    • 双标签：包含关系（父子标签） 并列关系：（兄弟关系）

  • 四.vscode软件中常用的快捷建

    • 代码格式化：shift+Alt+F
    • 向上或者向下移动一行：Alt+up 或 Alt+down
    • 快速复制一行代码：shift+Alt+up 或 shift+Alt+down
    • 快速保存：ctrl+s
    • 快速查找：ctrl+F
    • 快速替换：ctrl+H
    • 注释：ctrl+/

  • 五.html的框架

  • 六.html基本标签

    • 6.1结构标签：
      • <html> </html> -----定义HTML 文档
      • <head> </head> ------定义文档的头部
      • <title> </title> -------定义文档的标题
      • <body> </body> ----- 定义文档的主题
    • 6.2容器标签
      • <div> </div> ---------块级标签，独占一行
      • <span> </span> -------行级标签，所有内容都在同一行
    • 6.3文字标签

    • 6.4标题标签

    • 6.5无序列表

    • 6.6有序列表属性：
      <ol type="A">有序列表
     <li>apple</li>
     <li>orange</li>
     <li>banana</li>
  </ol>
	属性：type：1、A、a、I、i（数字、字母、罗马数字）
      6.7图片标签
      <img/>单标签   
  属性: 
      src：图片地址
      width:宽度
      height:高度
      border:边框
      align:对齐方式
      alt:图片的文字说明（鼠标放在图片上显示文字）
      6.8链接标签
    • <!-- 链接标签 -->
<a>文本或图片</a>
<!-- 去欧鹏，href:跳转页面的地址（支持外网跳转：协议+域名） -->
<!-- 此方法可以去到想去的地方，但是会失掉开始的地方 -->
<a herf ="http://www.xianoupeng.com/">去欧鹏</a>
问：怎样才能保留开始的窗口呢？ 
<!-- target="-self"是默认为自己 -->
<a herf="http://www.xianoupeng.com/"target="_blank"></a>
<!-- 也可以自己的页面去其他的页面 -->
<a herf="../09视频.html">去看视频</a>
<!-- 也可以从一个图片到另一个图片 -->
<a herf="http://www.xianoupeng.com/"><img src="../images/cat.gif"></a>
<a herf="https://www.baidu.com/"><img src="../images/dog.gif"></a>
注意：http与https的区别
    http：是互联网应用最为广泛的一种网络协议，传输的数据是未加密的，也就是明文的（不安全）
    https：主要分为两种：
           1.建立一个信息安全通道
           2.确认网站的真实性
      6.9表格标签
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 在table里面设置属性：边框粗细，宽 高  -->
    <!-- 且这个边框只能更改最外围的边框粗细；宽是所有的都改变，高只能改变tbody的部分 -->
    <!-- cellspacing只控制单元格的大小 -->
    <table border="1px" width:200px height:200px cellspacing="0">
        <!-- 表头 -->
        <!-- caption无法拥有width，height属性，要通过css更改 -->
        <caption>学生信息</caption>
        <!-- 如果想要修改thead的宽高，则需要在此部分添加属性 -->
        <!-- align:控制表格内字体的位置（左 中 右）；valign：上 中 下 -->
        <thead height="30px" >
            <!-- tr是行：没有width属性 -->
            <tr>
                <!-- th是表格中内容的表头 -->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <!-- td是行，单元格（table data） -->
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
     
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
       
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

      结果：

       6.10合并单元格
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1px" width:500px height:500px cellspacing="0">
        <thead>
            <tr>
                <td colspan="4" align="center">成绩表</td>
            </tr>
        </thead>>
        <tbody>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>科目</td>
                <td>分数</td>
            </tr>
            <tr>
                <td>小辣椒</td>
                <td>女</td>
                <td>英语</td>
                <td>100</td>
            </tr>
            <tr>
                <td>小橙子</td>
                <td>女</td>
                <td>英语</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

      结果：

    • 6.11图片标签：
      <!-- 图片标签 -->
<img src="../images/map.jpg" alt="" title="我最美" width:10px>
<!-- 视频标签 ：支持三种格式：MP4,WebM,Ogg-->
<video src="../images/video.mp4">看视频 </video>

不爱编程的辣椒
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html常用标签学习笔记
04-01
`<input>`定义各种类型的输入字段，如文本框、按钮等。`<label>`为输入字段提供描述，`<select>`和`<option>`用于创建下拉列表，`<textarea>`定义多行文本输入。 15. ` `：换行标签，用于在文本中插入一个换行符...
JSP自定义标签学习笔记
08-11
本篇学习笔记将深入探讨JSP自定义标签的相关概念、创建方法以及实际应用。 一、概述 1.1 使用简单标签机制 JSP自定义标签提供了类似HTML标签的语法结构，通过自定义标签，开发者可以封装复杂的Java代码，使得页面...
Zotero笔记功能详解
qq_44798850的博客
12-05 5131
有很多时候，我们希望在这篇笔记中加入另一个文献的链接，比如另一篇文献中有类似的部分，或者想要链接到某个知识点，就可以采用其他文献链接功能。（包含加粗，斜体，下划线，删除线，下标，上标，公式块，标题分级，单行标记，公式，项目符号，引用功能）
印象笔记快捷键大全
明哲的博客
10-17 2287
印象笔记软件快捷键大全
印象笔记使用技巧
超梦梦梦梦的博客
05-22 1580
作为一款强大的笔记管理工具，印象笔记不仅能够帮助我们高效地创建、编辑和管理笔记内容，还能与其他工具进行协同工作，提高我们的工作效率。印象笔记是一款跨平台的笔记应用，支持文字、图片、音频、视频等多种形式的笔记内容。同时，印象笔记还支持标签、笔记本和笔记栈等多种分类方式，方便用户对笔记进行分类管理。印象笔记（Evernote）作为一款强大的笔记管理工具，凭借其丰富的功能和便捷的操作方式，受到了广大用户的喜爱。本文将详细介绍印象笔记的使用技巧，帮助用户更好地利用这款工具，提升工作和学习效率。
stata学习笔记（三）：变量及标签的应用
weixin_66627002的博客
01-17 7257
为了让用户更加清楚地了解数据的来源、变量的含义、观测值的解释等相关内容，stata 可以为数据、变量、观测值添加标签。
思源笔记使用教程
qq_22841387的博客
01-04 8295
思源笔记使用教程1.新建笔记本 2.新建文档(Ctrl + N)3.复制引用块/嵌入块
html h5标签,H5笔记——HTML常用的标签
weixin_30500365的博客
07-16 2286
HTML的结构/* 标题 */HTML常用的标签标题标签—h总共有6级，依次从大到小。标题标签我是h1标签我是h1标签我是h1标签我是h1标签我是h1标签我是h1标签浏览器显示效果如下：Paste_Image.png表单标签—input表单标签为换行标签，type和value为input的属性，可以改变它的样式。显示效果如下：Paste_Image.png段落标签—p段落标签我是段落标签我是段落标...
「标签管理」使用标签管理有道云笔记资料
dotNET跨平台
09-13 2863
因着大家对文件标签化比较高难道，需要熟悉一个标签工具软件，所以今天暂时来介绍个简单一些的网络资料的标签化管理，使用有道云笔记作为落地工具，同理在OneNote、印象笔记上...
印象笔记三级目录_【知识管理】如何使用印象笔记的多级目录标签做知识分类管理？...
weixin_30446557的博客
12-24 861
前言之前讲过怎么用印象笔记做知识管理，感觉讲得不够清晰，我试着重新梳理，请多多指教。相关阅读：原文是在公众号上排版的，复制到知乎就没那么好的阅读体验，有需要可以去微信阅读。玩个小游戏我们不妨玩个小游戏，我们拥有以下图形，我们该如何分类？相信大家脑海里，第一个方案是建立分类原则，再去分类：1.建立分类原则：按形状属性分类2.执行分类动作：圆的一组，非圆的一组那么相信大多个的结果会如下：那再增加一些难...
解决Obsidian写笔记中的＜img＞标签无法显示图片的问题
qq_74177889的博客
10-31 1126
Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。
PackML 学习笔记
姚家湾博客
05-30 4780
在一篇博文中无法介绍packML 的全部内容，packML 给我们最大的启示是，它将不同机器的操作行为加以抽象，构建一个共同的单一方式。标准化是代码重用和自动生成的基础，符合PAckML 的设备的操作程序和HMI 界面能够实现自动化生成，结合OpcUA 协议，数据标签，协议想必也能够自动化生成，或者使用公共的界面操作。各个厂商和设备的操作界面是相同的，操作人员能基于使用PackML 的常识就能够操作各种PackML 的设备。它带来了许多的优点。生产模式下是全状态的，而维护，手动方式下某些状态是不起作用的。
matt的笔记笔记笔记
12-06
标签为"笔记"也无法明确指出是关于编程、网络技术、数据库管理还是其他IT领域的内容。同样，压缩包内的"新建文件夹"并没有提供任何实质性的文件或主题信息。因此，我无法生成超过1000字的详细IT知识内容。 如果能...
Markdown学习笔记
07-19
Markdown 学习笔记简介 1. 概述 Markdown 是一种轻量级的标记语言，设计初衷是使写作过程更加简单直观。它允许你使用易读易写的纯文本格式，通过简单的标记语法将文本转换为结构化的 HTML。 2. 高级语法 ①任务...
HTML5中的nav标签学习笔记
01-19
nav标签全称navigation，顾名思义，是导航的意思。根据HTML5的相关标准定义如下： A section of a page that links to other pages or to parts within the page:a section with navigation links. 中文翻译大概意思...
flex：1
m0_47999208的博客
07-25 381
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 943
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
css更改图片颜色
最新发布
程序员
07-25 187
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
css 作业 2
没有 bug 的代码是不完美的！
07-25 711
写完了
JavaWeb学习笔记：核心概念与标签解析
"JavaWeb学习笔记分享，涵盖了HTML的基础元素如自定义列表、有序与无序列表、图像标签、路径类型、超链接标签以及定位资源的方法。这些是构建网页的基本构成部分，对于JavaWeb开发入门至关重要。" 在JavaWeb的学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值