HTML笔记1

1,标签的写法

<strong>加粗内容</strong>

<hr>

2,快速生成骨架

![Tab]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>网页标题</title>

</head>

<body>

    给用户看的

</body>

</html>

3,标签的关系

<html>

    <head></head>

    <body>

       

    </body>

</html>

4,注释

Ctrl + Shift + P

<!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>

    <!-- 这是文字,变成了注释,客户看不见 -->

    <strong>这是加粗文字</strong>

</body>

</html>

5,标题标签

<h1>...</h1>

<!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>三级标题</h3>

    <h4>四级标题</h4>

</body>

</html>

6,段落标签

<p>...</p>

<!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>主要用于文章段落,自动换行,有默认行距。</p>

    <p>主要用于文章段落,自动换行,有默认行距。</p>

    <p>主要用于文章段落,自动换行,有默认行距。</p>

</body>

</html>

7,换行与水平线标签

...<br>换行

...<hr>水平线

<!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>

    第一行内容<br>

    第二行内容<hr>

</body>

</html>

8,文本格式化标签

<strong>...</strong>加粗内容

<em>...</em>斜线

<ins>...</ins>下划线

<del>...</del>删除线

<!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>

    <strong>加粗内容strong</strong><br>

    <em>斜线em</em><br>

    <ins>下划线ins</ins><br>

    <del>删除线del</del>

</body>

</html>

9,图像标签

<img src="...">

<!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>

    <img src="./57daeeab9de42fc2a66369c000b42709.jpg">

    <img src="./lofter_1658434302302.jpg" >

</body>

</html>

10,图像标签_属性

alt="..."

title="..."

width="..."

height="..."

<!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>

    <img src="./forget me not.pdf" alt="哎呀图片找不到了"><br>

    <img src="./57daeeab9de42fc2a66369c000b42709.jpg" title="这是图片"><br>

   

    <!-- 宽度高度为等比例缩放 -->

    <img src="./57daeeab9de42fc2a66369c000b42709.jpg" width="100"><br>

    <img src="./lofter_1658434302302.jpg" height="100">

</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024高频前端面试题 Vue2 和 Vue3 篇

* Vue2 和 Vue3的区别&#xff1a; 1&#xff09;双向数据绑定原理的区别 2&#xff09;根节点的不同 Vue2只能一个根节点 Vue3在组件中可以放置多个根节点 3&#xff09;Vue3中采用composition API vue2:采用的选项型API(opsition API) vue3:采用的组合型API(composition A…

分类算法入门:以鸢尾花数据集为例

近两年人工智能技术蓬勃发展&#xff0c;OpenAI连续放出ChatGPT、Sora等“王炸”产品&#xff0c;大模型、AIGC等技术带来了革命性的提升&#xff0c;很多人认为人工智能将引领第四次工业革命。国内各大互联网公司也是重点投资布局&#xff0c;从个人角度来说要尽快跟上时代的潮…

Node.js最准确历史版本下载(以下载Node.js16.17.1版本为例)

先进入官网:Node.js https://nodejs.org/en 括号中LTS代表稳定版本. 嫌其他冗余博客帖子多&#xff0c;找起来费眼睛,可以到/release下载:Node.js,在blog后面加/release https://nodejs.org/en/blog/release/ 点击next翻页,跟上面同样的步骤

echarts柱状图可鼠标左击出现自定义弹框,右击隐藏弹框并阻止默认右击事件

每项x轴数据对应有两条柱图和一条阴影效果是学习其它博客得到的效果&#xff0c;这个是学习的原文链接&#xff1a;echarts两个合并柱体&#xff08;普通柱状图象形柱图&#xff09;共享一个柱体阴影 因为这次情况比较特殊&#xff0c;不仅需要自定义弹框内容&#xff0c;而且…

JAVA中YML:几个用法

项目有一些配置文件&#xff0c;ini、prop类型的配置文件都考虑过后&#xff0c;还是选择yml文件&#xff0c;如上图&#xff1a;xxconfig.yml。 要求&#xff1a; 1、允许实施人员手动配置 2、配置文件要能轻便的转化为一个JAVA对象 3、程序启动后&#xff0c;打印这些配置项&…

DQL语言学习(2024/3/5)one

1.基础查询&#xff1a; select 查询列表 from 表名&#xff1b; 查询列表可以是&#xff1a;①表中的字段、②常量值、③表达式、④函数 ①查询表中的单个字段&#xff0c;多个字段&#xff0c;所有字段 select *from 表名&#xff1b; ③查询表达式: select 100*98; ④…

