JavaWeb|网页开发基础入门

news2024/11/30 19:01:39

成分有点复杂

要开始接触网页开发了

开发工具的下载链接:https://code.visualstudio.com/

图片

安装好后,我们开始入门吧,废话就不多说了

一、基础知识大家了解一下

1、文本类标签

文本结构

一级标题<h1> Heading 1</h1>

二级标题<h2> Heading 2</h2>

三级标题<h3> Heading 3</h3>

四级标题<h4> Heading 4</h4>

五级标题<h5> Heading 5</h5>

六级标题<h6> Heading 6</h6>

段落标题<p> Paragraph </p>

2、文本修饰

<em> Emphasis </em>强调

加粗<strong>Strong</strong>

下划线<u>underline</u>

插入<ins>insert</ins>

删除<del>delete</del>

上标<sup>superscript</sup>

下标<sub>subscript</sub>

换行<br> Line Break

横线<hr>Horizontal Rule

长引用<bockquote>blockquote</blockquote>

短引用<q>quote</q>

3、通用

<span> span </span>

4、列表

------这里是一块一块的哦

无序标签<ul>

标签元素<li>unordered list </li>

             <li> unordered list </li>

            <ul>

-------

排序标签<ol>

标签元素<li>ordered list</li>

            <li> ordered list </li>

            <ol>

-------

5、其他

换行<br>( line break)

横线<hr>( horizontal  rule)

-----------------认识一些常见的标签-------------------------

<header>:表示页面或页面片段的页眉,通常包含网站的标志、导航链接和其他元素。

<nav>:表示导航链接的区域,通常包含指向网站各个部分的链接。

<main>:表示页面的主要内容区域,通常包含主要的文章、产品列表或其他主要内容。

<article>:表示独立的文章、博客帖子、评论或其他类似的内容块。

<section>:表示文档中的一个通用区块,通常包含一组相关的内容,如章节、页脚或侧边栏。

<aside>:表示文档中的一个附加区块,通常包含与主要内容相关但不是必须的内容,如侧边栏、广告或引用。

<footer>:表示页面或页面片段的页脚,通常包含版权信息、联系方式和其他元素。

--------------------------------------

图片

安装好后,可以下载几个插件,方便我们后续更好的学习

二、举个栗子

图片

first:新建一个文件

最好命名为index.html

至于为什么

后面你就知道了

图片

如何跳出html的模板呢?

这里有两种方法

一种是 !,注意是要英文的 !

图片

另一种就是在代码框里敲html就会有提示

我们选择html:5

图片

两种方式都会形成同样的模板

极大的方便我们进行网页设计

图片

图片

就上面的基础知识,做一些例子

最好的例子就是实践了嘛

图片

前面几句代码都容易理解,最后一句

<a href="www.baidu.com" target="_blank">go to baidu</a>

<a>一个HTML超链接标签

target="_blank" 属性,这意味着当用户点击这个链接时,链接将在新的浏览器窗口或标签页中打开。

href="www.baidu.com":就是我们点击链接后将访问的网页

go to baidu:这部分是链接的可见文本

-------------附录----源码--------------

给那些不想敲代码的朋友点福利,但真心想学好的就得好好敲代码了

世界就是这么残酷呜呜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link> 标签可以引入css文件等
    <style>标签是 可以直接在这里写css代码
    <script>标签可以直接写js代码,还可以使用src属性引入js文件-->
</head>
<body>
    <h1>标题一 header</h1>
    <em>斜体emphasis</em><br>
    <u>下划线underline</u><br>
    <a href="www.baidu.com" target="_blank">go to baidu</a>
    <!-- <h2>注释</h2>
     <strong>加粗</strong> 
     <span>通用文本</span>
     <li>unordered list</li>标签要放到<ul></ul>或<ol></ol>里面-->

</body>
</html>

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

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

相关文章

Redis开发03:常见的Redis命令

1.输入以下命令&#xff0c;启动redis。 sudo service redis-server start 如果你是直接安装在WSL的&#xff0c;搜索栏搜索Ubuntu或者点击左下角Windows图表找到U那一栏&#xff0c;直接打开Ubentu&#xff0c;输入账密后&#xff0c;输入“sudo service redis-server start”…

