HTML基础学习
1、简单的HTML页面构造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 常见标签
mata 标签
<mata>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
有利于网站seo
<meta name="keywords" contents="网络安全，WEB渗透，数据安全，渗透测试，安全培训"/>
<link> 标签定义文档与外部资源的关系
<script>引入js文件
注释
<!--注释-->
<p>这是一段普通的段落</p>
标题标签
由大到小
<h1>标签<h1> h1-h6
<br> 换行标签
<hr>换行线标签
文本属性
<b></b>加粗
<i></i>斜体
<u></u>下划线
<sup></sup>上标
<sup></sup>下标
<del></del>删除线
<font></font>规定字体属性
size 字体的大小
color 字体颜色
代码样式原样输出
<pre></pre>
form表单 规定当提交表单时向何处发送表单数据
method 提交的方法有 get、post
get方式会在url上显示，传输的数据较短；
post方式不会在url上显示，传输的数据较长
规定在发送表单数据之前如何对其进行编码
enctype 属性可能的值
application/x-www-form-urlencoded
multipart/form-data
text/plain
input 标签
name：同样是表示的该文本输入框名称
size：输入框的长度大小
maxlength：输入框中允许输入字符的最大数
value：输入框中的默认值
readonly：表示该框中只能显示，不能添加修改
数据表单
<form method="get" action="" enctype="application/x-www-form-urlencoded">
账号:<input type="text" name="username" size="30" maxlength="10" value="admin" /> <br/>
密码:<input type="password" name="password" size="30"/> <br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
文件上传
<form method="get" action="" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" name="提交">
</form>
input 类型
type=password 密码输入框
type=file 文件上传
type=hidden 隐藏域
button 按钮
radio 多选框 checked=“checked” 默认选择
checkbox 复选框
type=submit 提交按钮
type=reset 重置按钮
textarea 文本域
<textarea rows="10" cols="20"> </textarea>
下拉选择框
<select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<filedest>
<legend>个人信息</legend>
</filedest>
边框
a标签、img标签、table标签
a标签的作用：就是用于控制界面与页面之间的跳转的
默认就是 _self
_self：用于在当前选型卡中跳转，也就是不新建页面跳转
_blank：用于在新的选项卡中跳转，也就是新建页面跳转
<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
锚文本
<a href="#2">锚点</a>
<a name="2">锚点</a>
img 元素向网页中嵌入一幅图像
<img sec="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香"/>
alt 规定图像的替代文本
sec 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度
table 表格
border 边框
width 宽度
height 高度
colspan 行
rowspan 竖
<th></th> 单元格的头信息
<tr>行</tr>
<td>表格</td>
cellpadding 单元边与内容的空白
cellspacing 单元格的空白
列表标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>
无序列表
项目符号 square circle disc
有序列表
数字列表 默认 数字
小写字母列表 a
大写字母列表 A
罗马字母列表 I
小写罗马字母列表 i
框架
frameset 不能在 body 内使用
frame 一般都是在 frameset 中使用
<frameset rows="30%,*">
<frame sec="http://www.baidu.com"/>
<frame sec="main.html">
</frameset>
cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸
scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）
yes 始终显示滚动条（及时不需要）
no 从不显示滚动条（及时需要）
div+css样式
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
样式表的基础语法
h1{color:red;font-size:14px;}
h1是选择器 color是属性 red是值
用花括号包围声明
内部样式表
.div{
background:red;
width:100px;
height:100px;
color:blue;
}
每行结束都使用分号
内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
import 引用样式
<style>
@import url(my.css);
</style>
<!DOCTYPE html>
<html lang="en">
<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>
<div class="demo1">
demo1
</div>
<p>这是一个段落</p>
<div id="demo2">
demo2;
</div>
</body>
</html>
类选择器
<style>
.demo1{
color:red;
background:blue;
}
</style>
元素选择器
<style>
.p{
color:red;
}
</style>
ID选择器
<style>
#demo2{
color:green;
}
</style>
*通配符选择器
<style>
.*{
color:blue;
}
</style>
举例：
<!DOCTYPE html>
<html lang="en">
<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>
<div class="demo1">
demo1
</div>
<div class="demo2">
demo2
</div>
<ul class="ul1">
<li>第一课</li>
<li>第二课</li>
</ul>
</body>
</html>
群组选择器
<style>
.div1,.div2{
width:400px;
height:400px;
}
</style>
后代选择器
<style>
.ul1 li{
color:red;
}
</style>
背景
background-color 规定要使用的背景颜色
background-position 规定背景图像的位置
background-size 规定背景图片的尺寸
background-repeat 规定如何重复背景图像
background-clip 规定背景的绘制区域
repeat 默认。背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次
inherit 规定应该从父元素继承 background-repeat 属性的设置
数据库的基本操作
1、MySQL登录与退出
输入mysql -u root -p
退出的三种方法
exit; quit;
2、MySQL数据库的一些解释
注意：数据库就相当于文件夹
表就相当于文件
3、mysql注释符
1.#....
2.--+ ...
3./*...*/
4、数据库中的一些基本操作
一、数据库的增删改查（sql语句）
增：create database db1;
删：drop database db1;
改：alter database bd1 charset utf8
查：show databases; 查看所有的数据库
设置默认的utf8，在配置文件中：写上character_set_server = utf8
use db2 代表鼠标双击切换目录
select database() 查看当前在哪个数据库
重命名数据库 RENAME database oldabname TO newdbname
show status; 显示一些系统特定资源的信息，例如，正在运行的线程数量
desc table_name; 显示表结构，字段类型，主键，是否为空等属性，但不显示外键
show databases; 查看这个mysql里面有多少个库
use schema_name; 选择数据库
show tables; 查看当前库里面所有的表
select paasword from user where user=‘root’;
查看当前数据库 里面的表user 用户为root的密码
二、table 表的操作
1.查看表结构
desc table_name;
DESCRIBE table_name;
2.查看表的内容
select * from table_name
3.建立表
create table 表名{
属性名 数据类型 [完整的约束条件]，
属性名 数据类型 [完整的约束条件]，
…
属性名 数据类型 [完整的约束条件]
};
完整的建立表的语句
create table user{id int(7) AUTO_INCREMENT,
username varchar(100) not null;
password varchar(100) not null;
PRIMARY KEY(id)
}ENGING=InnoDB DEFAULT CHARSET=utf8;
if not exists表示当相同的表名存在时，则不执行此创建语句，避免语句执行错误
create database if not exists [table_name];
ENGING=InnoDB DEFAULT CHARSET=utf8;
ENGING 设置表的引擎 和默认的字符类型
常见的数据引擎
InnoDB myisam
4.约束条件
PRIMARY KEY 标识该属性为该表的主键，可以唯一的标识对应的元组
FOREIGN KEY 标识该属性为该表的外键，是与之联系某表的主键
NOT NULL 标识该属性不能为空
UNIQUE 标识该属性的值是唯一的
AUTO_INCREMENT 标识该属性的值是自动增加的，这是MySQL语句的特色
DEFAULT 为该属性设置默认值
5.修改表的操作
修改表
格式：ALTER TABLE 旧表名 RENAME 新表名;
修改字段的数据类型
ALTER TABLE 表名 MODIFY 属性名 数据类型
修改字段名
ALTER TABLE 表名 CHANGE 旧属性名 新属性名 新数据类型;
增加字段名
alter table 表名 add 属性名1 数据类型 [完整性约束条件]
删除字段
alter table 表名 drop 属性名
更改表的存储引擎
alter table 表名 ENGINE = 存储引擎名
三、数据的增删改查
增
为表中所有字段添加数据
语法：insert into 表名(字段名1,字段名2,...)values (值1,值2,...);
insert into 表名 values(值1，值2...)
insert into 表名 set 字段名1=值1[,字段名2=值2,...]
同时添加多条1数据
insert into 表名[(字段名1,字段名2,...)] values (值1,值2,...),(值1,值2,...)
删
删除数据
部分删除
delete from 表名 [where 表达式]
全部删除
delete from 表名
改
更新数据
更新数据指对表中现存的数据修改
update 表名 set 字段名1=值1,[,字段名2=值2,...] [ where 条件表达式]
查
select 字段名1, 字段名2,... from 表名 [where 表达式]
select * from users
8667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
