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 se llama hoja de estilo en cascada, que se utiliza para embellecer HTML,
También puede cambiar el estilo dinámicamente con el script.
Proporcionar reutilización de código,
Separado del código HTML, conveniente para el mantenimiento posterior
Cómo utilizar
1. Estilos CSS y etiquetas HTML juntos
En la etiqueta, introduce el estilo.
<!-- css与html在一起；在标签内使用style属性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>
2. El estilo css está separado de la etiqueta html, pero no aparece, use
Proporcione la identificación de la etiqueta, use (#id nombre) en css para conectarse
<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. Separación de archivos css y archivos html
1. Debe tener archivos html y css
2. Use el enlace en el encabezado de html para hacer referencia al archivo css
formato gramatical
<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是样式表，固定写法 -->
<!-- href写入css文件的地址 -->
Selector
Formato de gramática:
<style>
选择器{
属性:值;
属性:值;
}
<style>
Selector de etiquetas [tecla]
Especifique el tipo de etiqueta, siempre que sea esta etiqueta, se verá afectada
<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>
selector de id [importante]
Use la identificación definida en la etiqueta para comunicarse con css, una identificación corresponde a una etiqueta
<!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>
selector de clase [clave]
El formato es básicamente el mismo que el id, pero la clase puede ser llamada por múltiples etiquetas al mismo tiempo
<!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>
selector de atributos
<!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>
selector de nivel
<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>
selector de combinación
选择器1,选择器2{
}
两个选择器会同时生效,两个选择器是平级关系
propiedades css
atributo de texto
font-family: 宋体; /*更改字体*/
font-size: 35px; /*更改字体大小*/
atributo de texto
color: red; /*字体颜色*/
text-align: center; /*文本居中*/
text-indent: 20px; /*缩进*/
propiedad de fondo
backgrouond-color： 颜色; /*更给背景颜色*/
background-image：url("图片地址")/*背景图片*/默认平铺background-repeat：no-repeat; /*不平铺*/
repeat-x; // repeat-y; /*x或y轴平铺*/
background-size:250px; /*背景图片大小*/
background-position: bottom; /*背景图片的地方*/
propiedad de la lista
.l1{
list-style-image: url("img/数字-1.png");
/*在列表中添加图片，比如[1]这样的序号小图片*/
Atributos de dimensión [clave]
width:100px; 或者 100%;
height:100px; 或者 100%;
Mostrar propiedades [clave]
display: none; /*不展示*/
display: block; /*显示: 按块显示*/
display: inline; /*显示,按行内显示*/
flotante propiedad flotante
float: right; /*浮动,会脱离当前的文档流*/
Atributos de posicionamiento [puntos clave]
posicionamiento relativo
/*相对定位不会脱离原来的文档流
加了定位就可以使用位置属性: left,right,top,bottom
相对与父级进行位置移动*/
position: relative; /*相对定位*/
left: 30px;
top: 30px;
posicionamiento absoluto
/*绝对定位会脱离原来的文档流
绝对定位是根据页面左上角进行位置移动*/
position: absolute; /*绝对定位*/
left: 30px;
top: 30px;