(超详细图文详情)Navicat 配置连接 Oracle

1、下载依赖文件 Oracle官网下载直链&#xff1a;https://www.oracle.com/database/technologies/instant-client/winx64-64-downloads.html 夸克网盘下载&#xff08;oracle19c版本&#xff09;&#xff1a;https://pan.quark.cn/s/5061e690debc 官网下载选择对应 Oracle 版…

Istio_05_Istio架构

Istio_05_Istio架构 ArchitectureControl PlanePilotCitadelGalley Data PlaneSidecarIstio-proxyPilot-agentMetadta Exchange Ambient Architecture 如: Istio的架构(控制面、数据面) Gateway: Istio数据面的出/入口网关 Gateway分为: Ingress-gateway、Egress-gateway外部访…

如何使用GCC手动编译stm32程序

如何不使用任何IDE&#xff08;集成开发环境&#xff09;编译stm32程序? 集成开发环境将编辑器、编译器、链接器、调试器等开发工具集成在一个统一的软件中&#xff0c;使得开发人员可以更加简单、高效地完成软件开发过程。如果我们不使用KEIL,IAR等集成开发环境&#xff0c;…

快速搭建一个博客!!!“Halo框架深度优化:搭建你的个性化博客或网站”

目录 引言&#xff1a; 一. 首先服务器上去下载一个docker 1.可以参考官方地址&#xff1a; 2. 通过宝塔来一键安装&#xff01;&#xff01;&#xff01; 3.也可以自己下载&#xff01;&#xff01;&#xff01; 1.卸载旧版 2.配置Docker的yum库 3.安装Docker 4.启动和…

pcb线宽与电流

三十年一路高歌猛进的中国经济&#xff0c; 中国经历了几个三十年&#xff1f; 第一个三十年&#xff1a;以计划为导向。 第二个三十年&#xff1a;以经济为导向。 现在&#xff0c;第三个三十年呢&#xff1f; 应该是以可持续发展为导向。 传统企业摇摇欲坠&#xff0c; 新兴企…

23种设计模式-抽象工厂(Abstract Factory)设计模式

文章目录 一.什么是抽象工厂设计模式&#xff1f;二.抽象工厂模式的特点三.抽象工厂模式的结构四.抽象工厂模式的优缺点五.抽象工厂模式的 C 实现六.抽象工厂模式的 Java 实现七.代码解析八.总结 类图&#xff1a; 抽象工厂设计模式类图 一.什么是抽象工厂设计模式&#xff1f…

VSCode修改资源管理器文件目录树缩进(VSCode目录结构、目录缩进、文件目录外观)workbench.tree.indent

文章目录 方法点击左下角小齿轮点击设置点击工作台&#xff0c;点击外观&#xff0c;找到Tree: Indent设置目录树的缩进 方法 点击左下角小齿轮 点击设置 点击工作台&#xff0c;点击外观&#xff0c;找到Tree: Indent设置目录树的缩进 "workbench.tree.indent"默认…

Transformer.js(七):ONNX 后端介绍 - 它是什么、如何将pytorch模型导出为ONNX格式并在web中使用

在前面的文章中&#xff0c;我介绍了关于transformer.js的一些内容&#xff0c;快速连接&#xff1a; 1. 运行框架的可运行环境、使用方式、代码示例以及适合与不适合的场景2. 关于pipe管道的一切3. 底层架构及性能优化指南4. 型接口介绍5. Tokenizer 分词器接口解析 6. 处理工…

玄机应急:linux入侵排查webshell查杀日志分析

目录 第一章linux:入侵排查 1.web目录存在木马&#xff0c;请找到木马的密码提交 2.服务器疑似存在不死马&#xff0c;请找到不死马的密码提交 3.不死马是通过哪个文件生成的&#xff0c;请提交文件名 4.黑客留下了木马文件&#xff0c;请找出黑客的服务器ip提交 5.黑客留…

