前端知识Day01

最新推荐文章于 2021-08-28 08:24:34 发布
最新推荐文章于 2021-08-28 08:24:34 发布
阅读量102 收藏
点赞数
分类专栏： java前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45013931/article/details/119492924
版权

1、HTML基本结构在这里插入图片描述

2、第一个网页

<!--!DOCTYPE:告诉浏览器，我们使用什么规范  -->

<!DOCTYPE html>
<html lang="en">

<!--head标签代表网页头部信息-->
<head>
    <!--meta标签：描述性标签，用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keyword" content="我的前端学习博客">
    <meta name="description" content="帮助我在学习上取得进步">

    <!--title标签：网站的标题-->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页的主体-->
<body>
Hello World！！！
</body>
</html>

3、html基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签的使用</title>
</head>
<body>

<!--1、标题标签-->
<h1 >一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>


<h1>1、段落标签</h1>
<!--2、段落标签：<p></p> 输入P,按下tab键-->
<!--以下内容为多个段落，行间稀疏-->
<p>两只老虎    两只老虎</p>

<p跑得快       跑得快</p>

<p>一只没有耳朵     一只没有尾巴</p>

<p>真奇怪      真奇怪</p>

<p>两只老虎     两只老虎</p>

<p>跑得快        跑得快</p>

<p>一只没有耳朵    一只没有尾巴</p>

<p>真奇怪      真奇怪</p>

<h1>2、水平线标签</h1>
<!--水平分割线标签<hr/>-->
<hr/>

<h1>3、换行标签</h1>
<!--换行标签<br/>-->
<!--以下内容都为一个段落，行间紧凑-->
两只老虎    两只老虎 <br/>

跑得快       跑得快<br/>

一只没有耳朵     一只没有尾巴<br/>

真奇怪      真奇怪<br/>

两只老虎     两只老虎<br/>

跑得快        跑得快<br/>

一只没有耳朵    一只没有尾巴<br/>

真奇怪      真奇怪<br/>


<h1>4、字体样式（粗体、斜体）标签</h1>
<!--粗体、斜体标签-->
粗体：<strong>I Love You</strong>
<br/>
斜体：<em>I Love You</em>
<br/>


<h1>5、特殊符号标签</h1>
<!--空格标签：&nbsp-->
空      格<!--无论手动打多少个空格，默认只显示一个-->
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
大于符号：&gt;
<br/>
小于符号：&lt;
<br/>

<!--版权符号：&copy;-->
&copy;版权所有：zx
</body>
</html>

4、图像标签

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习：
必填的两项
1、src:图片地址：
        绝对地址：从根路径到具体文件的位置：如：D:\javaDevelop\HTML\source\image\Tsinghua.jpg
        相对路径：../表示上一级目录（推荐生成）
2、alt:替代作用，当图像未找到，显示alt中的文本

-->
<img src="../source/image/Tsinghua.jpg" alt="清华园" title="悬停文字" width="300" height="300">

</body>
</html>

运行结果：
在这里插入图片描述

5、链接标签的使用

（1）用法：
在这里插入图片描述
（2）程序代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--a标签：
herf:必填项，表示要跳转到的页面
target:表示窗口在哪打开：
            _blank:在新的窗口打开
            _self：在当前窗口打开，默认为此方式
-->
<!--文本超链接-->
<a href="1.我的第一个网页.html">点击我跳转</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<br/>

<!--图像超链接-->
<a href="1.我的第一个网页.html">         <!--实现点击图片后，跳转到另一个页面-->
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
</a>
<br/>

<!--添加target后的-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>
<br/>
<br/>

<!--功能链接
   邮件链接：mailto
   QQ链接
-->
<h1>功能链接</h1>
<h3>邮箱链接</h3>
<br/>
<a href="mailto:1482306587@qq.com">点击我发送邮箱</a>
<br/>

<h3>QQ链接</h3>
<br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1482306587&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1482306587:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>

