完整教程:JavaWeb零基础学习Day1——HTMLCSS

news/2025/10/4 9:03:09/文章来源:https://www.cnblogs.com/wzzkaifa/p/19125292

前 言

主包这边已经在大一的时候学过前端基础开发,所以同样学过的同学可以直接从day2的JS开始看起,但是基础不扎实的同学建议看一下day1,稍微掌握一下基础的即可,以后工作了可以直接用cursor对接需求。

一.HTML和CSS

1.含义

HTML:超文本标记语言

  • 超文本:超越了文本的限制,比普通文本更加强大。除了文字信息,还可以定义图片、音频、视频等内容。
  • 标记语言:由标签构成的语言
    • HTML标签都是预定义好的。eg:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。
    • HTML代码直接在浏览器中运行,HTML标签由浏览器运行。

CSS:层叠样式表,用于控制页面的样式(表现)

2.快速入门步骤

  • 新建文本文件,后缀名改为.html
  • 编写HTML结构标签
  • 在<body>中填写内容
html的快速入门

hello HTML

特点:

  • HTML标签不区分大小写
  • HTML标签属性值单双引号都可以
  • HTML语法松散

二.基础样式及标签

1.标题排版

图片标签:<img>

  • src:指定图像的url(绝对路径/相对路径)
  • width:图像的宽度(像素/相对于父元素的百分比)
  • height:图像的高度(像素/相对于父元素的百分比)

标题标签:<h1> - <h6>

水平线标签:<hr>

注:

  • 绝对路径:绝对磁盘路径(D:xxxx)、绝对网络路径(https://xxxx)
  • 相对路径:从当前文件开始查找。(./:当前目录,../:上级目录)

2.标题样式

CSS引入方式:

行内样式:写在标签的style属性中(不推荐)

中国新闻

内嵌样式:写在style标签中(可以写在页面任何位置,但是通常写在head标签中)

外嵌样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)

注:<span>标签无语义,作用是组合行内元素,不换行

优先级顺序:id选择器 > 类选择器 > 元素选择器

注:font-size是设置字体大小(注意记得加上px)

3.超链接

标签:

央视网

属性:

  • href:指定资源访问的url
  • target:指定在何处打开资源链接
  • _self:默认值,指的是在当前页面打开
  • _blank:在空白页面打开

如果不想默认添加超链接后变成蓝色和下划线,可以用text_decoration来规定添加到文本的修饰,none表示定义标准的文本

注:以上内容和样式包括其他的可以去https://www.w3school.com.cn/这个链接查看

三.正文

 1.正文排版

如果要设置首行缩进,可以在p标签的css样式中设置text_indent

br:换行标签

line-height:设置行高

b:加粗标签

text-align:设置对齐方式

注:在HTML中无论输入多少个空格,只会显示一个,可以使用多个空格占位符&nbsp来显示

2.页面布局

布局标签:在实际开发网页中,会大量使用div和span这两个没有语义的布局标签

标签:<div><span>

特点:

  • div标签:
    • 一行只显示一个(独占一行)
    • 宽度默认是父元素的宽度,高度默认由内容撑开
    • 可以设置宽高
  • span标签:
    • 一行可以显示多个
    • 高度和宽度默认由内容撑开
    • 不可以设置宽高

如果想要居中显示,可以用margin:0 auto,上下为0,左右一半,自动居中对齐

注:如果只是需要设置某一个方位的边框,内边距,外边距,可以在属性名后加上-位置,如:padding-top,padding-left....

四.表格和表单

1.表格标签

注:如果是表头单元格,用<th>拥有表头字体加粗及居中显示的效果;普通单元格用<td>即可

2.表单标签

  • 场景:在网页中主要负责数据采集功能,如:注册、登录等数据采集
  • 标签:<form>
  • 表单项:不同类型的input元素、下拉列表、文本域等等
    • <input>:定义表单项,通过type属性控制输入形式
    • <select>:定义下拉列表
    • <textarea>:定义文本域
  • 属性:
    • action:规定当提交表单时向何处发送表单数据,表单数据提交的url地址
    • method:规定用于发送表单数据的方式(GET、POST),其中GET是默认方式

注:表单项必须有name属性才可以提交

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

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

相关文章

淘宝联盟网站建设源码网站服务器租赁合同

疑问&#xff1a;Mysql多事务默认情况下&#xff0c;同时修改同一条记录运行修改吗&#xff1f;是否要手动加上for update行锁。 猜想&#xff1a;MySQL 会自动对涉及的数据行加上写锁&#xff08;排他锁&#xff09;&#xff0c;以确保数据的一致性和隔离性。这是在默认的事务…

2025十一集训——Day模拟赛

赛时: 四个题都很可做的样子, T3好像是原??? OK T1 简单二分,切了。 调 lowerbound 那里 +-1 的细节,8:50 成功过掉大样例。 开 T2。本文来自博客园,作者:zhangxiao666,转载请注明原文链接:https://www.cnb…

Qt纯代码实现智能安防集中管理平台/楼宇对讲管理系统/门禁管理/视频监控

一、前言说明 这个项目很多年前就完成的,属于一个定制的项目,最初做的事楼宇对讲相关的功能,后面陆续增加了门禁和视频监控,这些模块加起来,慢慢的形成了一个智能安防集中管理平台的模样,但是确切的说又不够标准…

