JavaWeb之HTML-CSS --黑马笔记

什么是HTML ?

标记语言:由标签构成的语言。

注意:HTML标签都是预定义好的,HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

什么是CSS ?

开发工具

VS Code      --安装文档和安装包都在网盘中

链接:https://pan.baidu.com/s/1iZ0froMgC17TMu-9mT-jJw?pwd=8888 
提取码:8888

HTML标签

图片标签:

注意:该标签为自闭合标签。     -----自闭合标签不需要加斜杠。

路径:

标题标签:

水平分页线标签:

<hr>

CSS

CSS的三种引入方式

语法如下表格所示:

企业开发的使用情况如下:

颜色表示

CSS选择器

因为我们是做后台开发的,所以对于css选择器,我们只学习最基本的3种。

选择器通用语法如下:

我们需要学习的3种选择器是元素选择器,id选择器,class选择器。

元素选择器:

id选择器:

类选择器:

font-size

用来设置字体的大小,在设置字体的大小时,单位px不能省略,否则不生效。

举例:

/* ID选择器 */
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */}

超链接

举例:

a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉
超链接 下面默认的下划线 */}

视频、音频标签

举例:

<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3" controls></audio> -->

换行和段落标签

文本格式标签

举例:

<strong>央视网消息</strong>

几个常用CSS属性

注意事项:

盒子模型

示意图:

CSS盒子模型,其实和日常生活中的包装盒是非常类似的,就比如:

盒子的大小,其实就包括三个部分: border、padding、content,而margin外边距是不包括在盒 子之内的。

布局标签

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

测试:

<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>
<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>
<span>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
</span>
<span>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
</span>
</body>

浏览器打开后的效果:

CSS代码辅助示例:

<style>
div {
width: 200px; /* 宽度 */
height: 200px; /* 高度 */
box-sizing: border-box; /* 指定width height为盒子的高宽 */
background-color: aquamarine; /* 背景色 */
padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 可以简写: padding: 20px;*/
border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 ,  可以简写: margin: 30px; */}
</style>

表格标签

表单标签

表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如,我们经常在访问网站时,出现的登录页面、注册页面、个人信息提交页面,其实都是一个一个的表单 。 当我们在这些表单中录入数据之后,一点击 "提交",就会将表单中我们填写的数据采集到,并提交, 那其实这个数据呢,一般会提交到服务端,最终保存在数据库中。

注意:表单中的所有表单项,要想能够正常的采集数据,在提交的时候能提交到服务端,表单项必须指定name 属性。 否则,无法提交该表单项。

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

name属性规定 input 元素的名称,name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript 引用表单数据。

表单项

表单项的标签其实就只有三个分别是:

表单项,通过type属性控制输入形式

<select>:定义下拉列表,<option> 定义列表项

<textarea>:文本域

注意:对于input type="hidden",是一个隐藏域,在表单中并不会显示出来,但是在提交表单的时候, 是会提交到服务端的。

文档查阅

其余知识用到的时候可以查阅官方文档即可。

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

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

相关文章

基础数学问题整理

最近刷了一些关于基础数学问题的题目&#xff0c;大致是关于组合数、分解质因数还有一些思维题&#xff0c;题目来自洛谷的【数学1】基础数学问题 - 题单 - 洛谷&#xff0c;很多思路还是之前没有见过的&#xff0c;都是简单到一般难度的题目&#xff08;橙、题、绿题&#xff…

解读域用户属性值UserPrincipalName

在Active Directory (AD) 环境中&#xff0c;UserPrincipalName&#xff08;UPN&#xff09;属性是一个用于标识域用户的特殊属性&#xff0c;其解读如下&#xff1a; 全称&#xff1a;User Principal Name用途&#xff1a;UserPrincipalName 是一个基于Internet电子邮件地址格…

【视频编码\VVC】变换编码基础知识及标准设计相关参数