在这里插入图片描述
（3）QQ链接的设置
1）进入QQ推广官方-------->登录，进入如下页面：
在这里插入图片描述
2）点击推广工具--------->选择组件样式---------->粘贴代码
在这里插入图片描述

6、锚链接的使用

   锚链接可以使光标位置快速回到自定义的页面锚标记点，可以是在一个页面，也可以在不同的页面间跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接的用法</title>
</head>
<body>

<!--锚链接：
        1、需要一个锚标记
        2、跳转到锚标记，跳转格式：<a herf="#锚标记名称"></a>
-->

<!--定义一个锚链接-->
<a name="top">这里是顶部</a>
<br/>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<p>
    <img src="../source/image/Tsinghua.jpg" alt="清华园">
    <br/>
</p>

<a href="#top">点击我回到顶部</a>   <!--也可以在不同页面之间进行跳转-->


</body>
</html>

在这里插入图片描述
上图可以快速跳转到如图所示顶部：
在这里插入图片描述

换一个梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
TEST
FAVOR SOUP
10-19 276
HTML 原代码 显示结果 描述 &lt; 小于号或显示标记 > >
IDEA实现前端页面登录，注册、增、删、改、查操作-完整版
weixin_53748496的博客
10-29 2万+
分层思想：entity层：存放实体类vo层：消息模型（重复使用的一些属性）mapper层：接口（写方法的）mapper.xml:MyBatis与数据库相关的一些内容controller(web)层：接收前端传回的参数调用service层，返回结果转发、响应结果（跳转页面）service层：业务逻辑判断，写方法的.utils层：工具类：写通用的方法、类。test包:测试类、测试方法（测试代码）连接数据库的pom.xml: 导入相关依赖。
Java基础-xml解析
Love&Share
08-28 5001
XML XML 概述 Exendsible Markup Language(XML)可扩展标记语言 用途: 数据存储,小型数据库,存在一定CRUD操作可行性 网络数据的传输 JavaWEB项目配置文件 基本语法 XML文件后缀名为.xml XML文件第一行是对于当前文件的定义声明 XML文件中有且只有一个根标签 属性值必须使用引号包含,推荐使用双引号 标签必须正确匹配,即正确开始和关闭 XML标签内严格区分大小写 &lt;?xml version="1.0" encoding="utf-8"?&gt
特殊符号转义 （<， &lt ...）
weixin_30466421的博客
07-27 1715
public static String htmlReplace(String str){ str = str.replace("“","&ldquo;"); str = str.replace("”","&rdquo;"); str = str.replace(" ","&rdquo;"); str = str.replace("&amp;","...
&nbsp|&quot|&amp|&lt|&gt等html字符转义
热门推荐
七夜之家
12-16 6万+
目录(?)[+] iSO 8859-1 charactersMath symbolsSpecial characters for HTML No. 文字表記 10進表記 16進表記 文字 Comment 001 " " " """ q
在线教育课程day01_前端项目
09-25
通过这个在线教育课程day01_前端项目的学习，学员不仅能够掌握前端开发的基础知识，还能了解和实践现代前端开发流程，为后续更复杂的项目开发打下坚实的基础。同时，这也是一次提升个人技能，适应快速发展的互联网...
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
day01源码.rar
07-03
很抱歉，但根据您给出的信息，"day01源码.rar" 和 "eleme" 这些关键词并没有提供足够的上下文来生成一篇超过1000字的详细IT知识文章。通常，"源码"可能指的是编程语言的原始代码，而"eleme"可能是“饿了么”（Ele.me...
前端开发Vue基础篇：Day02 Vue基础知识.pdf
11-11
Vue基础知识 本文主要介绍了 Vue 基础知识，包括模板语法的插值操作、v-for 指令的 key 属性、reduce 方法的使用和计算属性的使用。 一、模板语法的插值操作 在 Vue 中，我们可以使用模板语法来插值操作。常用的...
day01-VUE进阶
最新发布
10-29
本课程旨在教授高级软件人才，快速掌握 Vue.js 进阶技术，涵盖了 Vue.js 基础知识的回顾、路由、状态管理、TypeScript 等高级主题。 一、基于脚手架创建前端工程 1. 使用 Vue CLI 创建前端工程，了解 Node.js 和 ...
HTML字符实体引用
IROYCN的博客
06-17 6052
HTML实体常用于生成那些键盘上没有的印刷字符，比如€、∞、≠、©等等。 HTML实体以和号（&）开头，分号（;）结尾，两者之间表示实体的字符串（或数字）。 这里摘抄了国外一个比较完整的HTML实体表格作为个人的备忘，并分享给大家。 来源地址：http://www.elizabethcastro.com/html/extras/entities.html －－－－－－－－－ 每个表有五列
mybatis入门（简单增删改）
licmi的博客
10-13 343
mybatis入门（简单增删改）搭建mybatis框架环境1、Mybatis相关插件安装2、创建maven工程3、导入相关pom依赖基于ssm逆向工程的使用1、配置generatorConfig.xml2、配置maven运行generator命令Mybatis增删改查案例添加日志文件 搭建mybatis框架环境 1、Mybatis相关插件安装 首先先安装需要的插件 Free mybatis plugin Mybatis generator mybatis tools maven helper Setting
idea搭建ssm框架
风流叶子的博客
01-31 352
在网上找了很久配置流程，每次基本都无法实现，最近需要做一个简单的网站项目，所以重新配一个ssm框架来使用 这里使用idea2017，点击新建项目 GroupID是项目组织唯一的标识符，实际对应JAVA的包的结构，是main目录里java的目录结构。 ArtifactID就是项目的唯一的标识符，实际对应项目的名称，就是项目根目录的名称。点击下一步 这里可以在Pr
maven聚合工程
weixin_47520834的博客
10-09 110
maven聚合工程 应用拆分: 横向拆分(微服务)与纵向拆分(MVCDao 聚合工程) 聚合工程功能: 父工程：统合了所有的子工程；统一依赖包的版本； 子工程： ​ ssm_entity:没有什么依赖 ​ ssm_util:fastjson,jwt ​ ssm_dao：依赖mybatis，依赖ssm_entity ​ ssm_service:依赖ssm_dao,依赖spring ​ ssm_web:依赖ssm_service,依赖springMVC,spring ​ 步骤 首先建立 父工程和子工
Spring框架第六章之声明式事务（注解开发）
beansice的博客
06-25 158
注解开发的好处 案例分析 代码实现 总结
引入分布式Id遇到的坑
Hello World
08-05 1410
在通用模块common-base中引入分布式id生成算法 common-base中的pom文件引入id-generator和id-generator-core的maven依赖 &lt;!-- id-generator --> &lt;dependency> &lt;groupId>commons-logging&lt;/groupId> &lt;a...
玩转SpringMVC之响应视图方法类型案例以及使用注意点
xtho62的博客
10-16 236
今天在上篇文章《玩转SpringMVC之传参使用，属性绑定以及常用请求注解使用》 https://blog.csdn.net/xtho62/article/details/109071643springmvcdemo的工程路径下，创建新的工程模块名为springmvc_day2_01_response。步骤上次做过就不重复演示那么多了，就是springmvcdemo工程右键=>ew=>module=>maven=>勾选模板找到web项目=>确定项目信息，都依赖于springmv
Shiro 和SSM的整合配置
weixin_42785995的博客
09-22 815
将Shiro和Spring SpringMVC Mybatis 整合 配置文件: pom.xml(相关依赖) &lt;dependency&gt; &lt;groupId&gt;junit&lt;/groupId&gt; &lt;artifactId&gt;junit&lt;/artifactId&gt; &lt;version&gt;4.12&lt;/vers...
javascript知识点汇总.doc
10-07
随着前端开发的不断发展，JavaScript 也在不断演进，出现了许多新的框架和库，比如 AngularJS、React 和 Vue.js 等，为开发者提供了更多的选择。 总的来说，JavaScript 是一种强大灵活的脚本语言，具有丰富的特性和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

换一个梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值