校内课程笔记(DY)
HTML基础
220308
html基础标签与属性
由<xx>括起来的称之为标签,且分为单标签和双标签(一个开始一个结束)
<!DOCTYPE html>:声明文档类型<html>:网页文件根标签<head>:网页头部<title>:网站标题<style>:样式标签<body>:网页主体部分<div>:显示标签class:class为类属性,名为:div1且class的类名可重复<div class="div1">Hello World!!</div>
<div class="div1">Hello World!!!</div>id:属性为id的名不可重复dir:决定文本方向(左对齐还是右对齐)<div id="id1" dir="rtl">Hello World!!!</div>style:可在标签内直接添加样式long:指定元素内容的语言<div id="id2" style="color: greenyellow;" lang="">Hello World!!!</div><img>:图片标签tabindex:用于指定元素在Tab键下的次序<img tabindex="0" />
表单事件
<form>
<label>用户名:</label>
<input type="text" id="user" /><br />
<label>密码:</label>
<input type="password" id="password" /><br />
<!-- 通过单击鼠标事件,将用户名输入框的文本复制到密码框内 -->
<input type="button" value="复制" onclick="document.getElementById('password').value=document.getElementById('user').value" />
</form>
220309
<span>与<div>的用法
<span>和<div>标签都是无语义运算,唯一区别就是一个不换行,一个换行.<div>标签结束后自动换行,但<span>标签结束后并不会主动换行
样式
样式一般写在<head>标签内:<style type="text/css">
- background-color:背景颜色
background-color: black;:背景颜色定义为:black(黑色) - color:文字颜色
color: white;:文字颜色定义为:white(白色) - text-align:对齐方式
text-align: center;:对齐方式定义为:center(居中对齐) - padding:内边距
padding: 5px;:内边距定义为:5px(5像素) - line-height:行高
line-height: 30px;:行高定义为:30px(30像素) - height:高度
height: 300px;:高度定义为:300px(300像素) - width:宽度
width: 100px;:宽度定义为:100px(100像素) - float:浮动
float: left;:浮点定义为:left(靠左) - padding:内边距
padding: 5px;:内边距定义为:5px(5像素)
常用标签
<br>回车会自动转换成空格,把多个空格解释为一个空格,换行只能使用br标签<p>会自动在其前后创建一些空白,浏览器会自动添加这些空间,也可以在样式表中规定<pre>可定义预格式化的文本标签,保留输入源文档的原本格式
如果图片加载失败会显示alt标签内的文字,width设置图片宽度,height设置图片高度
<img src="https://img.mole9630.top/blog-logo.png" alt="图片加载失败" width="100px" height="100px" />
<img src="https://img.mole9630.top/example.png" alt="图片加载失败" />
220314
超链接
<a>:a标签定义超链接,href指示链接的目标
<a href="https://mole9630.top">摩尔的个人引导页</a><br />
<a href="/example.html"></a>
#xx:可跳转到指定锚点(锚点链接)
<a href="#html_base">跳转到html基础</a><br />
<a href="#css_base">跳转到css基础</a><br />
<a href="#js_base">跳转到js基础</a><br />
<h1 id="html_base">HTML基础</h1><br />
<h1 id="css_base">CSS基础</h1><br />
<h1 id="js_base">JS基础</h1><br />
<a href="#main">回到顶部</a>
<!-- 空链接 -也可产生回到顶部的效果 -->
<a href="">回到顶部(空)</a>
<!-- 图片超链接 -->
<a href="https://www.mole9630.top">
<img src="https://img.mole9630.top/blog-logo.png" />
</a>
<!-- 邮件超链接 -->
<a href="maillto:me@mole9630.top">联系我们</a>
<!-- JS超链接 -->
<a href="javascript:alert('text')">点击</a>
图片热区链接
map与img一定要建立关联!
shape:形状coords:坐标
<map name="image_link">
<area shape="circle" coords="50,50,30" href ="https://mole9630.top/" alt="" />
<area shape="rect" coords="90,20,150,80" href ="https://mole9630.top/" alt="" />
<area shape="poly" coords="200,30,300,10,200,100,220,50" href ="https://mole9630.top/" alt="" />
</map>
<img usemap="#image_link" src="https://img.mole9630.top/blog-logo.png" />
无序列表
<ul>:定义无序列表
<li>:标签定义列表项目(标签可用在有序列表<ol>和无序列表<ul>中)
<ul type="circle">:定义项目符号为空心圆点<ul type="square">:定义项目符号为方块<ul type="disc">:定义项目符号为实心圆点
<ul type="circle">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
有序列表
<ol>:定义有序列表
<ol type="1">:定义编号为数字形式<ol type="A">:定义编号为大写字母形式<ol type="a">:定义编号为小写字母形式<ol type="I">:定义编号为罗马数字形式
<ol type="1">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
描述列表
<dl>:定义列表中的项目(标题)<dd>:对描述列表中的项目/名字进行描述<dt>:定义了定义列表中的项目
<dl>
<dt>电影</dt>
<dd>国产</dd>
<dd>欧美</dd>
<dd>日韩</dd>
<dt>电视剧</dt>
<dd>国产电视剧</dd>
<dd>欧美电视剧</dd>
<dd>日韩电视剧</dd>
</dl>
220315
form表单事件
<form>:用于为用户输入创建HTML表单,表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。action:定义表单提交的地址method:提交数据的形式(post get)radio:单选按钮checkbox:多选按钮submit:提交按钮reset:重置按钮button:按钮image:图片按钮file:文件上传按钮hidden:可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框).然后,JavaScript 可以删除hidden属性,以使此元素可见.
<form action="https://mole9630.top" method="get" style="width: 300px;height: 300px;background-color: #eeeeee;">
<input type="text" name="" id="" value="" /><br />
<input type="password" name="" id="" value="" /><br />
<!-- radio 单选按钮 -->
<input type="radio" name="" id="" value="" /><br />
<!-- checkbox 多选按钮 -->
<input type="checkbox" name="" id="" value="" /><br />
<!-- submit 提交按钮 -->
<input type="submit" name="" id="" value="提交" /><br />
<!-- reset 重置按钮 -->
<input type="reset" name="" id="" value="重置" /><br />
<!-- button 按钮 -->
<input type="button" name="" id="" value="按钮" /><br />
<!-- image 图片按钮-->
<input type="image" name="" id="" value="图片按钮" /><br />
<!-- file 文件上传按钮 -->
<input type="file" name="" id="" value="" /><br />
<!-- hidden 隐藏-->
<input type="hidden" name="" id="" value="" />
</form>
table表格
<table>:定义表格border:定义边框粗细cellspacing:定义单元格之间距离(外边距)cellpadding:定义单元格边沿与内容的距离(内边距)<table border="5" cellspacing="10" cellpadding="10" width="400" height="400"><thead>:用于组合html表格的表头内容<caption>:定义大标题<caption>职业调查</caption><tr>:定义行<th>:定义小标题<tr>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr><td>:定义单元格列<tr>
<td>张三</td>
<td>男</td>
<td>学生</td>
</tr><tbody>:用于组合html表格的主体内容<colgroup>:对表格列分组<col bgcolor>:设置列背景色<colgroup>
<!-- 设置三列背景色 -->
<col bgcolor="#c7edcc">
<col bgcolor="#c7edcc">
<col bgcolor="#c7edcc">
</colgroup><tfoot>:用于组合html表格中的表注/脚注内容<tfoot>
<tr>
<td>合计:</td>
<td colspan="2"></td>
</tr>
</tfoot>rowspan:合并单元格横跨两行colspan:合并单元格横跨两列<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
220316
利用form创建登录表单
<form action="https://mole9630.top/" method="get">
用户名:<input type="text" name="username" id="username" value="" /><br />
密码:<input type="password" name="pwd" id="pwd" value="" /><br />
<input type="reset" name="" id="" value="重置" />
<input type="submit" name="" id="" value="登录" />
</form>
利用form创建注册表单
<form action="login.html" method="get">
用户名:<input type="text" name="username" id="username" value="" />
<input type="button" name="checkuname" id="checkuname" value="检查可用性" /><br />
密码:<input type="password" name="pwd" id="pwd" value="" /><br />
确认密码:<input type="password" name="rpwd" id="rpwd" value="" /><br />
性别:<input type="radio" name="sex" id="man" value="Man" />男
<input type="radio" name="sex" id="woman" value="Woman" />女<br />
兴趣爱好:<input type="checkbox" name="interest" id="football" value="football" />足球
<input type="checkbox" name="interest" id="basketball" value="basketball" />篮球
<input type="checkbox" name="interest" id="pingpong" value="pingpong" />乒乓球
<input type="checkbox" name="interest" id="music" value="music" />音乐
<input type="checkbox" name="interest" id="dance" value="dance" />舞蹈<br />
上传头像:<input type="file" name="file" id="file" value="" /><br />
<input type="image" name="btnimg" id="btnimg" value="" src="https://img.mole9630.top/blog-logo.png" width="80" height="80" /><br />
<input type="reset" name="" id="" value="重置" />
<input type="submit" name="" id="" value="注册" />
</form>
textarea多行文本输入
<textarea>:定义多行的文本输入控件rows:控制行cols:控制列<textarea name="questionnaire" rows="20" cols="50">
select单选/多选菜单
<select>:创建单选或多选菜单selected="selected":表示默认选中此值<select name="homeplace">
<option value ="Shanghai">上海</option>
<option selected="selected" value ="Anhui">安徽</option>
</select>multiple="multiple":变为滚动可多选size:控制所显示的大小尺寸(个数)<select name="homeplace" multiple="multiple" size="5">
<option value ="Shanghai">上海</option>
<option selected="selected" value ="Anhui">安徽</option>
</select>
220321
<frameset>:定义一个框架集.它被用来组织多个窗口(框架).每个框架存有独立的文档.在其最简单的应用中,frameset元素仅仅会规定在框架集中存在多少列或多少行.您必须使用cols或rows属性.rows:表示行数cols:表示列数scrolling:是否显示滚动条noresize:定义框架不能调整大小<!-- 可用百分比代替,或用*号(代表剩余的比例) -->
<frameset rows="6%,22%,72%">
<!-- scrolling是否显示滚动条 noresize定义框架不能调整大小 -->
<frame src="list.html" scrolling="no" noresize="noresize">
<frameset cols="50%,*">
<frame src="https://www.mole9630.top" >
<frame src="https://github.com/mole9630" >
</frameset>
<!-- 默认显示的页面 -->
<frame src="https://mole9630.top" scrolling="no" noresize="noresize" name="showframe">
</frameset>noframes:不支持框架集时显示的内容,noframes或放置在frameset内也可以<noframes>
<body>
您的浏览器暂不支持该网页,请尝试更换浏览器!
</body>
</noframes>&xx:特殊的转义字符<div id="">
<!-- 这是第一段文字<div>这是第二段文字 则不能正常显示 -->
这是第一段文字<div>这是第二段文字<br />
<a href="https://tool.oschina.net/commons?type=2">HTML特殊转义字符对照表</a>
</div>
220322
制作一个新闻网站
登录页
<body>
<h1>新闻网站</h1>
<h2>登录</h2>
<!-- 宽度400px,高度300px,背景颜色灰色,文字居中 -->
<div id="" style="width: 400px;height: 300px;background-color: gainsboro;text-align: center;">
<!-- 设置为绝对位置,外边框60px 60px-->
<form action="news.html" method="" style="position: absolute;margin: 60px 60px;">
<label>用户名:</label><input type="text" name="username" id="username" value="" /><br /><br />
<label>密 码:</label><input type="password" name="userpwd" id="userpwd" value="" /><br /><br />
<input type="submit" name="btn" id="btn" value="登录" />
</form>
</div>
</body>
新闻首页
<body>
<h1>国内国际新闻</h1>
<table border="1" cellspacing="" cellpadding="">
<!-- 第一行 -->
<tr>
<td>
<h3> <a href="china.html">国内新闻</a> </h3>
</td>
<td>
<h3>热点新闻:</h3>
<table border="1" cellspacing="" cellpadding="">
<tr><td>这是第一条国内热门新闻.</td></tr>
<tr><td>这是第二条国内热门新闻.</td></tr>
</table>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>
<h3> <a href="">国际新闻</a> </h3>
</td>
<td>
<h3>热点新闻:</h3>
<table border="1" cellspacing="" cellpadding="">
<tr><td>这是第一条国际热门新闻.</td></tr>
<tr><td>这是第二条国际热门新闻.</td></tr>
</table>
</td>
</tr>
</table>
</body>
国内新闻页
<body>
<h1 id="top">国内新闻</h1>
<table border="1" cellspacing="" cellpadding="">
<tr>
<td><a href="#anhui">安徽新闻</a></td>
<td><a href="#hefei">合肥新闻</a></td>
</tr>
</table>
<table id="anhui" border="1" cellspacing="" cellpadding="">
<tr><td>
<h3>安徽新闻</h3>
</td></tr>
<tr><td>
<span>2022/03/22</span>
</td></tr>
<tr>
<td>
<p>这是一条安徽的新闻.</p>
<img src="img/p1.jpg" width="960" height="600"/>
<img src="img/p2.jpg" width="960" height="600"/>
</td>
</tr>
</table>
<a href="#top">回到顶部</a>
</body>
220323
CSS基础 CSS导入的4种方式
- 引入外部样式(推荐)
<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head> - 导入外部样式文件
<head>
<style type="text/css">
@import url("css/css.css");
</style>
</head> - 使用内部样式
<head>
<style type="text/css">
#div1 {
font-weight: 700;
font-family: "微软雅黑";
}
</style>
</head> - 使用内联样式(只对单个标签起作用)
<div id="div1" style="font-size: large;">
这是一段文字
</div>- 子标签会继承父标签的样式
<span style="font-size: 30px;">这是第一段文字<cite>这是第二段文字</cite>这是第三段文字</span><br />
- 子标签会继承父标签的样式
选择器
.的权重比#低,故#优先级高,.不执行 #div1与.div1统称为选择器,决定对哪个标签起作用 内的值称之为属性与属性值
- 并列方式实现,用逗号隔开
#div1,
.sp1 {
font-family: "等线";
} - 元素选择器
div {
color: cornflowerblue;
}
cite {
color: #c7edcc;
} - 通配符选择器
* {
font-family: "微软雅黑";
} - 属性选择器
/* 通过标签+属性(带有lang属性的所有td元素) */
td[lang] {
color: red;
}
/* title属性值为"a"的所有td元素 */
td[title="a"] {
color: #6495ED;
}
/* 属性中包含完整独立的单词"c",且前后可有空格的所有td元素 */
td[title~="c"] {
color: yellowgreen;
}
/* 属性值以"h"为开头的独立单词,后面口语跟连字符"-"的所有td元素 */
td[title|="h"] {
color: gold;
}
220328
选择器
- 后代选择器
h1 em{
color: red;
}
p span{
color: blue;
} - 子元素选择器
p>em{
color: darkcyan;
} - 兄弟选择器
h2+p{
color: coral;
}
#p1+p{
color: cornflowerblue;
} - ID选择器
#p2{
color: cadetblue;
} - 类选择器
.p1{
color: darkgoldenrod;
}
/* 一般省略第一个p,但也可以加上 */
p.p1
{
color: darkgoldenrod;
}
属性选择器
-
修改第一行的第一个字的样式
p:first-child::first-letter{
color: #FF0000;
font-size: 25px;
} -
修改所有p标签的第一行的样式(即自动换行)
p::first-line{
color: #6495ED;
} -
h1之后添加一个图片
h1::after{
content: url('http://img.mole9630.top/blog-logo.png');
}
伪类
- 激活时
a:active{
font-size: 30px;
} - 在上方时
a:hover{
color: brown;
} - 未访问链接
a:link{
color: red;
} - 已访问链接
a:visited
{
color: coral;
} - 获得焦点
input:focus{
color: darkviolet;
} - 第一字元素
li:first-child{
color: green;
} - lang属性选择器(括号内部需要有值)
li:lang(cn){
color: lightseagreen;
}
220329
CSS属性
background-color:定义背景颜色 颜色可以用英文单词,#十六进制,rgb来定义<td style="background-color: aquamarine;">这是第一个表格</td>
<td style="background-color: #c7edcc;">这是第二个表格</td>
<td style="background-color: rgb(245,125,200);">这是第三个表格</td>background-repeat: repeat-x:沿x轴方向平铺<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: repeat-x;">
</div>background-repeat: repeat-y:沿y轴方向平铺<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: repeat-y;">
</div>background-repeat: no-repeat:背景图片不重复<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;">
</div>background-position: center center:将图片固定在中间border: solid 2px red:设置一个像素为2的红色边框<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;background-position: center center;border: solid 2px red;">
</div>background-position: left bottom:将图片固定在左下角<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;background-position: left bottom;border: solid 2px red;">
</div>background-position: 20% 45%:将图片固定在约x轴20%,y轴45%的位置<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;background-position: 20% 45%;border: solid 2px red;">
</div>background-position: 85px 158px:将图片固定在x轴85px,y轴158px的位置<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;background-position: 85px 158px;border: solid 2px red;">
</div>background-position: 500px 500px:超出div范围,无法显示<div id="" style="width: 200px;height: 200px;background-image: url(img/cpm.gif);background-repeat: no-repeat;background-position: 500px 500px;border: solid 2px red;">
</div>background: gray url(img/cpm.gif) no-repeat scroll center center:简写,分别顺序对应颜色 图片 重复 是否固定 位置<div id="" style="width: 200px;height: 200px;border: solid 2px red;background: gray url(img/cpm.gif) no-repeat scroll center center;">
</div>
字体属性
font-family: '等线','微软雅黑':设置字体 多个字体用逗号隔开 如果等线浏览器不支持则使用微软雅黑,都不支持则使用浏览器默认字体<p style="font-family: '等线','微软雅黑';font-size: x-large;">这是一段文字</p>font-size: 30px:字体大小设置为30像素<p style="font-family: '等线','微软雅黑';font-size: 30px;">这是一段文字</p>font-size: 200%:字体大小设置为原来的2倍font-style: italic:设置为斜体<p style="font-family: '等线','微软雅黑';font-size: 200%;font-style: italic;">这是一段文字</p>
<hr >
<p>abcdefg ABCDEFG</p>font-variant: small-caps:小写字母转换为小型大写字母<p style="font-variant: small-caps;">abcdefg ABCDEFG</p>font-weight: 800:加粗字体<p style="font-family: '等线','微软雅黑';font-size: 200%;font-style: italic;font-weight: 800;">这是一段文字</p>font:简写,顺序为:样式 变形 是否加粗 字体大小 字体<p style="font: italic small-caps 700 20px '等线','微软雅黑';">这是一段文字</p>
220330
文本属性
color: red:颜色的定义/* 颜色名定义 */
color: red;
/* 十六进制数定义 */
color: #FF0000;
/* rgb函数定义 */
color: rgb(255, 0, 0);
/* 透明(使用较少) */
color: transparent;
/* 是否继承父控件(使用较少) */
color: inherit;direction: rtl:右对齐direction: rtl;letter-spacing: 10px:字间距增加+10像素letter-spacing: 10px;line-height: 1.5:定义行高line-height: 1.5;
line-height: 15px;
line-height: 200%;text-align: center:相对于body居中<p style="text-align: center;">这是第二段文字(p)</p>text-align: right:相对于body右对齐<p style="text-align: right;">这是第四段文字(p)</p>text-decoration: overline:添加上框线<p style="text-decoration: overline;">这是第五段文字(p)</p>text-decoration: underline:添加下框线<p style="text-decoration: underline;">这是第六段文字(p)</p>text-decoration: line-through:添加删除线<p style="text-decoration: line-through;">这是第七段文字(p)</p>text-decoration: blink:添加闪烁效果(浏览器兼容性较差,一般不支持显示)<p style="text-decoration: blink;">这是第八段文字(p)</p>text-indent: 30px:缩进30个像素/20%text-indent: 20%:缩进20%<p style="text-indent: 30px;">这是第九段文字(p)</p>
<p style="text-indent: 20%;">这是第十段文字(p)</p>font-size: 20px;color: green;text-shadow: 5px 5px 3px #55aa7f:定义阴影 x轴5px y轴5px 3px模糊度 颜色为#55aa7f<p style="font-size: 20px;color: green;text-shadow: 5px 5px 3px #55aa7f;">这是第十一段文字(p)</p>text-transform: capitalize:所有单词首字母大写<p style="text-transform: capitalize;">This is the twelfth paragraph(p)</p>text-transform: uppercase:所有字母大写<p style="text-transform: uppercase;">This is the thirteenth paragraph(p)</p>text-transform: lowercase:所有字母小写<p style="text-transform: lowercase;">This is the fourteenth paragraph(p)</p>white-space: pre:保留原格式<p style="white-space: pre;">
这是第十五段文字(p)
12345 , 67890;
09876 , 54321.
</p>white-space: nowrap:不会随浏览器窗口大小自动换行<p style="white-space: nowrap;">这是第十六段长文字(p),to_long_to_long_to_long_long_to_long_to_long_to_long_long_to_long_to_long_to_long_long</p>word-spacing: 10px:定义单词之间的间距(通常只对西文有效,且是单词间隔)<p style="word-spacing: 10px;">这是第十七段文字(p) | This is the seventeenth paragraph(p)</p>
<p style="word-spacing: -10px;">这是第十八段文字(p) This is the eighteenth paragraph(p)</p>letter-spacing: 10px:定义字符之间的间距(对所有字符有效)<p style="letter-spacing: 10px;">这是第十九段文字(p) | This is the nineteenth paragraph(p)</p>
<p style="letter-spacing: -10px;">这是第二十段文字(p) | This is the twentieth paragraph(p)</p>
大小属性
max-width: 50px:定义最大宽度为50像素<p>这是一段文字<img src="https://img.mole9630.top/blog-logo.png" style="max-width: 50px;" ></p>min-height: 50px:定义最小高度为50像素<p>这是一段文字<img src="https://img.mole9630.top/blog-logo.png" style="min-height: 50px;" ></p>width: 50px;height: 50px:定义宽度和高度都为50像素<p>这是一段文字<img src="https://img.mole9630.top/blog-logo.png" style="width: 50px;height: 50px;" ></p>width: 50%;height: 50%:定义宽度和高度都为原来的50%<p>这是一段文字<img src="https://img.mole9630.top/blog-logo.png" style="width: 50%;height: 50%;" ></p>