在ubuntu16上用dkpg安装vscode 出现错误

Could not parse file "/usr/share/applications/Qt5.12.9.desktop": Key file contains line ktop Entry] which is not a key-value pair, group, or comment dpkg: 依赖关系问题使得 code 的配置工作不能继续&#xff1a;code 依赖于 libc6 (> 2.28)&#xff1…

图论相关内容

建图 邻接矩阵 void tu1() {cin >> n >> m;for (int i 1; i < m; i) {int u, v;cin >> u >> v;//int w;cin>>w;--->边权mp[u][v] 1;//w//mp[v][u] 1;//w --->无向图} } 邻接表 void tu2() {vector<vector<int>>adj(…

【QT】QMainWindow介绍

QMainWindow Label&#xff1a;可以放静态/动态图片/链接 菜单栏工具栏浮动窗口和核心部件状态栏 Qdialog 模拟对话框非模拟对话框标准对话框和文件对话框 在创建文件时&#xff0c;路径一定不能有中文&#xff0c;否则会报错 双击下面的 Line Edit&#xff1a;只能显示一…

C语言怎样提⾼循环语句的效率?

一、问题 在C语⾔程序中&#xff0c;常常使⽤循环结构来解决特定的问题。那么在设计程序时&#xff0c;怎样才能提⾼循环语句的效率呢&#xff1f; 二、解答 C循环语句中&#xff0c;for 语句使⽤频率最⾼&#xff0c;while 语句其次&#xff0c;do 语句很少⽤。提⾼循环体效率…

公告显示一次之后不在显示用js和jq不喜勿喷

// 使用if判断页面中的本地存储是否有值 若有则为true 不显示if (sessionStorage.getItem("name1") true) {$("#hint").hide();// 若没有 则显示内容} else {$("#hint").show();} // 公告确定让其隐藏事件 function enter() { $("#hint…

css使用

一、什么是CSS <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>div{color: red;}</style> </head> <body><div>Hello CSS</div></…

visual studio的使用

文章目录 1.visual studio要加的宏命令2.清屏操作 1.visual studio要加的宏命令 #define _CRT_SECURE_NO_WARNINGS这是一个预处理器宏&#xff0c;它在 Visual Studio 中被广泛使用。其主要目的是禁用一些在 C 和 C 标准库中被认为不安全的函数的编译器警告。这些不安全的函数…

Java 代理模式详解(附案例源代码)

前言 Java代理模式是一种设计模式&#xff0c;在 Java 开发中被广泛应用。它允许我们通过添加一个代理对象来控制对另一个对象的访问&#xff0c;从而提供了一种间接访问实际对象的方法。 代理模式可以分为静态代理和动态代理两种。静态代理是在代码实现阶段就确定了代理…

CSS的文本样式属性值,web前端开发规范

正文 介绍下半连接队列 服务器第一次接收到客户端的SYN后&#xff0c;会处于SYN-REVD阶段&#xff0c;此时双方还没有建立完全的连接&#xff0c; 服务器会把此种状态下请求连接放在一个队列里&#xff0c;我们把这种队列称为半连接队列 已经完成三次握手并建立连接&#xff…

第五篇:人工智能与机器学习技术VS创意创新(creative)--- 我为什么要翻译介绍美国人工智能科技巨头IAB公司?

【如无特殊说明&#xff0c;本文所有图片均来源于网络】 IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&…

java SSM厂房管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM厂房管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…

PHP伪协议详解

PHP伪协议详解 一、前言1.什么是PHP伪协议&#xff1f;2.什么时候用PHP伪协议? 二、常见的php伪协议php://inputphp://filterzip://与bzip2://与zlib://协议data://phar:// 一、前言 1.什么是PHP伪协议&#xff1f; PHP伪协议是PHP自己支持的一种协议与封装协议&#xff0c;…

黑马微服务常见面试题

常见面试题 1.微服务篇 1.1.SpringCloud常见组件有哪些&#xff1f; 问题说明&#xff1a;这个题目主要考察对SpringCloud的组件基本了解 难易程度&#xff1a;简单 参考话术&#xff1a; SpringCloud包含的组件很多&#xff0c;有很多功能是重复的。其中最常用组件包括&…

hive实战项目:旅游集市数仓建设

旅游集市数仓建设 文章目录 旅游集市数仓建设为什么要设计数据分层&#xff1f;分层设计ODS&#xff08;Operational Data Store&#xff09;&#xff1a;数据运营层DW&#xff08;Data Warehouse&#xff09;&#xff1a;数据仓库层DWD&#xff08;Data Warehouse Detail&…