在织梦网站做静态网页伦敦做网站

文章目录 一、Hazelcast简介1、Hazelcast概述2、Hazelcast之IMDG3、数据分区 二、Hazelcast配置1、maven坐标2、集群搭建&#xff08;1&#xff09;组播自动搭建 3、客户端4、集群分组5、其他配置 三、Hazelcast分布式数据结构1、IMap2、IQueue&#xff1a;队列3、MultiMap4、I…

长沙做网站推广代理记账公司注册需要什么条件

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 人工智能&#xff08;AI&#xff09;已经成为当今世界最具革命性的技术之一&#xff0c;它正在深刻改变各个行业&#x…

网站流量提升方法vps搭建asp网站

八爪鱼,被动收入,财务自由,现金流,现金流游戏,各银行利率,money,资产负债表,财务自由,资产管理,个人理财,管理个人资产,理财,打造被动收入,躺着赚钱,让钱为我打工

汉文博士词典库源文件已在 github 开放

无版权问题的词典源文件已从城通网盘转存至 Github: https://github.com/wmjordan/Hanbox.Dict 部分词典的编译配置文件需使用汉文博士 7.0 或更新的版本编译。

网站自己怎么制作做网站用asp还是php

3.1 表达式和语句 表达式一共分为三种&#xff1a; &#xff08;1&#xff09;变量或常量 运算符构成的计算表达式 &#xff08;2&#xff09;new 表达式&#xff0c;结果是一个数组或类的对象。&#xff08;后面讲&#xff09; &#xff08;3&#xff09;方法调用表达式&…

梧州市建设局网站数据来源网站怎么做脚注

问题描述: 我的团队一直在处理一个包含基于标准库的 SD 卡的项目。最近我们决定迁移到 HAL 并开始了。 幸运的是&#xff0c;我们项目的所有部分都尽可能地更改为 HAL&#xff0c;它们运行良好&#xff0c;但我们不知道为什么 SD 卡不能正常运行。 我们没有更改外设的配置时钟&…

读人形机器人30未来20年

读人形机器人30未来20年1. 长期技术可能性 1.1. AI与认知计算的进步1.1.1. 人形机器人进化的核心在于AI和认知计算的进步1.1.2. 未来的机器人将拥有比现今复杂得多的AI系统,能够进行细致入微的理解、基于情境的推理和…

Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技能奥秘

Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技能奥秘pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !importa…

wordpress站点改名推广方案框架

from: https://blog.csdn.net/dcrmg/article/details/52851913工业相机基础知识&#xff08;一&#xff09; CCD与CMOS 工业相机按照图像的传感器元件的不同分为CCD&#xff08;Charge Coupled Device,电荷耦合元件&#xff09;和CMOS&#xff08;金属氧化物半导体元件&#xf…

免费网站建设 百度一下手机功能网站案例

如何使用Python获取计算机用户名 一、Python自带的getpass模块可以用于获取用户输入的密码&#xff0c;但是它同样可以用来获取计算机用户名。 import getpassuser getpass.getuser() print("计算机用户名为&#xff1a;", user)二、使用os模块获取用户名 Python的…

产业园区招商团队快躺平了 - 智慧园区

招商人,你是否也曾被这些招商广告刷屏? “0租金”、“0物业费”; “水电暖全免”、“装免期10个月”; “交押金进即可办理入住”; 2025园区招商已经进入白热化阶段,园区之间的竞争早已不在是价值的比拼,已然演变…

DaYe-PhotoStudio-2 v2.0.0 安装教程(64位/AMD64)详细步骤

DaYe-PhotoStudio-2 v2.0.0 安装教程(64位/AMD64)详细步骤​DaYe-PhotoStudio-2​ 是一款 ​专业的照片编辑与处理软件,适用于 ​Windows 64位系统​(amd64/x64)。最新版本为 ​v2.0.0,提供了丰富的图像编辑功能…

股票资料API接口全解析:从技术原理到多语言实战(含实时行情、MACD、KDJ等技术指标数据与API文档详解)

股票资料API接口全解析:从技术原理到多语言实战(含实时行情、MACD、KDJ等技术指标数据与API文档详解)pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: b…

无锡专业网站推广电商运营怎么做如何从零开始

图像匹配matlab程序设计:1. 概念解释&#xff0c;2&#xff0e;数字图像匹配算法设计&#xff1a;⑴基于灰度的归一化匹配算法⑵基于灰度的快速模板匹配算法。三&#xff0e;相应matlab程序设计&#xff1a;1&#xff0e;数字图像匹配相关函数 2&#xff0e;数字图像匹配函数&a…

洛谷 P3545

洛谷 P3545https://www.luogu.com.cn/problem/P3545<—原题指路 很典的一道带反悔贪心 题意简述 一共 \(n\) 天。 第 \(i\) 天上午进货 \(ai\) 件商品,中午有一个顾客需要 \(bi\) 件商品,可以满足他或无视他。 要…

建材城电商网站建设专业模板网站制作哪家好

这篇文章将介绍将C# 7类库升级到C# 8&#xff08;支持可空引用类型&#xff09;的一个案例。本案例中使用的项目Tortuga Anchor由一组MVVM风格的基类、反射代码和各种实用程序函数组成。之所以选择这个项目&#xff0c;是因为它很小&#xff0c;并且同时包含了惯用和不常用的C#…