HTML
<caption></caption> 表头
<table></table> 表格
<tr></tr> 行
<td></td> 行内格
<tfoot></tfoot>
table中：aligh="center leht right" 对其方式[左，中，右]
rowspan="" 合并行
colspan="" 合并列
空格
  两个空格
  三个空格
【表单标签】
<form></form> 表单‘
action="/java2212/login"指定后台服务器路径
<input /> 输入框
<input type="输入类型"/>
text 文本输入
password 密码框，密文
radio 单选框，多框同name值
checkbox 复选框，多框同name值
date 日期
range 范围滑动框
file 文件
email 邮箱
button 可点击按钮
submit 可点击提交
reset 可点击重置
name值，用
value="默认值"
name="" 暂时不用，java用name获取输入框的值
placeholder="输入提示" 输入框提示
<select> 选项框
<option></option> 选项
</select>
<textarea></textarea> 可变大小文本域
【框架集标签】
cols将页面按照列分为几比几
rows将页面按照行分为几比几
<frameset cols="1,9">
<frame src="frame-a.html">
<frame stc="frame-b.heml">
</frameset>
【框架标签】
将a页面设置为target="namesss"
当a标签的页面内容指定在iframe内，就可以实现一个页面中的iframe实现可以打开多个页面
<iframe name="namesss" src="frame-a.hetm" width="900px" height="700px">
</iframe>
CSS
CSS叫层叠样式表,用来美化HTML,
也可以配合脚本动态的改变样式
提供代码复用,
与HTML代码分离,方便后期维护
使用方式
1、CSS样式与HTML标签在一起
在标签内，引入style
<!-- css与html在一起；在标签内使用style属性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>
2、css样式与html标签分离，但不出，使用
给标签id，css中用（#id名字）做连接
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d2{
width: 600px;
height: 600px;
background-color: green;
}
</style>
</head>
<body>
<div id="d2"></div>
</body>
</html>
3、css文件和html文件分离
1.得有html和css文件
2.在html中的head内中使用link引用css文件
语法格式
<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是样式表，固定写法 -->
<!-- href写入css文件的地址 -->
选择器
语法格式:
<style>
选择器{
属性:值;
属性:值;
}
<style>
标签选择器【重点】
指定标签类型，只要是这个标签就受影响
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>d1</div>
<div>d2</div>
<div>d3</div>
<input />
</body>
id选择器【重点】
用标签中定义的id来与css进行联系，一个id对应一个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
}
#d2{
width: 300px;
height: 300px;
background-color: green;
}
#d3{
width: 400px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<!-- id属性,是全局属性,所有标签都可以定义,id值要唯一 -->
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<input />
</body>
</html>
class选择器【重点】
和id格式基本一样，但class可以被多个标签同时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* style注释
.类名{}
*/
.yuju1{
background-color: antiquewhite;
}
.yuju2{
font-size: 3 0px;
}
</style>
</head>
<body>
<h1>岳阳楼</h1>
<!-- 标签加class属性,可以同时设置多个clss值,中间空格隔开 -->
<p class="yuju1 yuju2">岳阳楼上日衔窗，</p>
<p>影到深潭赤玉幢。</p>
<p class="yuju1">怅望残春万般意，</p>
<p>满棂湖水入西江。</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 标签[属性=值]{
} */
input[type=text]{
width: 350px;
height: 35px;
background-color: red;
}
</style>
</head>
<body>
<form action="/java2212/login">
用户名: <input type="text" value="" name="username" placeholder="首字母大写"/><br>
密码: <input type="password" name="password"/><br>
性别:<input type="radio" name="sex"/>男
<input type="radio" name="sex" />女<br>
爱好:<input type="checkbox" name="hobby"/>学习
<input type="checkbox" name="hobby"/>敲代码
<input type="checkbox" name="hobby"/>睡觉<br>
出生年月:<input type="date" name="birthday"/><br>
年龄:<input type="range" name="age"/>18<br />
头像:<input type="file" name="touxiang"/><br>
邮箱:<input type="email"/><br>
</form>
</body>
</html>
层级选择器
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 层级选择器
选择器1 选择器2 ...{}
选择器之间是空格,递进关系,在选择器1的基础上,
再进行选择器2的选择
*/
.d1 span{
background-color: red;
}
</style>
</head>
<body>
<div class="d1">
<p>d1-p</p>
<span>d1-s2</span>
</div>
<div>
<span>d2-s1</span>
<span>d2-s2</span>
</div>
</body>
组合选择器
选择器1,选择器2{
}
两个选择器会同时生效,两个选择器是平级关系
css属性
文字属性
font-family: 宋体; /*更改字体*/
font-size: 35px; /*更改字体大小*/
文本属性
color: red; /*字体颜色*/
text-align: center; /*文本居中*/
text-indent: 20px; /*缩进*/
背景属性
backgrouond-color： 颜色; /*更给背景颜色*/
background-image：url("图片地址")/*背景图片*/默认平铺background-repeat：no-repeat; /*不平铺*/
repeat-x; // repeat-y; /*x或y轴平铺*/
background-size:250px; /*背景图片大小*/
background-position: bottom; /*背景图片的地方*/
列表属性
.l1{
list-style-image: url("img/数字-1.png");
/*在列表中添加图片，比如[1]这样的序号小图片*/
尺寸属性【重点】
width:100px; 或者 100%;
height:100px; 或者 100%;
显示属性【重点】
display: none; /*不展示*/
display: block; /*显示: 按块显示*/
display: inline; /*显示,按行内显示*/
浮动属性float
float: right; /*浮动,会脱离当前的文档流*/
定位属性【重点】
相对定位
/*相对定位不会脱离原来的文档流
加了定位就可以使用位置属性: left,right,top,bottom
相对与父级进行位置移动*/
position: relative; /*相对定位*/
left: 30px;
top: 30px;
绝对定位
/*绝对定位会脱离原来的文档流
绝对定位是根据页面左上角进行位置移动*/
position: absolute; /*绝对定位*/
left: 30px;
top: 30px;
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)