Java Web 1HTML快速入门

目录

 一、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）示例代码

 

效果：

 

小结：

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【流程图】各元素形状和含义

【流程图】各元素形状和含义

判定、文档、数据、数据库、流程处理节点 矩形 - 动词 平行四边形 - 图像 下波浪 - 数据 图片来源http://baike.cu12.com/bkss/62449.shtml
阅读更多...
利用机器学习预测离婚：从数据分析到模型构建（含方案和源码）

利用机器学习预测离婚：从数据分析到模型构建（含方案和源码）

背景介绍 在当今社会&#xff0c;婚姻关系的稳定性受到了多方面因素的影响&#xff0c;包括经济压力、沟通问题、个人价值观差异等。离婚不仅对夫妻双方产生深远的影响&#xff0c;还可能对子女的成长环境和社会稳定造成不利影响。因此&#xff0c;理解并预测可能导致离婚的因素…
阅读更多...
分层架构 IM 系统之 Router 架构分析

分层架构 IM 系统之 Router 架构分析

通过前面文章的分析&#xff0c;我们已经明确&#xff0c;Router 的核心职责是作为中央存储记录在线客户端的连接状态&#xff0c;Router 在本质上是一个内存数据库。 内存是一种易失性的存储&#xff0c;既如此&#xff0c;Router 的可用性如何保障呢&#xff1f; 副本是分布…
阅读更多...
二分查找常规实现

二分查找常规实现

使用二分查找有一个前提条件&#xff1a;要查找的数必须在一个有序数组里。在这个前提下&#xff0c;取中间位置数作为比较对象&#xff1a; 若要查找的值和中间数相等&#xff0c;则查找成功。 若小于中间数&#xff0c;则在中间位置的左半区继续查找。 若大于中间数&#x…
阅读更多...
C++ 之弦上舞：string 类与多样字符串操作的优雅旋律

C++ 之弦上舞：string 类与多样字符串操作的优雅旋律

string 类的重要性及与 C 语言字符串对比 在 C 语言中&#xff0c;字符串是以 \0 结尾的字符集合&#xff0c;操作字符串需借助 C 标准库的 str 系列函数&#xff0c;但这些函数与字符串分离&#xff0c;不符合 OOP 思想&#xff0c;且底层空间管理易出错。而在 C 中&#xff0…
阅读更多...
获取联通光猫的管理员密码

获取联通光猫的管理员密码

缘起&#xff1a;联通给免费更换了一个新的光猫&#xff0c;烽火的光路由&#xff0c;一个WAN口&#xff0c;4个LAN口&#xff0c;带USB接口&#xff0c;欣欣然接受。但是呢&#xff0c;发现以前的管理员密码CUAdmin不能用了。经过一系列查询&#xff0c;借助别人的经验&#x…
阅读更多...
数组练习（非最终版）

数组练习（非最终版）

作业1&#xff1a;使用二维数组输出杨辉三角 //杨辉三角 #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) {int i,j,n;scanf("%d",&n);int arr[n][n];for(i0;i<n;i){arr[i][0]1;arr[…
阅读更多...
【MySQL 进阶之路】索引概述

【MySQL 进阶之路】索引概述

第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构&#xff0c;就好比一本教科书的目录部分&#xff0c;通过目录中找到对应文章的页码&#xff0c;便可快速定位到需要的文章。MySQL中也是一样的道理&#xff0c;进行数据查找时&#xff0c;首先查…
阅读更多...
微积分复习笔记 Calculus Volume 2 - 3.3 Trigonometric Substitution

微积分复习笔记 Calculus Volume 2 - 3.3 Trigonometric Substitution

3.3 Trigonometric Substitution - Calculus Volume 2 | OpenStax
阅读更多...
业财一体化新篇章：外贸ERP软件重塑业务流程

业财一体化新篇章：外贸ERP软件重塑业务流程

业财一体化的定义&#xff08;Definition&#xff09; FMS&#xff0c;即财务管理软件&#xff08;Financial Management Software&#xff09;&#xff0c;涵盖了用于管理公司财务的多种工具和系统&#xff0c;包括预算管理、账务处理、报表生成等功能。 ERP&#xff0c;即企…
阅读更多...
Qt 信号与槽：UI设计的基础