消息队列详解:从基础到高级应用

本文主旨 撰写这篇文章的目的在于向读者提供一个全面理解消息队列概念及其在实际应用中重要性的指南。通过从RocketMQ的基础组件如生产者、消费者、主题等的介绍到更高级的概念&#xff0c;比如集群消费与广播消费的区别、顺序消息的重要性等&#xff0c;我们希望能够帮助开发…

qt QGraphicsRotation详解

1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类&#xff0c;它专门用于处理图形项的旋转变换。通过 QGraphicsRotation&#xff0c;你可以对 QGraphicsItem&#xff08;如形状、图片等&#xff09;进行旋转操作&#xff0c;从而创建动态和吸引人的视觉…

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件libtinfo.so.5的问题 2024/11/29 20:41 缘起&#xff1a;中科创达的高通CM6125开发板的Android10的编译环境需要。 [ 11% 15993/135734] target Java source list: vr [ 11% 15994/135734] target …

云轴科技ZStack助力 “上科大智慧校园信创云平台”入选上海市2024年优秀信创解决方案

近日&#xff0c;为激发创新活⼒&#xff0c;促进信创⾏业⾼质量发展&#xff0c;由上海市经济信息化委会同上海市委网信办、上海市密码管理局、上海市国资委等主办的“2024年上海市优秀信创解决方案”征集遴选活动圆满落幕。云轴科技ZStack支持的“上科大智慧校园信创云平台”…

【ArcGIS Pro】实现一下完美的坐标点标注

在CAD里利用湘源可以很快点出一个完美的坐标点标注。 但是在ArcGIS Pro中要实现这个效果却并不容易。 虽然有点标题党&#xff0c;这里就尽量在ArcGIS Pro中实现一下。 01 标注实现方法 首先是准备工作&#xff0c;准备一个点要素图层&#xff0c;包含xy坐标字段。 在地图框…

聚云科技×亚马逊云科技:打通生成式AI落地最后一公里

云计算时代&#xff0c;MSP&#xff08;云管理服务提供商&#xff09;犹如一个帮助企业上云、用云、管理云的专业管家&#xff0c;在云计算厂商与企业之间扮演桥梁的作用。生成式AI浪潮的到来&#xff0c;也为MSP带来全新的生态价值和发展空间。 作为国内领先的云管理服务提供…

brew安装mongodb和php-mongodb扩展新手教程

1、首先保证macos下成功安装了Homebrew&#xff0c; 在终端输入如下命令&#xff1a; brew search mongodb 搜索是不是有mongodb资源&#xff0c; 演示效果如下&#xff1a; 2、下面来介绍Brew 安装 MongoDB&#xff0c;代码如下&#xff1a; brew tap mongodb/brew brew in…

图像显示的是矩阵的行和列,修改为坐标范围。

x 3; y 3; f1x x^2 y^2; guance1 f1x; F (x, y) sqrt((x.^2 y.^2 - guance1).^2); % 使用点乘 [x, y] meshgrid(0:1:5, 0:1:5); Z F(x, y); figure; imagesc(Z); % 由于 imagesc 使用矩阵索引作为坐标&#xff0c;我们需要手动添加刻度 % 这里我们假设 x 和 y 的范围…

深入理解Redis线程模型

前置目标&#xff1a;搭建一个Redis单机服务器。搭建过程参考前面的文档&#xff08;https://blog.csdn.net/Zhuxiaoyu_91/article/details/143904807&#xff09;。 建议调整的redis核心配置&#xff1a; daemonize yes # 允许后台启动 protected‐mode no #关闭保护模…

机器学习实战:泰坦尼克号乘客生存率预测(数据处理+特征工程+建模预测)

项目描述 任务&#xff1a;根据训练集数据中的数据预测泰坦尼克号上哪些乘客能生存下来 数据源&#xff1a;csv文件&#xff08;train.csv&#xff09; 目标变量&#xff1a;Survived&#xff08;0-1变量&#xff09; 数据集预览&#xff1a; 1、英文描述&#xff1a; 2、…