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

Web开发——HTMLCSS

news 来源：原创 2024/9/29 3:04:06

1、概述

Web开发分前端开发和后端开发，前端开发负责展示数据，后端开发负责处理数据。
HTML&CSS是浏览器数据展示相关的内容。

1）网页的组成部分
文字、图片、音频、视频、超链接、表格等等
2）网页背后的本质
程序员写的前端代码
3）前端代码如何转换成用户眼中的网页
通过浏览器转化（解析和渲染）成用户看到的网页，浏览器中对代码进行解析和渲染的部分，称为浏览器内核。浏览器多种多样，相同的网页如何让浏览器展示一致的观感，这依赖于Web标准：

HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript：负责网页的行为（交互效果）

2 HTML & CSS

2.1 HTML和CSS概述

HTML：HyperText Markup Language，超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、
视频等内容。
标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
以下就是html代码以及css样式搭配之后的显示效果

2.2 快速入门

在这里插入图片描述
创建hello.html文件，并写入以下html代码

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

head用于定义浏览器头部，body用于定义主题部分
title标签用于定义标题，h1是1号标题，img用于引入一张图片，采用相对地址
浏览器展示效果如下：
在这里插入图片描述
HTML中标签的特点：

不区分大小写
标签中的属性值，采用单引号和双引号都可以
语法松散（即使不写闭合也能运行），建议语义严谨

2.3 CSS引入方式

在这里插入图片描述

2.4 颜色表示

在这里插入图片描述

2.5 CSS选择器

选择器是选取需设置样式的元素（标签）
语法如下：

选择器名 {css样式名：css样式值;css样式名：css样式值;
}

2.5.1 元素（标签）选择器

元素名称 {css样式名:css样式值；
}

示例：

div{color: red;
}

2.5.2 id选择器

#id属性值 {css样式名:css样式值；
}

示例：

#did {color: blue;
}

2.5.3 类选择器

.class属性值 {css样式名:css样式值；
}

示例：

.cls{color: green;
}

2.6 盒子模型

<!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>盒子模型</title><style>div {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 内边距, 上 右 下 左 */border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px; /* 外边距, 上 右 下 左 */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

根据padding、border和margin来设置盒子相关属性

2.7 新浪新闻页面

<!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>焦点访谈：中国底气 新思想夯实大国粮仓</title><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}/* 元素选择器 */p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}/* id选择器 */#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */margin: 0 auto;}</style>
</head>
<body><div id="center"><!-- 标题 --><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><span id="time">2023年03月02日 21:50</span><span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>央视网消息</strong> （焦点访谈）：*******************************************************</p><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg"><p>****************************************************************************</p><p id="plast">责任编辑：王树淼 SN242</p>  </div>
</body>
</html>

2.8 表格标签

<table> : 用于定义整个表格, 可以包裹多个，常用属性如下：
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing: 规定单元之间的空间
<tr> : 表格的行，可以包裹多个
<td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为

<!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>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>

展示效果如下
在这里插入图片描述

2.9 表单标签

2.9.1 表单

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签:
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?
    username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

<!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>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

页面展示效果
在这里插入图片描述
get方式提交

参数直接拼接在url后面
post方式提交

并未直接拼接在后面

用户名: <input type="text" name="username">

表单项必须指定name属性才能够提交到服务端，否则无法提交该表单。

2.9.2 表单项

在这里插入图片描述
示例：

<!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>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>