以下是html和css代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- https://www.jb51.net/article/123738.htm VsCode插件整理(小结) -->
<!-- html:5直接生成html文件 table>tr*3>td*3
tr:行
td:列
width: 500px
height: 500px
text-align: center:文本居中
border="1":边框
colspan="2":合并列
-->
<table style="width: 500px;height: 500px;text-align: center;" border="5">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table style="width: 500px;height: 500px;text-align: center;" border="1">
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
<!--input标签要放在form标签中
接收用户的输入信息的输入域
属性:
id:某个标签的唯一标识,不允许重复
size:可以设置输入框的显示宽度
maxlength:设置输入框中最长允许输入的字符个数
disabeled:设置该输入框不能使用,即使有name 和 value值都不会被提交
readonly: 只读不许修改,内容可以被提交
placeholder:占位符
***value:输入框中接收的用户的输入的数据
***name:如果需要将数据传输到服务器,要设置name属性 相当于key 与value属性对应
***type:输入的方式
|-text 单行文本域 默认文本域的长度是20个字符
|-password 密码输入框,默认是以圆点替代输入的内容
|-radio 单选框,具有互斥性,是通过name属性来协同完成,一般情况我们需要对value赋个既定的值
|-checkbox 复选框 可以选择多个
|-hidden 隐藏输入框 需要发送给服务器的数据但是又不需要在页面上显示
|-file 文件域
|-submit 提交按钮
|-reset 重置按钮
|-button 普通按钮 多数情况下 是配合javascript一起使用
checked:用来表示radio或者checkbox中的某一项被选中
-->
<form action="www.baidu.com" method="GET">
姓名:<input type="text" size="35" name="name" value="雷军"> <br>
密码:<input type="password" name="pwd" >
</form>
<!--下拉框标签
select 父标签
|-option 选项
option 属性:
selected:表示该项是否被选中
value:
select 属性:默认是单选
name:
size: 多选时,设置下拉框可见的选项的数量
multiple:设置下拉框是否为多选,设置multiple = "multiple"表示为多选
注意:去掉size 那么同时也要去掉multiple
-->
<form action="" method="get">
城市:<select name="city" size="3" multiple="multiple">
<option value="请选择" selected="selected">--请选择--</option>
<option value="0">上海</option>
<option value="1">北京</option>
<option value="2">杭州</option>
<option value="3">深圳</option>
</select>
<input type="submit" value="提交"/>
</form>
<!--多行文本域标签 textarea 属性:cols: 设置列数 rows: 设置行数-->
<form action="" method="get">
<textarea name="txt" rows="10" cols="20">
</textarea>
<br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型布局</title>
<style>
.box_01{
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 50px;
margin: 25px;
}
</style>
</head>
<body >
<!-- div 是独占一行的 作用是用来划分区域 style属性:可以设置标签的样式,记得要放在开始标签
***注意:id,class,style是所有标签的通用属性-->
<div style="width: 300px;height:300px;background: red;">11</div>22
<div style="width:200px;height:200px;background: green;">12</div>
<div style="width:100px;height: 100px;background: blue;">13</div>
<!-- HTML <span> 元素是行内元素,能够用作文本的容器。 设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。 -->
<h1>我的<span class="red" style="color: red;">重要的</span>标题</h1>
<!--Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像 -->
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div class="box_01">这里是盒子内的实际内容。有 50px 内间距,25px 外间距、25px 绿色边框。</div>
<!-- 浮动可以使得元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。
效果:两个元素并排,且两个元素都能够设置宽度和高度。如下:float:left; float:right; -->
<div class="box1" style="width: 300px;height: 300px;background-color:green;float: left;"></div>
<div class="box2" style="width: 300px;height: 300px;background-color: red;float : right;"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position:absolute、relative、fixed</title>
<style>
div{
width:200px;
height:200px;
position:absolute;
left:100px; /*移动到距离最左100px的地方*/
top:50px; /*移动到距离最顶20px的地方*/
}
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
/*position:relation相对位置*/
#box1{
width:200px;
height:200px;
position:relative;
border:2px black solid;
}
/* 定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。 */
#box2{
position:absolute;
top:20px;
left:30px;
border:2px red solid;
}
</style>
</head>
<body>
<!-- Position css里经常用到它,使html元素在网页中精确定位
三种形式
绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)
-->
<!--position:absolute 如下面代码可以实现div元素(以一张200x200图片为例)相对于浏览器窗口向右移动100px,向下移动50px -->
<div><img src="../img/2.jpg" alt=""></div>
<!-- 相对定位 position:relative;
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,
-->
<!-- 相对于以前位置向下移动50px,向右移动100px -->
<div id="div1"></div>
<!-- 固定定位 fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。就像那些培训网站一打开右下角那个聊天窗口就是固定定位
position:fixed;(表示固定定位)
但我们经常会把相对定位和绝对定位搭配使用:Relative与Absolute组合使用
使用 position:absolute 可以实现被设置元素相对于浏览器(body)设置定位以后,
然后元素相对于其它元素(如他的上一层)进行定位,使用 position:relative 来帮忙搞定
-->
<!-- 参照定位的元素必须是相对定位元素的前辈元素 -->
<div id="box1">爸爸
<div id="box2">儿子
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式3种引入方式 css选择器</title>
<style>
#div01{
width: 50px;
height: 50px;
color: red;
}
</style>
<link rel="stylesheet" href="../css/my.css">
<!--链接css文件的代码-->
</head>
<body>
<!--
第一种:内部样式 直接写在head标签中 用sytle标签包裹 在style标签中书写样式:
选择器{属性1:属性值1;属性2:属性值2;}
缺点:1、不能把HTML和CSS分开 2、不具备重用性
第二种方式:行内样式:优先级最高
在需要写样式的标签中通过style属性来书写:
书写的方式:style="属性1:属性值1;..."
第三种方式:外部样式表
与内部样式表比较 优先级 看谁最后执行
使用的时候,在HTML文件的head标签中引入
通过link标签的href属性css文件的地址来引入
-->
<div id="div01">1</div>
<div id="div02" style="width: 100px;height: 100px;background-color: grey;">2</div>
<div id="div03">3</div>
<!--
id选择器 1、标签要有id 2、书写方式:#idName{ }
元素选择器: 什么是元素:从开始标签到结束标签所涵盖所有内容
书写方式:标签名{ }
优先级:id选择器>元素选择器的
类选择器:1、标签中有class属性 2、书写方式:.className{ }
class命名规则:字母,下划线,后面接字母,下划线,短线,数字
潜规则:多个单词用下划线或者短线连接
如果需要给class属性添加多个class样式,空格添加
例如:<div class="my-sytle my-font-size">01</div>
通配符选择器:* 表示选择所有的元素
优先级 行内样式>id选择器>类选择器>通配符选择器>元素选择器
-->
</body>
</html>
其中hello.css为
#div03{
width: 200px;
height: 200px;
background-color: aquamarine;
}