JavaWeb Day1——HTML-CSS
HTML：超文本标记语言。超文本：除了文字还可以定义图片，视频等。标记语言：由标签“<标签名>”构成的语言
HTML的标签已预订好，h1为题目，img为图片等等，代码直接在浏览器运行
点击查看代码
//开始标签 内容 结束标签
<h1>第一天的学习</h1>
//src为配置的属性，表示在本文件下的img文件夹下的名为1的png图片
<img src="img/1.png">
CSS：层叠样式表，用于控制页面的样式
点击查看代码
//将题目改为红色
<h1 style="color:red;">第一天的学习</h1>
HEML基本骨架
点击查看代码
<html>
<head> //网页头部，用来存放给浏览器的信息，如CSS
<title>第一天的学习</title> //在浏览器打开的标题
</head>
<body> //网页主体，用来存放给用户看的信息，如文字图片等
<h1>HELLO WORLD</h1>
<img src="img/1.webp">
</body>
</html>
代码的结果
html标签特点：1. 大小写不区分 2. 属性值除了“”，也可以用''3. 结构松散，不严谨
CSS引入方式
- 行内样式：在标签的style属性中
点击查看代码
<span style="color:gray;">2024年05月15日 20:07</span>
- 内部样式：在style标签中，可以在页面任意位置
点击查看代码
<style>
span{
color:gray;
}
</style>
- 外部样式：写在单独的.css文件中，要通过link标签在网页引入
点击查看代码
span{
color:gray;
}
点击查看代码
<link rel="stylesheet" href="css/news.css">
css选择器：用来选取需要设置样式的元素
盒子：页面中的所有元素都可以看做一个盒子，有盒子将页面的元素包含在一个矩形内，通过盒子视角更方便进行页面布局
盒子模型组成：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）
布局标签：
- div标签：一行只显示一个，宽度是默认父元素宽度，高度默认由内容撑开，可设置宽高
- span标签：一行可以显示多个，宽度与高度默认内容撑开，不可设置宽高
一个例子
点击查看代码
<html>
<head>
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 视口设置,让页面宽度等于设备屏幕屏幕宽度，页面初始缩放比例为1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 兼容模式设置,让页面在ie模式下渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日学习</title>
<!-- 内联样式 -->
<style>
a {
text-decoration: none;
}
p {
font-size: 20px; /* 注释：设置段落字体大小 */
line-height: 30px; /* 注释：设置段落行高 */
text-indent: 2em; /* 注释：设置段落首进2个字符 */
}
/* 注释：设置容器宽度为700px，居中对齐 */
#container {
width: 700px;
margin: 0 auto;
}
#div{
width: 700px;
margin: 0 auto;
background-color: rgb(251, 251, 251);
padding: 20px;color: rgb(0, 0, 0);
border: 1px solid rgb(5, 0, 0); }
</style>
</head>
<body>
<div id="div">
<!-- 标题，h1-h6，级别从大到小，字体大小依次越小 -->
<h1>今日学习所制作的网页</h1>
<!-- a标签用于定义超链接，href属性指定链接的目标地址 -->
<!-- target属性指定链接在何处打开，默认在当前窗口打开 -->
<!-- _blank表示在新窗口打开链接,_self表示在当前窗口打开链接 -->
<a href="https://www.cnblogs.com/tyrfg/p/19791561.html" target="_blank">HTML学习笔记</a>
<!-- 行内样式 -->
<span style="color: rgb(188, 186, 186);">2026年3月29日</span>
<!-- 备注正文 -->
<!-- 段落标签p，用于定义段落，段落之间用空行隔开 -->
<p>
2026年3月29日，我学习了HTML的基本语法，包括标题、段落、图片、视频等。</p>
<img src="12.png" width="700" ><br>
<p>
<STROng>HTML</STROng>的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
<br>
<video src="void/void11.mp4" controls width="700" ></video><br>
<audio src="void/void11.mp3" controls></audio><br>
<p><b>HTML</b>是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面 [12]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
</DIV>
</body>
</html>
结果为
flex布局：意为弹性布局，一种一维布局，可以为元素之间提供强大的空间分布与对齐能力。通过给父容器添加flex相关属性来控制子元素位置和排列方式
表单：在网页负责数据采集功能，标签为form，提交方式：1. get：默认，表单数据会出现在url后面，在浏览器中get请求大小有限制，并且如何包含隐私数据并不安全2. post：表单数据会在消息体/请求体中提交到服务器，安全并无限制
表单标签-表单项：1. input：表单项通过type控制输入形式，select：下拉列表。2. optipn定义列表项。3. texrarea：文本域
表单例子
点击查看代码
<html>
<head>
<title>交互界面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.navbar{
background-color: rgb(82, 152, 228);
padding: 10px;color: black;
border: 1px solid rgb(5, 0, 0);
}
.a{
padding: 10px;
border: 1px solid rgb(5, 0, 0);
background-color: rgb(255, 255, 255);
}
</style>
<body>
<div class="navbar">
<h1 style="font-size: 30px;font-family: '宋体';">首页</h1>
</div>
<br>
<div class="a">
<form action="/save" method="post">
姓名:<input type="text" name="name" id=""><br>
年龄:<input type="text" name="age" id=""><br>
性别:<label for="male">男</label><input id="male" type="radio" name="gender" id=""><label for="female">女</label><input id="female" type="radio" name="gender" id="">
<input type="submit" value="提交"><br>
学历:<select name="education" id="">
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
</select><br>
个人图片:<input type="file" name="image" id=""><br>
出生日期:<input type="date" name="time" id=""><br>
个人描述:<textarea name="description" id="" cols="30" rows="10"></textarea><br>
<input type="submit" value="提交">
</div>
</body>
</html>
结果
浙公网安备 33010602011771号