当前位置：首页 > news >正文

JavaWeb零基础学习Day1——HTMLCSS

news 2025/10/3 5:28:22

前言

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

一.HTML和CSS

1.含义

HTML：超文本标记语言

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

CSS：层叠样式表，用于控制页面的样式（表现）

2.快速入门步骤

新建文本文件，后缀名改为.html
编写HTML结构标签
在<body>中填写内容

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

特点：

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

二.基础样式及标签

1.标题排版

图片标签：<img>

src：指定图像的url（绝对路径/相对路径）
width：图像的宽度（像素/相对于父元素的百分比）
height：图像的高度（像素/相对于父元素的百分比）

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

水平线标签：<hr>

注：

绝对路径：绝对磁盘路径（D：xxxx）、绝对网络路径（https：//xxxx）
相对路径：从当前文件开始查找。（./：当前目录，../：上级目录）

2.标题样式

CSS引入方式：

行内样式：写在标签的style属性中（不推荐）

<h1 style = "xxx:xxx;xxx:xxx;">中国新闻</h1>

内嵌样式：写在style标签中（可以写在页面任何位置，但是通常写在head标签中）

<style>h1{xxx:xxxxxx:xxx}
</style>

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

<link rel = "stylesheet" href = "css/news.css">

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

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

注：font-size是设置字体大小（注意记得加上px）

3.超链接

标签：

<a href = "..." target = "...">央视网</a>

属性：

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是默认方式