Qt 信号与槽：UI设计的基础

Qt 的信号与槽机制是其最强大的功能之一&#xff0c;也是初学者理解 Qt 的第一步。它让对象之间的通信变得直观和高效。信号与槽类似于现实生活中的“呼叫和应答”模式&#xff1a;一个对象发出信号&#xff0c;另一个对象响应并执行动作。 什么是信号与槽&#xff1f; 信号与…
阅读更多...
QT 左右 上下，拉伸 分配窗口大小

QT 左右 上下，拉伸 分配窗口大小

要的效果是以下&#xff1a; QT C 两个QWideget A B现在有放在一个窗口QWideget Test内&#xff0c;初始比例要2&#xff1a;8 ,现在我要 A B 两个窗口中间 当鼠标移到他中间时&#xff0c;有条线&#xff0c;可以左右移动来控件 A B 窗口所占的大小widgetB &#xff08;有 wi…
阅读更多...
Linux 各个目录作用

Linux 各个目录作用

刚毕业的时候学习Linux基础知识&#xff0c;发现了一份特别好的文档快乐的 Linux 命令行&#xff0c;翻译者是happypeter&#xff0c;作者当年也在慕课录制了react等前端相关的视频&#xff0c;通俗易懂&#xff0c;十分推荐 关于Linux的目录&#xff0c;多数博客已有详细介绍…
阅读更多...
基于PyTorch框架的线性回归实现指南

基于PyTorch框架的线性回归实现指南

目录 ​编辑 1. 线性回归基础 2. PyTorch环境搭建 3. 数据准备 4. 定义线性回归模型 5. 损失函数和优化器 6. 训练模型 7. 评估模型 8. 结论 线性回归是统计学和机器学习中最基本的预测模型之一&#xff0c;它试图找到输入特征和输出结果之间的线性关系。在深度学习框…
阅读更多...
HYSPLIT下载及使用

HYSPLIT下载及使用

准备工作 官网基础教程&#xff1a;https://www.ready.noaa.gov/documents/Tutorial/html/index.html 使用 参考&#xff1a;https://blog.csdn.net/liaohaibing/article/details/112788701 下载之前还需要Graphical Utilities&#xff1a;https://www.ready.noaa.gov/HYSPLI…
阅读更多...
基于Java Springboot环境保护生活App且微信小程序

基于Java Springboot环境保护生活App且微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…
阅读更多...
骨架行为识别-论文复现

骨架行为识别-论文复现

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
【PyTorch】torch.distributed.elastic.multiprocessing.errors.ChildFailedError:

【PyTorch】torch.distributed.elastic.multiprocessing.errors.ChildFailedError:

报错说明 torch.distributed.elastic.multiprocessing.errors.ChildFailedError: 报错如图所示 报错分析 该报错是 torch 和 CUDA 版本不兼容导致。 &#xff08;一般N卡自带的CUDA版本与最新的torch版本相差较大&#xff09; 解决方案 1.查看自己的CUDA版本 # 查看自己的…
阅读更多...
Kylin Server V10 下基于Kraft模式搭建Kafka集群

Kylin Server V10 下基于Kraft模式搭建Kafka集群

一、Kraft 模式与 ZooKeeper 模式简介 在Kafka 2.8 之前，Kafka 重度依赖 ZooKeeper 集群做元数据管理、Controller 的选举等（统称为共识服务）；当ZooKeeper 集群性能发生抖动时，Kafka 的性能也会受到很大的影响。如下图所示： 在 Kafka 2.8 之后，引入了基于 Raft …
阅读更多...
ceph手动部署

ceph手动部署

ceph手动部署 一、 节点规划 主机名IP地址角色ceph01.example.com172.18.0.10/24mon、mgr、osd、mds、rgwceph02.example.com172.18.0.20/24mon、mgr、osd、mds、rgwceph03.example.com172.18.0.30/24mon、mgr、osd、mds、rgw 操作系统版本&#xff1a; Rocky Linux release …
阅读更多...
最新文章

Copyright @ 2022~2023