Java Web 1HTML快速入门

news2024/12/26 19:15:55

目录

 一、Web开发介绍

1.什么是Web？

2.初识Web前端

二、HTML快速入门

1.什么是HTML、CSS？

2、案例练习

 3.小结

 三、VS Code开发工具

四、基础标签&样式（HTML）

2、实现标题--样式1（新闻标题的颜色）

3、实现标题--样式2（发布时间的样式）

4、实现标题--超链接

 5、实现正文--排版

 6、实现正文--布局

7、表格标签

8、表单标签

9、表单项标签

 一、Web开发介绍

1.什么是Web？

 （1) Web网站的工作流程

现在主流的开发模式：

早期开发模式：

 

 

（2）Web开发课程安排

 

2.初识Web前端

 

（1）Web标准

 

（2）Web前端开发课程安排

 

（3）小结 

 

二、HTML快速入门

1.什么是HTML、CSS？

 

2、案例练习

 

 <html>
		<head>
				<title>HTML 快速入门</title>
		</head>
		<body>
				<h1>Hello HTML</h1>
				<img src="1.jpg"/>
		</body>
</html>

 3.小结

 三、VS Code开发工具

 

四、基础标签&样式（HTML）

 
1、实现标题-排版 (1)示例代码

<!-- 文档类型为HTML --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
</head>
<body>
    <!-- img标签：
        src：图片资源路径
        width：宽度(px,像素；%，相对于父元素的百分比)
        height：高度（px，像素；%，相对于父元素的百分比）
        
        <img src="img/吴柳芳.jpg" width="80%">

    路径书写方式：
        绝对路径：
            绝对磁盘路径：<img src="C:\Users\OMEN\Desktop\HTML\img\吴柳芳.jpg">
            绝对网络路径：<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1v9RBo.img?w=534&h=689&m=6&x=341&y=232&s=209&d=209">   
        相对路径：
            ./：当前目录，可省略
            ../上一级目录
     -->

    <h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1>

    <img src="img/吴柳芳.jpg" width="20%" height="20%">

    <hr>
    2024年12月3日
    <hr>

</body>
</html>

 

 （2）小结

2、实现标题--样式1（新闻标题的颜色）

 

（1）示例代码

吴柳芳.html

<!-- 文档类型为HTML --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
    <!-- 方式二：内嵌样式 -->
    <!-- <style>
        h1{
            color: red;
        }
    </style> -->

    <!-- 方式三：外联样式 -->
    <link rel="stylesheet" href="css/news.css">
</head>
<body>

    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> -->

    <h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1>
    
    <img src="img/吴柳芳.jpg" width="20%" height="20%">

    <hr>
    2024年12月3日
    <hr>

</body>
</html>

 news.css

h1{
    color: red;
}

效果图：

（2）颜色表示形式

 

h1{
    /* color: red;
    color: rgb(0, 0, 255); */
    color: #00f;
}

（3）小结

 标签不用背，需要哪个就去官方文档中查哪个

3、实现标题--样式2（发布时间的样式）

（1）示例代码

<!-- 文档类型为HTML --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: #F5F5F5;
        }
        /* span{
            color: #676767;
        } */
        .cls{
            color:#676767;
        }
        body {
            background-color: #242424;
        }
    </style>

    <!-- 方式三：外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>

    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> -->

    <h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1>
    
    <img src="img/吴柳芳.jpg" width="10%" height="10%">

    <hr>
    <span class="cls">2024年12月3日 19:36</span> <span>msn报道</span>
    <hr>

</body>
</html>

 效果图： 

（2）CSS选择器

 

（3）小结

 

4、实现标题--超链接

（1）代码

