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 is called cascading style sheet, which is used to beautify HTML,
You can also change the style dynamically with the script
Provide code reuse,
Separated from HTML code, convenient for later maintenance
How to use
1. CSS styles and HTML tags together
In the tag, introduce style
<!-- css与html在一起；在标签内使用style属性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>
2. The css style is separated from the html tag, but it does not appear, use
Give the label id, use (#id name) in css to connect
<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. Separation of css files and html files
1. Must have html and css files
2. Use link in the head of html to refer to the css file
grammatical format
<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是样式表，固定写法 -->
<!-- href写入css文件的地址 -->
Selector
Grammar format:
<style>
选择器{
属性:值;
属性:值;
}
<style>
Label selector [key]
Specify the label type, as long as it is this label, it will be affected
<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 selector [important]
Use the id defined in the tag to communicate with css, one id corresponds to one tag
<!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 selector [key]
The format is basically the same as the id, but the class can be called by multiple tags at the same time
<!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>
attribute selector
<!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>
level selector
<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>
combination selector
选择器1,选择器2{
}
两个选择器会同时生效,两个选择器是平级关系
css properties
text attribute
font-family: 宋体; /*更改字体*/
font-size: 35px; /*更改字体大小*/
text attribute
color: red; /*字体颜色*/
text-align: center; /*文本居中*/
text-indent: 20px; /*缩进*/
background property
backgrouond-color： 颜色; /*更给背景颜色*/
background-image：url("图片地址")/*背景图片*/默认平铺background-repeat：no-repeat; /*不平铺*/
repeat-x; // repeat-y; /*x或y轴平铺*/
background-size:250px; /*背景图片大小*/
background-position: bottom; /*背景图片的地方*/
list attribute
.l1{
list-style-image: url("img/数字-1.png");
/*在列表中添加图片，比如[1]这样的序号小图片*/
Dimension attributes [key]
width:100px; 或者 100%;
height:100px; 或者 100%;
Display properties [key]
display: none; /*不展示*/
display: block; /*显示: 按块显示*/
display: inline; /*显示,按行内显示*/
float property float
float: right; /*浮动,会脱离当前的文档流*/
Positioning attributes [key points]
relative positioning
/*相对定位不会脱离原来的文档流
加了定位就可以使用位置属性: left,right,top,bottom
相对与父级进行位置移动*/
position: relative; /*相对定位*/
left: 30px;
top: 30px;
absolute positioning
/*绝对定位会脱离原来的文档流
绝对定位是根据页面左上角进行位置移动*/
position: absolute; /*绝对定位*/
left: 30px;
top: 30px;