变化编码的基础知识 定义&#xff1a;变换编码是将以空间域像素形式描述的图像转换至变换域&#xff0c;以变换系数的形式加以表示。 大部分图像都包含较多平坦区域和内容变化缓慢的区域&#xff0c;使得图像能量在空间域的分散转换为变换域的相对集中分布&#xff0c;从而达…

爬虫实战--爬取简单文字图片并保存到mongodb数据库

文章目录 前言发现宝藏 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚&#xff0c;文章中如果有记录错误&#xff0c;欢迎读者朋友们…

UE中对象创建方法示例和类的理解

对象创建方法示例集 创建Actor示例 //创建一个护甲道具 AProp* armor GetWorld()->SpawnActor<AProp>(pos, rotator); 创建Component示例 UCapsuleComponent* CapsuleComponent CreateDefaultSubobject<UCapsuleComponent>(TEXT("CapsuleComponent&qu…

EasyX图形库学习(一、窗口创建函数initgraph、背景颜色设置setbkcolor、图形绘制函数)

目录 一、easyX图形库基本介绍 1、easyX的原理 2、easyX的安装 3、easyX的颜色&#xff08;RGB颜色模型&#xff09; 颜色模型相关函数: 4、easyX的坐标 二、相关函数介绍: 绘图设备相关函数&#xff1a; 图形颜色及样式设置相关函数: 图形绘制相关函数: 文字输出相关…

机器学习基础、数学统计学概念、模型基础技术名词及相关代码个人举例

1.机器学习基础 &#xff08;1&#xff09;机器学习概述 机器学习是一种人工智能&#xff08;AI&#xff09;的分支&#xff0c;通过使用统计学和计算机科学的技术&#xff0c;使计算机能够从数据中学习并自动改进性能&#xff0c;而无需进行明确的编程。它涉及构建和训练机器…

【开源】基于JAVA+Vue+SpringBoot的陕西非物质文化遗产网站

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 设计目标2.2 研究内容2.3 研究方法与过程2.3.1 系统设计2.3.2 查阅文献2.3.3 网站分析2.3.4 网站设计2.3.5 网站实现2.3.6 系统测试与效果分析 三、系统展示四、核心代码4.1 查询民间文学4.2 查询传统音乐4.3 增改传统舞…

蓝桥杯每日一题-----数位dp练习

题目 链接 参考代码 写了两个&#xff0c;一个是很久以前写的&#xff0c;一个是最近刚写的&#xff0c;很久以前写的时候还不会数位dp所以写了比较详细的注释&#xff0c;这两个代码主要是设置了不同的记忆数组&#xff0c;通过这两个代码可以理解记忆数组设置的灵活性。 im…

文件上传总结:用原生解决前端文件上传操作(单个,多个,大文件切片)

目录 第一章 前言 第二章 理解文件上传的对象 2.1 如何利用原生实现 2.2 认识理解文件上传的四个对象 2.2.1 file对象 2.2.2 blob对象 2.2.3 formData对象 2.2.4 fileReader对象 2.2.4.1 了解fileReader对象基本属性 2.2.4.2 了解 fileReader对象基本方法 2.2.4.3…

Spring Web Header 解析常见错误

在上一章&#xff0c;我们梳理了 URL 相关错误。实际上&#xff0c;对于一个 HTTP 请求而言&#xff0c;URL 固然重要&#xff0c;但是为了便于用户使用&#xff0c;URL 的长度有限&#xff0c;所能携带的信息也因此受到了制约。 如果想提供更多的信息&#xff0c;Header 往往…

【问题篇】activiti通过修改表手动退回流程

背景&#xff1a;在利用activi完成开发项目开发后&#xff0c;假设某一个正常走的流程功能用户想要回退到某一个环节去&#xff0c;重新审核或者编辑表单&#xff0c;我们在处理运维工作时经常会遇到这种情况&#xff0c;下面针对这种情况&#xff0c;记录一下自己的处理方式&a…