*[HTML]: (目录在网页右侧也有啊？)
==①==HTML基本知识
1.表单
1.1 表单分组
<html>
<head>
<title>表单</title>
</head>
<body>
<fieldset><!--将表单分组-->
<legend>注册新用户</legend><!--配合fieldst使用 定义分组的标题-->
<form action="#" method="post"><!--表单提交的地址为# 空-->
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td><!--单选和多选的name每一组要相同-->
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="fmale" /> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film" /> 看电影
<input type="checkbox" name="interest" value="code" /> 敲代码
<input type="checkbox" name="interest" value="game" /> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
1.2 表单多行文本框
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="post">
评论：<br />
<!--多行文本框 每行显示10个字符 显示5行-->
<textarea cols="60" rows="5">
评论区：
</textarea>
<br />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
2.列表
2.1 无序列表
2.1.1 普通设置无序列表的不同类型
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>无序列表</title>
</head>
<body>
<font size="10">无序列表</font>
<br />
<font size="9">
<!--项目列表符号类型-->
<ul>
<li>无</li>
<li type="disc">type默认值 实心圆</li>
<li type="square">正方形</li>
<li type="circle">空圆</li>
</ul>
</font>
</body>
</html>
2.1.2 CSS定义无序列表的不同类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS定义无序列表的不同类型</title>
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
2.2 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 从50开始往下有序排列 -->
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 以大写字母开始往下有序排列 -->
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 以罗马数字列表开始往下有序排列 -->
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
2.3 自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<!-- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。 -->
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
3.超链接
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>超链接标记</title>
</head>
<body>
<!-- target 打开方式 -->
<!--1 _self 原窗口打开 默认属性 -->
<!--2 _blank 新窗口打开 -->
<!--3 _parent 父框架集 中打开 -->
<!--4 _top 整个窗口中打开 -->
HuJinya的博客网址：<a rel="nofollow" href="https://www.hujinya.com" target="_blank">www.hujinya.com</a>
</body>
</html>
==②==CSS基本知识
1.Div+CSS
- 在HTML文档中引入CSS有4种方式
- 优先关系是：行内样式＞内嵌式＞导入式＞链接式
- 外部CSS文件不能包含任何的HTML标签
1.1 内嵌式
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>div+CSS-内嵌式CSS</title>
<!-- 内嵌式引入CSS只对其所在的HTML页面有效 -->
<!-- style 标记一般位于 title 标记后面 -->
<!-- 便于被提前加载和解析 -->
<style type="text/css">
/* 定义 h2 标记居中效果 */
h2 {
text-align:center;
}
/* 定义 div 标记的样式*/
/*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
div {
border:1px solid red;
width:300px;
height:80px;
color:blue;
font-size:28px;
margin:80px;
}
</style>
</head>
<body>
<h2>我会自己居中</h2>
<div>
div 意为：分割、区域
</div>
</body>
</html>
1.2 链入式
- 外部 style.css 代码
/* 定义 h2 标记居中效果 */
h2{
text-align:center;
}
/* 定义 div 标记的样式*/
/*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
div{
border:1px solid red;
width:300px;
height:80px;
color:blue;
font-size:28px;
margin:80px;
}
- HTML代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS链入式</title>
<!-- <link>元素可定义两个链接文档之间的关系 -->
<!-- 使用link标记将外部样式表文件链接到HTML文件中 -->
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h2>我会自己居中</h2>
<div>
div 意为：分割、区域
</div>
</body>
</html>
1.3 行内式
- 也称为内联样式
<!DOCTYPE html>
<html>
<head>
<title>行内式CSS样式表</title>
</head>
<body>
<!-- 当特殊的样式需要应用到个别元素时，就可以使用行内(内联)样式。 -->
<p style="color: red; margin-left: 50px">
his is a paragraph
</p>
</body>
</html>
1.4 导入式
- 外部 style.css 代码
/* 定义 h2 标记居中效果 */
h2{
text-align:center;
}
/* 定义 div 标记的样式*/
/*边框:1像素 实线 红色 div宽:300像素 高:80像素 文字颜色:蓝色 文字大小:28像素 外边距:80像素*/
div{
border:1px solid red;
width:300px;
height:80px;
color:blue;
font-size:28px;
margin:80px;
}
- 外部 red.css 代码
h2 {
color: red;
}
- HTML代码
<!DOCTYPE html>
<html>
<head>
<title>导入式CSS样式表</title>
<!-- 页面会先加载HTML，然后再去加载CSS，
这样就会造成页面样式的延迟。 -->
<style type="text/css">
/* 导入外部的 style.css 文件 */
@import url("style.css");
/* 导入外部的 red.css 文件 */
@import url("red.css");
</style>
</head>
<body>
<h2>我会自己居中、变红</h2>
<div>
div 意为：分割、区域
</div>
</body>
</html>
2.CSS选择器
- 标记选择器
- 类选择器
- id选择器
- 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器的使用</title>
<style type="text/css">
/* 标记选择器的定义 */
h2 {
color: pink;
font-size: 20px;
}
/* 类选择器的定义 */
.red_center {
color: red;
text-align: center;
}
.green {
color: green;
}
.font18 {
font-size: 18;
}
/* id 选择器的定义*/
#bold {
font-weight: bold;
}
#font24 {
font-size: 24px;
}
/* 通配符选择器的定义 */
/* 匹配页面中所有的元素，实际开发中不建议使用 */
* {
margin: 10px; /* 定义外边距 */
padding: 0px; /* 定义内边距 */
}
</style>
</head>
<body>
<!-- 通配符选择器设置整个页面10px外边距，0px内边距 -->
<!-- 标记选择器的使用 -->
<h2>粉色的字体，大小20px</h2>
<!-- 类选择器的使用-->
<!-- 同一个类选择器可以被多个标记引用，一个HTML标记也可以同时引用多个类选择器。-->
设置文字为红色,居中
<p class="green font18">设置文字为绿色，字号为18px</p>
<p class="red_center font18">设置文字为红色，居中，字号为18px</p>
<!-- id选择器的使用-->
<p id="bold">设置字体为粗体</p>
<p id="font24">设置字号为24px</p>
<!-- 错误写法 引用了同样的id选择器，虽然浏览器没有报错，但这种做法是不被允许的，因为在JavaScript语言中id值是唯一的。
<p id="font24">设置字号为24px</p>
-->
<p id="font24">设置字号为24px</p>
<!-- 错误写法，同一个标记对象不能同时引用多个id选择器，这样写不会有任何的CSS样式产生
<p id="font24 body">设置字号为24px，字体为粗体</p>
-->
<p id="font24 body">设置字号为24px，字体为粗体</p>
</body>
</html>
3.CSS常用属性
<style type="text/css">
/* 设置外边距属性 上右下左*/
.margin {
margin: 2px 2px 2px 2px;
}
/* 设置填充属性 上右下左 */
.padding {
padding: 2px 2px 2px 2px;
}
/* 置多个背景图像(并指定他们的位置) 可指定多个属性值，各属性值以空格分隔，没有先后顺序 */
/* 红色背景 背景图片为1.jpg 图像不平铺 右对齐 顶部对齐 */
.background {
background: #FF0000 url("1.jpg") no-repeat right top;
}
/* font-family属性指定一个元素的字体。可以把多个字体名称作为一个"回退"系统来保存。
如果浏览器不支持第一个字体，则会尝试下一个。 */
.font-family {
font-family: "宋体" "楷体";
}
/* 设置边框的宽度、样式、颜色 5像素，虚线，红色 */
.border {
border: 5px dotted red;
}
/* 设置字体的样式，小型的大写字体，字体粗细，文字大小 ，行高和文字的字体 */
/* 斜体，加粗，大小12像素，行高35像素，字体为楷体 */
.font {
font: italic bold 12px/35px "楷体";
}
/* 用于指定对象的高度 auto:默认值 */
.height {
height: 18px;
}
/* 设置行间的距离(行高) normal:默认值 */
.line-height {
line-height: 5px;
}
/* 设置指定文本的颜色 */
.color {
color: red;
}
/* 设置文本的对齐方式 */
.text-align {
text-align: center;
}
/* 设置文本的显示样式 line-through(删除线) overline(上划线)
underline(下划线) blink(闪烁效果) none(默认) */
.text-decoration {
text-decoration: blink;
}
/* 设置元素的垂直对齐方式 text-top(把元素的顶端与父元素字体的顶端对齐)……*/
.vertical-align {
vertical-align: top;
}
/* 用于指定对象的显示形式 inline(默认):此元素会被显示为内联元素，元素前后没有换行符。 */
.display {
display: ;
}
</style>
==③==JavaScript基本知识
1.DOM相关知识
# # #
JavaScript事件
onclick鼠标单击某个对象；ondblclick鼠标双击某个对象；onmousedown某个鼠标键被按下；onmouseup某个鼠标键松开；onmousemove鼠标被移动；onmouseout鼠标从某元素移开；onmouseover鼠标被移到某个元素之上；onfocus元素获得焦点；onblur元素失去焦点；onchange用户改变域的内容；onabort图像加载被中断；onerror当加载文档或图像发生某个错误；onload某个页面或图像被完成加载；onkeydown某个键盘的键被按下；onkeypress某个加盘的键被按下或按住；onkeyup某个键盘的键被松开；onreset重置按钮被点击；onresize窗口或框架被调整尺寸；onselect文本被选定；onsubmit提交按钮被点击；onunload用户退出页