<!-- 文档类型为HTML --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: #F5F5F5;
        }
        /* span{
            color: #676767;
        } */
        time{
            color:#676767;
        }
        body {
            background-color: #242424;
        }
        a{
            color:#F5F5F5;
            text-decoration: none;
        }
    </style>

    <!-- 方式三：外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>

    <!-- 方式一：行内样式 -->
    <!-- <h1 style="color: darkorange;">体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1> -->

    <h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1>
    
    <img src="img/吴柳芳.jpg" width="2%" height="2%">
    
    <a href="https://www.douyin.com/user/MS4wLjABAAAAmwXpX0yLvQT76vqZt6GBiMF_x9Pdt_80jJDht4Ezfpw?from_tab_name=" target="_self">吴柳芳个人抖音主页</a> >正文

    <hr>
    <span id="time">2024年12月3日 19:36</span> <span>msn报道</span>
    <hr>

</body>
</html>

效果：

 超链接：

 5、实现正文--排版

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</title>
    <style>
        h1{
            color: #F5F5F5;
        }
        
        #time{
            color:#676767;
        }
        body {
            background-color: #242424;
        }
        a{
            color:#F5F5F5;
            text-decoration: none;
        }
        p{
            text-indent: 35px;/* 首行缩进 */
            line-height: 40px;/* 行高 */
            color: #F4F4F4;
        }
        #plast{
            text-align: right;/* 对齐方式 */
        }
        /* 以下添加新样式规则，让正文里的图片、视频等也居中 */
        img,
        video {
            display: block;
            margin: 0 auto;
        }

    </style>

    
</head>
<body>

   
    <h1>体操世界冠军：吴柳芳！被怼擦边却获大众支持，粉丝猛涨破600万</h1>
    
    <img src="img/吴柳芳.jpg" width="2%" height="2%">
    
    <a href="https://www.douyin.com/user/MS4wLjABAAAAmwXpX0yLvQT76vqZt6GBiMF_x9Pdt_80jJDht4Ezfpw?from_tab_name=" target="_self">吴柳芳个人抖音主页</a> >&nbsp;正文

    <hr>
    <span id="time">2024年12月3日 19:36</span>&nbsp;&nbsp;<span>MSN报道</span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/吴柳芳.mp4" controls width="200px"></video>

    <p>
        <strong>MSN消息</strong>吴柳芳作为体操世界冠军，因为伤病影响未能踏上体操最高领奖台，无缘在奥运会摘金。所以，她的名字也并未被大众熟知。然而，随之奥运冠军管晨辰怒怼其擦边，走进大众的视野中。不过，出人意料的是大众并没有像管晨辰那样去指责吴柳芳，或者说反而是大部分网友支持吴柳芳，这究竟是为什么呢？
    </p>

    <img src="img/吴柳芳1.jpg" width="20%" height="20%">

    <p>
        吴柳芳，前中国国家女子体操队队员，目前已经退役。曾经获得09年体操世界杯捷克站高低杠冠军、10年体操世界杯多哈站平衡木冠军、体操世界杯法国站平衡木冠军、体操世界杯根特站高低杠冠军。2011年体操世界杯根特站平衡木冠军 ，2012年亚洲体操锦标赛女团冠军、亚洲体操锦标赛女子高低杠冠军，2013年天津东亚运动会女团冠军。此后，因伤退役淡出大众视野。
    </p>

    <p id="plast">
        责任编辑：付深麟
    </p>

</body>
</html>

效果图：

 

 （2）小结

 6、实现正文--布局

（1）盒子模型

 （2）示例程序

效果：

 

（3）小结

7、表格标签

 

（1）示例代码

 

（2）小结

 

8、表单标签

 

（1）示例代码

 效果：

检查模式：

 

（2）小结

 

9、表单项标签

 

（1）示例代码

 

效果：

 

小结：

 

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

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

相关文章

【Python网络爬虫笔记】7-网络爬虫的搜索工具re模块

【Python网络爬虫笔记】7-网络爬虫的搜索工具re模块

目录 一、网络爬虫中的正则表达式和re模块&#xff08;一&#xff09;数据提取的精确性&#xff08;二&#xff09;处理复杂的文本结构&#xff08;三&#xff09;提高数据处理效率 二、正则表达式的内涵&#xff08;一&#xff09;、常用元字符&#xff08;二&#xff09;、量…
阅读更多...
42_GAN网络详解(2)---常见的GAN

