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 est appelé feuille de style en cascade, qui est utilisée pour embellir le HTML,
Vous pouvez également changer le style dynamiquement avec le script
Fournir la réutilisation du code,
Séparé du code HTML, pratique pour une maintenance ultérieure
Comment utiliser
1. Styles CSS et balises HTML ensemble
Dans la balise, introduisez le style
<!-- css与html在一起；在标签内使用style属性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>
2. Le style css est séparé de la balise html, mais il n'apparaît pas, utilisez
Donnez l'identifiant de l'étiquette, utilisez (#id name) en css pour vous connecter
<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. Séparation des fichiers css et des fichiers html
1. Doit avoir des fichiers html et css
2. Utilisez le lien dans l'en-tête du html pour faire référence au fichier css
format grammatical
<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是样式表，固定写法 -->
<!-- href写入css文件的地址 -->
Sélecteur
Forme grammaticale :
<style>
选择器{
属性:值;
属性:值;
}
<style>
Sélecteur d'étiquette [touche]
Spécifiez le type d'étiquette, tant qu'il s'agit de cette étiquette, elle sera affectée
<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>
sélecteur d'identifiant [important]
Utilisez l'identifiant défini dans la balise pour communiquer avec css, un identifiant correspond à une balise
<!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>
sélecteur de classe [clé]
Le format est fondamentalement le même que l'id, mais la classe peut être appelée par plusieurs balises en même temps
<!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>
sélecteur d'attribut
<!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>
sélecteur de niveau
<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>
sélecteur de combinaison
选择器1,选择器2{
}
两个选择器会同时生效,两个选择器是平级关系
propriétés css
attribut de texte
font-family: 宋体; /*更改字体*/
font-size: 35px; /*更改字体大小*/
attribut de texte
color: red; /*字体颜色*/
text-align: center; /*文本居中*/
text-indent: 20px; /*缩进*/
propriété d'arrière-plan
backgrouond-color： 颜色; /*更给背景颜色*/
background-image：url("图片地址")/*背景图片*/默认平铺background-repeat：no-repeat; /*不平铺*/
repeat-x; // repeat-y; /*x或y轴平铺*/
background-size:250px; /*背景图片大小*/
background-position: bottom; /*背景图片的地方*/
propriété de la liste
.l1{
list-style-image: url("img/数字-1.png");
/*在列表中添加图片，比如[1]这样的序号小图片*/
Attributs de dimension [clé]
width:100px; 或者 100%;
height:100px; 或者 100%;
Propriétés d'affichage [clé]
display: none; /*不展示*/
display: block; /*显示: 按块显示*/
display: inline; /*显示,按行内显示*/
flotteur propriété flotteur
float: right; /*浮动,会脱离当前的文档流*/
Attributs de positionnement [points clés]
positionnement relatif
/*相对定位不会脱离原来的文档流
加了定位就可以使用位置属性: left,right,top,bottom
相对与父级进行位置移动*/
position: relative; /*相对定位*/
left: 30px;
top: 30px;
positionnement absolu
/*绝对定位会脱离原来的文档流
绝对定位是根据页面左上角进行位置移动*/
position: absolute; /*绝对定位*/
left: 30px;
top: 30px;