IDE的
使用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<!-- emmet命令 *符号可以指定生成几个子项 -->
<!-- []中填写标签的属性 -->
<!-- {}中填写内容 -->
<!-- ctrl + k 可以将代码进行格式化处理-->
<!-- ctrl + s 可以保存代码 -->
<li style="border:1px solid red">子项1</li>
<li style="border:1px solid red">子项2</li>
<li style="border:1px solid red">子项3</li>
<li style="border:1px solid red">子项4</li>
<li style="border:1px solid red">子项5</li>
<li style="border:1px solid red">子项6</li>
<li style="border:1px solid red">子项7</li>
<li style="border:1px solid red">子项8</li>
<li style="border:1px solid red">子项9</li>
</ol>
</body>
</html>
表单标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 奥卡姆剃刀原则：如非必要 勿增实体 --> <body> <!-- action属性 表示填写信息提交的服务器处理函数 --> <!-- get 会将信息明文的形式拼接在url后面 --> <!-- post 会将的信息保存在request包中，通过浏览器提交 --> <!-- get和post的区别 --> <!-- 1.安全性上的不同 get会拼在url上所以 安全性不高 post实在request包体中--> <!-- 2.参数位置上的不同 get在url中写参数 post在request --> <!-- 3.参数长度的不同 get会因为浏览器的限制而有可能不能完整的传递参数 post无此顾虑--> <!-- 4.缓存方式不同 get会保存在浏览器的历史记录中 post不会--> <!-- enctype urlencoded会使用url编码方式将表单信息进行编码--> <!-- form-data一般用来上传文件时使用 它使用二进制的数·据流传递信息 --> <!-- text/plain 使用明文--> <form action="#" method="get" enctype="text/plain"> <!-- input标签 使用交信息的标签 可在各种类型的input标签传递各种类型数据 --> <!-- type属性决定了标签的形式 --> <!-- name属性决定了提交表单信息时键值对键的名字 如果没有name input标签将成为摆设 不具备数据提交的能力--> <!-- size可以用来设置 标签的宽度 --> <!-- maxlenth可以设置字符的数量 --> <!-- checked 可以让单选/复选默认选中 --> <!-- readonly 只读属性 用户无法修改 --> <!-- disable 失效 用户无法修改的同时 标签也是失效了 不再进行上传 --> <!-- placehoder属性 可以用来预制一些提示信息 --> <!-- autofocus属性 可以自动聚焦到某个标签--> 用户名:<input type="text" name="username" maxlength="6" placeholder="请输入你的用户名"> <br> <!-- password用于输入密码 --> 密 码:<input type="password" name="password" value="11111"/><br> <!-- checkbox多选框 --> 爱 好:<input type="checkbox" name="fav" value="bk" checked>篮球 <input type="checkbox" name="fav" value="sing" checked>唱 <input type="checkbox" name="fav" value="jump" checked>跳 <input type="checkbox" name="fav" value="rap" checked>Rap <br> <!-- radio是单选框 使用name属性将多个radio进行关联 --> 性 别:<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <input type="radio" name="sex" value="跨性别" checked>跨性别 <br> <!-- email是一个输入框 会进行内容的检测 只有你输入内容符合邮箱的格式 提交时才不会报错 --> 邮 箱:<input type="email" name="email" autofocus/> <!-- submit 提交按钮 点击时会将表单中所有的信息提交到action指定的服务数据处理接口 --> <input type="submit"> <!-- button同submit --> <button>上传</button> <!-- file 类型 用于上传文件--> <input type="file" name="avarta"> <div style="width: 100px;height: 100px;"></div> <!-- reset类型 是重置按钮 一旦点击 之前录入用户信息全部清空 --> <input type="reset" > <!-- image类型是图片按钮 可以设置开发者想要的或者更优化按钮效果 本质上还是提交按钮 --> <input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px"> <!-- hidden隐藏域 一些无需用户键入信息可以自动获取的信息，可以使用hidden类型来上传--> <input type="hidden" name="location" value="西安"> <!-- h5推出的新标签 --> <!-- 颜色选择器 --> <input type="color"> <!-- 日期选择器 --> <input type="date"> <!-- 时期时间选择器 --> <input type="datetime-local"> <!-- 时间 --> <input type="time" name="" id=""> <!-- url输入框 规则是必须在起始部分写入https：//--> <input type="url"> <!-- 范围选择 --> <input type="range" max="100" min="20"> </form> </body> </html>
CSS 部分
css层叠样式表（cascading style sheet）
- 外链样式的好处
- 首先提高代码的复用性
- 他可以降低代码的耦合性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 第二种使用CSS的方式 页面样式 -->
<style type="text/css">
div{
width: 100px;
height: 200px;
background-color: black;
}
/* 第四种方式 @import */
@import url("css/new_file.css");
</style>
<!-- 第三种方式 外链样式 -->
<!-- <link rel="stylesheet" href="css/new_file.css"> -->
</head>
<body>
<!-- 第一种使用CSS的方式 ：行内样式-->
<!-- <div style="border: 1px solid rebeccapurple;width: 100px;height: 100px;">1</div> -->
<div></div>
<span></span>
</body>
</html>
基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 优先级关系 id > class > 标签 > * */
/* 通配符选择器：一般用于重置页面样式 */
*{
/* 间距 */
margin: 0px;
/* 边距 */
padding: 0px;
background-color: black;
}
/* id选择器 :对指定id的标签进行样式修整*/
#first_div{
width: 200px;
height: 200px;
border: 1px dotted red;
}
/* 类选择器：对引用该类的标签使用样式 */
.div_class{
width : 300px;
height: 300px;
background-color: aqua;
}
/* 标签选择器 ：作用于页面中所用相同的标签*/
div{
width: 100px;
height: 100px;
border:1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="first_div"></div>
<div class="div_class"></div>
<div class="div_class"></div>
</body>
</html>
包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 逗号选择器，可以将样式代码赋给多个选择器，选择器种类任意 */
div,.span_class,p{
padding: 10px;
background-color: aqua;
border: 1px dashed firebrick;
}
/* 子代选择器 */
/* ul > li{
border: 1px solid red;
} */
/* 后代选择器 */
ul li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>子项1</li>
<li>子项2</li>
<li>子项3</li>
<li>
<ol>
<li>子项的子项1</li>
<li>子项的子项2</li>
<li>子项的子项3</li>
<li>子项的子项4</li>
</ol>
</li>
</ul>
</body>
</html>