42_GAN网络详解(2)---常见的GAN

DCGAN CGAN 条件生成对抗网络&#xff08;Conditional Generative Adversarial Networks, CGAN&#xff09;是生成对抗网络&#xff08;Generative Adversarial Networks, GAN&#xff09;的一种变体&#xff0c;由Mehdi Mirza和Simon Osindero在2014年提出。CGAN的主要改进在…
阅读更多...
PC端阅读器--koodo reader

PC端阅读器--koodo reader

官网&#xff1a;请在必应搜索引擎上输入 koodo reader GitHub&#xff1a;GitHub - koodo-reader/koodo-reader: Windows, macOS, Linux and Web 123云windows版&#xff1a;Koodo-Reader-1.5.1.exe下载 提取码&#xff1a;4455 优&#xff1a; 1.开源&#xff0c;懂&#x…
阅读更多...
PyQt设计界面优化 #qss #ui设计 #QMainWindow

PyQt设计界面优化 #qss #ui设计 #QMainWindow

思维导图 通过qss实现ui界面设计优化 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性&#xff0c;它是用来美化UI界面。实现界面和程序的分离&#xff0c;快速切换界面。 首先我们在Pytchram创建一个新目录 然后将我们所需要的图片打…
阅读更多...
多维数组及其应用————13

多维数组及其应用————13

1. 二维数组 如果我们把 ⼀维数组做为数组的元 素&#xff0c;这时候就是⼆维数组&#xff0c; ⼆维数组作为数组元素的数组被为三维数组&#xff0c;⼆维数组以上的数组统称 为多维数组。 1.1 二维数组的创建 先行后列 其实也可以这样理解&#xff1a;把二维数组当成特殊的一维…
阅读更多...
基于Java Springboot校园导航微信小程序

基于Java Springboot校园导航微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse微信开发…
阅读更多...
k8s，声明式API对象理解

k8s，声明式API对象理解

命令式API 比如&#xff1a; 先kubectl create&#xff0c;再replace的操作&#xff0c;我们称为命令式配置文件操作 kubectl replace的执行过程&#xff0c;是使用新的YAML文件中的API对象&#xff0c;替换原有的API对象&#xff1b;而kubectl apply&#xff0c;则是执行了一…
阅读更多...
【北京迅为】iTOP-4412全能版使用手册-第三十五章 WEB控制LED

【北京迅为】iTOP-4412全能版使用手册-第三十五章 WEB控制LED

iTOP-4412全能版采用四核Cortex-A9&#xff0c;主频为1.4GHz-1.6GHz&#xff0c;配备S5M8767 电源管理&#xff0c;集成USB HUB,选用高品质板对板连接器稳定可靠&#xff0c;大厂生产&#xff0c;做工精良。接口一应俱全&#xff0c;开发更简单,搭载全网通4G、支持WIFI、蓝牙、…
阅读更多...
轻量的基于图结构的RAG方案LightRAG

轻量的基于图结构的RAG方案LightRAG

LightRAG出自2024年10月的论文《LIGHTRAG: SIMPLE AND FASTRETRIEVAL-AUGMENTED GENERATION》(github)&#xff0c;也是使用图结构来索引和搜索相关文本。 LightRAG作者认为已有的RAG系统有如下两个限制&#xff0c;导致难以回答类似"How does the rise of electric vehi…
阅读更多...
分布式cap

分布式cap

P&#xff08;分区安全&#xff09;都能保证&#xff0c;就是在C&#xff08;强一致&#xff09;和A&#xff08;性能&#xff09;之间做取舍。 &#xff08;即立马做主从同步&#xff0c;还是先返回写入结果等会再做主从同步。类似的还有&#xff0c;缓存和db之间的同步。&am…
阅读更多...
AD7606使用方法

AD7606使用方法

