目录
💖超链接标签讲解
🎁个人主页:tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
🎥 本文由 tq02 原创,首发于 CSDN🙉
🎄 本章讲解内容:JavaWed的HTML和CSS学习🎁欢迎各位→点赞👍 + 收藏⭐ + 评论📝+关注✨
编译器:VS Code
前言
在讲述HTML和CSS之前。我们需要确保是否安装了VSCode编译器。如果你还未安装,博主安装教导指南:http://t.csdn.cn/IdTFU
一.HTML和CSS的介绍
HTML:超文本标记语言,分为2个部分组成:超文本和标记语言
CSS:层叠样式表,用于控制页面的样式。
联系:CSS直接控制了HTML语言的大小、颜色等。
例如:使用HTML输出一句话,但是通过CSS,可以控制文字的大小、颜色、对齐方式。
💖HTML的基本框架
HTML使用标签来构成语言,而标签分为了两种:
- 带有标签体的标签< a>标签体< /a >
- 不带标签体的标签(自结束标签)< br/>,< hr/>
实例与讲解:
- 上图是HTML文档中必需的最基本的标签,<head>与<boby>
- 每一个标签都有其特性,但是大部分标签都是需要对应的闭合标签,例如:</head>就是<head>的闭合标签
- <head>标签:用于定义文档的头部,描述了文档的各种属性和信息,可包含标签::<base>, <link>, <meta>, <script>, <style>, 以及 <title>
- <body> 标签:包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
二.HTML常用标签大全
类型 | 标签 | 描述 |
基础标签 | <p> | 定义一个段落 |
<br> | 定义简单的换行 | |
<hr> | 定义水平线 | |
<!-...--> | 定义一个注释 | |
格式 | <b> | 定义粗体文本 |
< i > | 定义斜体文本 | |
< u > | 定义下划线文本 | |
< em > | 定义强调文本 | |
< del > | 定义被删除的文本 | |
< time > | 定义一个时间/日期 | |
表单 | <form> | 定义一个 HTML 表单,用于用户输入 |
< input > | 定义一个输入控件 | |
< label > | 定义input元素的标注 | |
< button > | 定义按钮 | |
< select > | 定义选择列表(下拉列表) | |
< option > | 定义选择列表中的选项 | |
图像 | < img > | 定义图像 |
< audio > | 定义声音,比如音乐或其他音频流 | |
< video> | 定义一个音频或视频 | |
链接 | < a > | 定义一个链接 |
< link > | 定义文档与外部资源的关系 | |
表格 | < table > | 定义一个表格 |
< th > | 定义表格中的表头单元格 | |
< tr > | 定义表格中的行 | |
< td > | 定义表格中的单元 | |
样式 | < style > | 定义文档的样式信息 |
< div > | 定义文档中的节 | |
< span > | 定义文档中的节 | |
< header > | 定义一个文档头部部分 |
注:CSS是层叠样式表,因此,最后一行是CSS当中的.
三.资源路径讲解
在HTML文档中,我们可能会需要使用图片 视频等,但是我们又怎么使用呢?
答案:通过资源路径放入
💖路径
路径可分为2种,绝对路径 相对路径
- 绝对路径:又细分成2种,一种是磁盘路径,另一种是网络路径
- 相对路径:指以当前文件资源所在的目录为参照基础,链接到目标文件资源的路径。
绝对路径
1.磁盘路径:某个文件在电脑当中的位置.
2.网络路径:指在计算机上查找的到的图片或者文档的链接(url):
图片的 网络路径查找->右击图片,复制图像链接
相对路径
相对路径中,有三个特殊含义的字符
./ : 代表的当前目录
../:代表的是上一级目录
/ : 代表跟目录,在win下指的是c盘,在linux下是跟目录,基本不用
例如:
当游戏文档访问奥特曼图片时,由于图片和游戏文档在相同的目录下,
相对路径为: ./奥特曼.png
而../one/cc/电影记录.doc ../代表上一个目录(one) /则代表当前目录下的某个文件
注: ./单独出现时,可以省略
💖图片<img>标签讲解
用于在文档中插入图片
语法格式:
- <img src="图片资源路径" >
- <img src="图片资源路径" width(或 length)=' 20px(或者 20%) ' >
第一种 将图片按原本大小展开.
第二种 输入宽度或者高度,会自动成比例展开,百分比是原来图片的宽度(高度)的百分比.
💖超链接<a>标签讲解
用于添加链接,当你点击文字时,自动跳转相关链接
语法格式:
- <a href= "" target = " " > 文本内容 </a>
href : 指定资源访问的url(链接)
target : 指定如何打开链接页面 (2种方法, _self:当前页面 _blank: 新的页面) 默认:_self
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
//点击tq02的博客,就可以进入
<a herf="https://blog.csdn.net/m0_74097410?type=blog" target=_blank >
tq02的博客
<a>
</body>
</html>
四.CSS
💖CSS的引入方式
想要控制页面样式,则需要在HTML文档中引入CSS,以便控制文档格式.
注: color:设置文本颜色 font-size:文本大小(数字后加px)
1.行内样式
写在某个标签中的style属性当中.
语法格式: <标签名 style=" 样式控制要求 "> 内容 </标签名>
示例:
2.外联样式
写在一个单独的.css文件当中,需要时,直接调用.
//new.css文件
p{
color: red;
font-size: 18px;"
}
//html文档
<html lang="en">
<head>
<title>Document</title>
//引入一个层叠样式表 herf接收文件路径
<link rel="stylesheet" herf="new.css">
</head>
<body>
</body>
//文档内容显示出来依然是 红色字体 字体大小为18
<p >
我爱中国,我爱学习,我爱Java,我爱CSDN
</p>
</html>
3.内嵌样式
写在style标签当中,然后进行使用.而这种方法又叫css选择器,接下来我们讲解三种CSS选择器.分别为:元素选择器 id选择器 类选择器
注:三种选择器必须在style标签当中,而style标签得在 head标签 里
完整代码:
<html lang="en">
<head>
<title>Document</title>
<style>
//元素选择器
p{
color:red;
}
//id选择器
#d{
color:red;
}
//类选择器
.cls{
color:red;
}
</style>
</head>
<body>
</body>
//--------------元素选择器
<p>
我爱中国,我爱Java,我爱学习。
</p>
//--------------id选择器
<p id="d">
我爱中国,我爱Java,我爱学习。
</p>
//--------------类选择器
<p class="cls">
我爱中国,我爱Java,我爱学习。
</p>
</html>
五.HTML页面布局
你有没有发现,我们编译出来的页面,似乎是全屏的,而不像平常的页面,可以把内容放在中间,例如下图,图中很明显内容是居中的,可是这到底是怎么操作的呢?
💖盒子模型介绍
页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局,在网页当中也需要使用盒子模型,而我们可以在当前网页右击,点击检查,然后可以从已计算中查看到盒子模型。
💖盒子模型组成
CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成.
内容区域(content): 我们存放的数据,可以设置高和宽
➢ 属性: width / height
➢ 常见取值:数字+px
边框区域(border): 设置边框粗细、边框样式、边框颜色效果
作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style solid(实线)、dashed(虚线)dotted(点线) 边框颜色 border-color 颜色取值 如:border:10px solid red;注:中间没有逗号
内边距( padding ):设置 边框 与 内容区域 之间的距离
语法格式:padding :上边距 右边距 下边距 左边距;
边距的取值:数+px 、 百分数
例:padding:10px 20px 30px 40px;上边距为10,右边距为20 下边距为30 左边距为40
padding:20px; 上下左右的边距都为20
padding:20%; 上下边距的距离都为页面的百分之20
外边距(margin):设置边框以外, 盒子与盒子之间的距离
语法格式: margin:上边距 下边距 左边距 右边距;
边距取值:数+px 、百分数
💖盒子模型的代码
盒子模型的创建:使用元素选择器----div{ }, 将盒子模型的数据包裹在div{ }当中并且必须得在style<>标签当中。
使用时: 将需要的排版的内容放在<div> 内容 </div>当中。
代码格式:
<html lang="en">
<head>
<title>Document</title>
<style>
div{
/* 盒子模型的各项数据 */
}
</style>
</head>
<body>
<div>
<!-- 放置在 内容区域 的文本内容 -->
</div>
</body>
</html>
而代码可能又存在三种情况
- 正常情况,每一个属性都存在。
- 某个属性不存在,例如,没有标明padding的值,则为0。
- 使用了box-sizing属性,当box-sizing=border-box时,原本content的高与宽,变成了border的高与宽了。
实例1:
实例2:
注:如果padding(内边距)、margin(外边距)、border(边框)在在代码中没有写出来,默认是为0。
实例3:
六.HTML的表格与表单
💖表格制作
表格的制作,需要使用到<table>标签,以及<tr>、<td>、<th>等
并且单元格的大小完全由字体大小所支撑。
标签 | 描述 | 属性值 |
<table> | 定义表格整体 | border(边框宽度)、width(表格高度)、cellspacing(单元之间的空间) |
<tr> | 表格的行 | 无 |
<td> | 定义单元格的内容 | 无 |
<th> | 定义表头单元格,加粗 | 无 |
代码示例:
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="10px" cellspacing="0" width="200px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>照片</th>
<th>种族</th>
</tr>
<tr>
<td>1</td>
<td>奥天</td>
<td><img src="https://i03piccdn.sogoucdn.com/3224facac5e1b61a" width="=100px"></td>
<td>神秘系</td>
</tr>
<tr>
<td>2</td>
<td>沫沫</td>
<td><img src="https://newsimg.5054399.com/uploads/userup/2306/21140255C28.jpg" width="100px"></td>
<td>超神</td>
</tr>
<tr>
<td>3</td>
<td>伊乐</td>
<td><img src="https://newsimg.5054399.com/uploads/userup/2306/211400423429.jpg" width="100px"></td>
<td>无</td>
</tr>
</table>
</body>
</html>
💖表单制作
问:什么是表单?
答:可以包含 单选框、复选框、单选框、文本域等
问:表单的标签是什么?
答:<form>
问:那如何表示为单选框或者复选框呢?
答:使用表单项 通过type属性 控制输入形式!
✨表单的基本格式
标签为<form> 属性有 action、method等。
action: 规定当提交表单时向何处发送表单数据----->链接
method:规定用于发送 表单数据 的方法----->get、post
< form action=" url " method=" post/get "> //各种各样的表单项 </form>
注 get:表单数据拼接在 url 后面,传输大小有限制
post: 表单数据在请求体中携带,大小无限制
✨表单项的介绍
<input>: 表单项,通过控制type属性控制 输出形式
<select>: 定义下拉列表 ,<option> 定义列表项
<textarea>:文本域
单行的输入字段
type取值:text
语法格式:<input type="text" name=" 表单的名称 ">
例如:
密码框
type取值:password
语法格式:<input type="password" name=" 表单的名称 ">
例如:
单选框
type的取值:radio
语法格式是:<input type="radio" name=" 表单的名称 " value=" 当前框的名字 ">
由于是单选框,所以得 表单的名称 一样。
时间框
时间分为三种,日期、时间、日期时间。
type的取值分别为:data time datatime-local
例如:
下拉框
不是使用input了,而是select、option,其option属性是 value。
例如:
文本域
不使用input,不同于单行输入框,可以选择框的宽和高,对应的属性:col、row
例如:
常见按钮框
分别是:按钮、垂直、提交
对应的type:button 、reset 、submit,属性值:value
例如:
细心的小伙伴们肯定可以发现,此时此刻,value的值直接显示在了按钮上。
总结
看你看到这里的时候,恭喜你成功得熟悉了HTML和CSS的操作。为了加深印象,博主写了一份代码供大家参考,以此来快速掌握HTML和CSS的操作。
<head>
<title>游戏</title>
<style>
#a{
width:592; height: 397;
background-image: url(//背景图链接 );
border: 5px solid blanchedalmond;
margin: 13% 32% 0% 32%;
}
h1{
text-align:center;
font-size: 30px;;
color: black;
}
p{
text-align:center;
}
#s{
width: 100px;
text-align:center;
}
</style>
</head>
<body>
<br>
<div id="a" >
<h1>
拳击游戏
</h1>
<br><br><br><br><br><br><br><br>
<p>
玩家: <input type="text" name="name"><br><br>
性别:<label><input type="radio" name="graden" value="1">男</label>
<label><input type="radio" name="graden" value="2">女</label><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> <input type="button" value="进入游戏"> <input type="button" value="关闭游戏">
</p>
</div>
</body>
</html>
--------------懒惰的tq02