AD7606是一款8通道最高16位200ksps的AD采样芯片。5V单模拟电源供电&#xff0c;真双极性模拟输入可以选择10 V&#xff0c;5 V两种量程。支持串口与并口两种读取方式。 硬件连接方式&#xff1a; 配置引脚 引脚功能 详细说明 OS2 OS1 OS2 过采样率配置 000 1倍过采样率 …
阅读更多...
[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

在现代Web开发中&#xff0c;Vue.js已经成为前端开发的热门选择之一。然而&#xff0c;将Vue.js项目打包并部署到生产环境可能会让一些开发者感到困惑。本文将详细介绍如何将Vue.js项目打包&#xff0c;并通过Tomcat服务器启动运行。 1. 准备工作 确保你的项目能够正常运行,项…
阅读更多...
服务器与普通电脑有什么区别？

服务器与普通电脑有什么区别？

服务器和普通电脑&#xff08;通常指的是个人计算机&#xff0c;即PC&#xff09;有众多相似之处&#xff0c;主要构成包含&#xff1a;CPU&#xff0c;内存&#xff0c;芯片&#xff0c;I/O总线设备&#xff0c;电源&#xff0c;机箱及操作系统软件等&#xff0c;鉴于使用要求…
阅读更多...
2.2 线性表的顺序表示

2.2 线性表的顺序表示

2.2.1 顺序表的定义 一、顺序表的基本概念 线性表的顺序存储又称顺序表。 它是用一组地址连续的存储单元依次存储线性表中的数据元素&#xff0c;从而使得逻辑上相邻的连个元素在物理上也相邻。 第1个元素存储在顺序表的起始位置&#xff0c;第i个元素存储位置后面紧接着存…
阅读更多...
游戏引擎学习第30天

游戏引擎学习第30天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 在这段讨论中&#xff0c;重点是对开发过程中出现的游戏代码进行梳理和进一步优化的过程。 工作回顾&#xff1a;在第30天&#xff0c;回顾了前一天的工作&#xff0c;并提到今天的任务是继续从第29天的代码开始&#xff0c…
阅读更多...
探索HarmonyOS：一键掌握Router与NavPathStatck的传参和页面回调技巧

探索HarmonyOS：一键掌握Router与NavPathStatck的传参和页面回调技巧

路由的选择 HarmonyOS提供两种路由实现的方式&#xff0c;分别是 Router 和 NavPatchStack。两者使用场景和特效各有优劣。 组件适用场景特点备注Router模块间与模块内页面切换通过每个页面的url实现模块间解耦NavPathStack模块内页面切换通过组件级路由统一路由管理 什么时候使…
阅读更多...
每日计划-1203

每日计划-1203

1. 完成 236. 二叉树的最近公共祖先 ​ /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/ class Solution {public:TreeNode* lowe…
阅读更多...
【AI系统】Auto-Tuning 原理

【AI系统】Auto-Tuning 原理

Auto-Tuning 原理 在硬件平台驱动算子运行需要使用各种优化方式来提高性能&#xff0c;然而传统的手工编写算子库面临各种窘境&#xff0c;衍生出了自动生成高性能算子的的方式&#xff0c;称为自动调优。在本文我们首先分析传统算子库面临的挑战&#xff0c;之后介绍基于 TVM…
阅读更多...
多组学数据如何发表高分SCI论文，以RNA-Seq数据为例

多组学数据如何发表高分SCI论文，以RNA-Seq数据为例

随着高通量测序以及生物信息学的发展&#xff0c;R语言在生物大数据分析以及数据挖掘中发挥着越来越重要的作用。想要成为一名优秀的生物数据分析者与科研团队不可或缺的人才&#xff0c;除了掌握对生物大数据挖掘与分析技能之外&#xff0c;还要具备一定的统计分析能力与SCI论…
阅读更多...
攻防世界-easyupload-新手训练区域

攻防世界-easyupload-新手训练区域

赛前回顾 1.文件上传绕过方式 1.mime&#xff1a;可以通过关闭浏览器js&#xff0c;浏览器f12切断点&#xff0c;burp抓包该文件类型来绕过 2.双写php绕过pphphp或者phpphp 3.使用ptml来绕过&#xff0c;phtml也是通过php来解析的 4..htaccess绕过&#xff0c;这个是apache的解…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023