目录
单页面：头部字段一样---毕设应用单页面应用 https://music.163.com/#/……
网页三剑客：
https://www.w3cschool.cn/html/html-tables.html ---- html实例
hbuild 快捷键
一、HTML
1. 有序、无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
<h3> 自定义列表</h3>
<dl>
<dt>Tag部分</dt>
<dd>描述信息</dd>
</dl>
</body>
</html>
2.html样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html样式</title>
</head>
<body>
<h1>LOOK!</h1>
<!-- 通过style设置属性 -->
<p style="font-size:20px;">这是段落1</p>
<p style="font-size: 20px; font-family: 宋体;">这是段落1</p>
<p style="color: blueviolet;">这是段落2</p>
</body>
</html>
3.文本格式化标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本格式化标签</title>
</head>
<body>
<h3> 文本格式化标签</h3>
<!-- 1111 和2222 是显示成2行还是不同行
html 元素普通元素和块元素
块元素 =>默认占一行
非块元素 => 默认跟别人放在一起（普通文字）
1111 和2222之间N个空格 => 当成一个空格处理 =>
-->
<h3>关于空格</h3>
1111
2222
33333 4444
<h3>关于块和非块</h3>
<p >5555</p><p>6666</p>
<h3>文本格式化标签</h3>
<b>加粗文字</b>
<i>斜体文字</i>
<b>加粗文字</b>
<i>斜体文字</i><br />
加粗：<b>加粗文字</b><br />
斜体：<i>斜体文字</i><br />
big:<big>big</big><br />
Small:<Small>Small</Small><br />
着重文字：<em>着重文字</em><br />
加重语气：<strong>加重语气</strong><br />
下标字：<sub>下标字</sub><br />
上标字：<sup>上标字</sup><br />
插入字：<ins>插入字</ins><br />
删除字：<del>删除字</del><br />
</body>
</html>
4.html表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<h3>最简单的-标准表格</h3>
<table border="1">
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第三个单元格</td>
<td>第四个单元格</td>
</tr>
</table>
<h3>更多标签-标签表格</h3>
<!--为什么区分thead,tbody,tfoot-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<th>smm</th>
<td>98</td>
<td>99</td>
<td>197</td>
</tr>
<tr>
<th>smm</th>
<th>98</th>
<th>99</th>
<th>197</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>合计</th>
<td>196</td>
<td>198</td>
<td>394</td>
</tr>
</tfoot>
</table>
<h3>合并单元格</h3>
<!--
colspan =>列合并 =>写在待合并的第一个单元那里
rowspan =>行合并 =>写在待合并的第一个单元那里
-->
<table border="1px solid bule">
<tr>
<th colspan="2">科目</th>
<th rowspan="2">总得分</th>
</tr>
<tr>
<th>语文</th>
<th >数学</th>
<th></th>
</tr>
<tr>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
</table>
<h3>颜色</h3>
<table border="1px solid bule">
<tr>
<th colspan="3">name</th>
<th colspan="2">age</th>
</tr>
<tr>
<td colspan="5">姓名</td>
</tr>
<tr>
<td colspan="3">Cali</td>
<td colspan="2">18</td>
</tr>
</table>
</body>
</html> 代码实现效果：
5.图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body style="background-color: black;">
<!--
html 是纯文本文件，图片/视频资源放在文件夹下面
图片 => imgs或 images
js => js
css => css
通常资源引用 =>相对路径
-->
<h3>图片标签</h3>
<!-- src属性 -> 图片路径 -->
<!-- alt属性：如果图片加载不出来，显示提示信息 -->
<!-- title属性：如果鼠标移上去，有一个小提示，这是一个通用属性 -->
<img src="./imgs/QQ图片20211015205831.jpg"/>
<img src="./imgs/QQ图片20211015205831.jpg" alt="提示信息"/>
<img src="./imgs/QQ图片20211015205831.jpg" title="标题信息" width="450px"/>
</body>
</html>6.html链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接标签</title>
</head>
<body>
<h3> a标签->链接</h3>
<!-- 在新标签中打开 -->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<!-- 在父页面打开 -->
<a href="http://www.baidu.com" target="_parent" > 百度</a>
<!-- 在当前窗口打开 -->
<a href="http://www.baidu.com" target="_self"> 百度</a>
<!-- Fram -->
<a href="http://www.baidu.com" target="_top"> 百度</a>
<h3>链接路径</h3>
<!-- 没有加协议的链接 -->
<a href="www.baidu.com" target="_blank">百度</a>
<!--
http://sc.com/a/b/c/d/7.链接标签
href="./6.图片标签.html" =>http://sc.com/a/b/c/d/6.图片标签.html
href="/6.图片标签.html" =>http://sc.com/6.图片标签.html
-->
<!-- 相对链接 -->
<a href="./6.图片标签.html" target="_blank">百度</a>
<!-- 根路径 -->
<a href="6.图片标签.html" target="_blank">百度</a>
<h3>锚点</h3>
<a href="#first">第一节</a>
<a href="#second">第二节</a>
<a href="#third">第三节</a>
<h4 id="first">这是第一节</h4>
<div style="height: 300px;"></div>
<h4 id="second">这是第二节</h4>
<div style="height: 300px;"></div>
<h4 id="third">这是第三节</h4>
<div style="height: 300px;"></div>
</body>
</html>
7.html表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
表单的作用=>用户输入/选择信息 => 提交 => 后端服务进行交互
用户登录：输入框，按钮 =>后端服务验证数据
提交评论：输入，按钮 =>后端服务插入数据
action 属性=> 当表单提交了之后，数据交给谁处理
method属性=>表单提交方式， get/post/put/delete... => 默认:get
valu属性 =>一般都是用于提交给action !!!
-->
<h3>From表单</h3>
<form action="http://www.baidu.com" method="get">
<fieldset>
<legend>登录系统</legend>
<p>
用户名1：<input type="text" name="username"/ value="默认数据">
</p>
<p>
用户名2：<input type="text" name="username"/>
</p>
<p>
密码：<input type="password" name="password" />
</p>
<p>
下拉选项：
<select name="sex">
<option value="unknow">保密</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</p>
<!-- 对于单选和复选来说，如果我们一组 ，name需要同名-->
性别选择：
<p>
<input type="radio" name="sex2" value="unknow"/>保密
<input type="radio" name="sex2" value="male"/>保密
<input type="radio" name="sex2" value="female"/>保密
</p>
<!-- 对于单选和复选来说，如果我们一组 ，name需要同名-->
<p>
性别选择：
<input type="radio" name="sex3" value="unknow"/>保密
<input type="radio" name="sex4" value="male"/>保密
<input type="radio" name="sex5" value="female"/>保密
</p>
<p>
爱好：
<input type="checkbox" name="hobby" value="h1"/>篮球
<input type="checkbox" name="hobby" value="h2"/>足球
<input type="checkbox" name="hobby" value="h3"/>羽毛球
</p>
<textarea name="note" rows="10" cols="200" >
默认数据rows="10" 十行，cols="200" 200列
</textarea>
<input type="color" name="favcolor"/>
<!-- 提交按钮-->
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"/>
<button type="button">普通按钮</button>
</fieldset>
</form>
</body>
</html>name="username" ==> 设置内置函数
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>课后练习</title>
</head>
<body>
<fieldset>
<p>
用户名:<input type="text" name="username" / value="">
</p>
<p>
密码:<input type="text" name="password" / value="">
</p>
<p>
<input type="checkbox" name="hobby" value="h1" />记住密码
</p>
<button type="submit">登录</button></br>
<hr />
<a href="https://www.baidu.com/s?tn=65081411_1_oem_dg&wd=QQ">QQ登录</a>
</fieldset>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习.02</title>
</head>
<body>
<ul>
<li>python学习调查问卷</li>
</ul>
<form action="http://www.baidu.com" method="get"></form>
<ol>
<li>您的年龄（单选项）</li>
<input type="radio" name="age" value="" />0-10
<input type="radio" name="age" value="" />10-20
<input type="radio" name="age" value="" />20-30
<p></p>
<li>您的爱好（复选）</li>
<input type="checkbox" name="hobby" value="h1" />足球
<input type="checkbox" name="hobby" value="h2" />篮球
<input type="checkbox" name="hobby" value="h3" />游泳
<p></p>
<li>您有什么建议（多行文本框）</li>
<textarea name="note" rows="10" cols="200"> </textarea>
<p></p>
<li>你对本次活动是否满意（下拉框）</li>
<p>
<select name="sex">
<option value="unknow">满意</option>
<option value="male">一般</option>
<option value="female">不满意</option>
</select>
</p>
<p>
<button type="submit" />提交
</p>
</ol>
</body>
</html>
8.html布局
①流式布局
<!-- div =>布局用 -- 盒子
div是属性块元素 =>默认情况下是独占一行
-->
<h3>流式布局</h3>
<div style="background-color: #000000; height: 600px;">
<!-- 一般外层的div不会设置高度，自动 -->
<div style="background-color: #002324; height: 300px;"></div>
<div style="background-color: #100032; height: 300px;"></div>
</div>
②左右布局
<h3>左右布局</h3>
<!-- 为什么要加float呢？因为div是块元素，会独占一行。让他们都浮动起来，才可以放到同一行 -->
<div style="background-color: #000000;">
<div style="float:left;background-color: antiquewhite; height: 300px; width: 20%;"></div>
<div style="float:left; background-color:aliceblue; height:300px; width: 80%;"></div>
</div>
③厂式布局
<h3>厂式布局</h3>
<div style="background-color: azure; height: 500px;">
<div style="background-color:seagreen; height: 100px;">
<input type="button" value="个人" />
</div>
<div style="float: left;background-color:darkseagreen; height:400px;width: 15%;"></div>
<div style="float: left;background-color:lightgreen;height:400px;width: 85%;"></div>
</div>
④工式布局
<h3>工式布局</h3>
<div style="background-color: azure;">
<div style="background-color:indigo; height: 150px;">
<input type="button" value="个人" />
</div>
<div style="float: left;background-color:lightgrey; height:450px;width: 15%;"></div>
<div style="float: left;background-color:laliceblue;height:450px;width: 85%;"></div>
<div style="float:left;background-color:lightblue; height: 85px; width: 100%;"></div>
</div>
<p>or</p>
<div style="background-color: azure;">
<div style="background-color:indigo; height: 150px;">
<input type="button" value="个人" />
</div>
<div style="float: left;background-color:antiquewhite; height:450px;width: 15%;"></div>
<div style="float: left;background-color:aliceblue;height:450px;width: 85%;"></div>
<div style="background-color:lightblue; height: 85px; clear: both;"></div>
<!-- clear => 清除浮动 -->
</div>
二、CSS
Ⅰ、什么是CSS?
Ⅱ、CSS语法
Ⅲ、选择器
XHTML:网页重构
补充：选择器：
id选择器 => id是唯一的
class（类）选择器 => 多个元素都可以使用这个选择器
标签选择器 => 多个元素都可以使用这个选择器
Ⅳ、样式层叠次序
CSS：CSS Backgrounds (背景)_w3cschool
mystyle.css:
/* 标签选择器 */ p { color: blueviolet; } /* id选择器 */ #para { font-size: 35px; } /* 类选择器 */ .center { text-align: center; }
eg1:字体颜色样式
样式优先级.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式优先级</title> <!-- 加载外部样式表 --> <link rel="stylesheet" type="text/css" href="./CSS/mystyle.css"/> <!-- 内部样式表 --> <style> p { color: red; } </style> </head> <body> <p style="color: yellow;">这是一个段落</p> <p>这是一个段落</p> </body> </html>
代码效果如下：
eg2:背景图片样式
①
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景样式</title> <style type="text/css"> p { /* background-color: lightgreen; */ /* background-image: url(./imgs/cat.jpg); */ /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */ /* background-repeat: no-repeat; */ /* 背景图片的位置 水平位置和*/ /* background-position: 50% 50%; */ /* background-position: 10px 25px; */ /* background-position: right top; */ /* 简写 : */ background: lightgreen url(./imgs/cat.jpg) no-repeat right top; } </style> </head> <body> <p> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> </p> </body> </html>or
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景样式</title> <style type="text/css"> p { background-color: lightgreen; background-image: url(./imgs/cat.jpg); /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */ background-repeat: no-repeat; /* 背景图片的位置 水平位置和*/ /* background-position: 50% 50%; */ /* background-position: 10px 25px; */ background-position: right top; /* 简写 : */ /* background: lightgreen url(./imgs/cat.jpg) no-repeat right top; */ } </style> </head> <body> <p> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> 这是一个练习</br> </p> </body> </html>
上述俩个代码实现的效果是一致的，具体代码实现不同为：
p{ background-color: lightgreen; background-image: url(./imgs/cat.jpg); background-repeat: no-repeat; background-position: right top; }等同于：
p{ background: lightgreen url(./imgs/cat.jpg) no-repeat right top; }
代码效果图如下：
Ⅴ、文本字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 字体样式</title>
<style type="text/css">
/* 类选择器的命名 =>见名知义
定义选择器的时候，可以尽力简短 =>类选择器可以叠加使用
*/
.textfontfamimly {
font-family: "宋体";
"微软雅黑"
}
.textfontsize {
font-size: 20px;
}
.textfontstyle {
font-style: italic;
}
.textfontindent {
/* 文本缩进 */
text-indent: 30px;
}
p {
text-align: center;
text-decoration: underline;
word-spacing: 30px;
}
</style>
</head>
<body>
<p class="textfontfamimly">将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用 XHTML。</p>
<p class="textfontfamimly textfontsize">将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用
XHTML。</p>
<p class="textfontindent textfontstyle">将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用
XHTML。</p>
<p>将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML，都不会妨碍你使用 XHTML。</p>
</body>
</html>
效果实现：
Ⅵ、链接样式
https://www,w3cschool.cn/cssref/sel-link.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style type="text/css">
/* 取消下划线 */
/* :link,:visited,:hover,:active等以 选择器后接：name => 伪元素选择器*/
a {
text-decoration: none;
}
/* 正常未访问过的链接 */
a:link {
color: green;
}
/* 访问过的链接 */
a:visited {
color: ##FF0000;
}
/* 鼠标移上去的效果 */
a:hover {
background-color: darkgrey;
}
/* 鼠标点击时的效果 */
a:active {
background-color: ##0000FF;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a>
<a href="http://www.baidu.com">百度3</a>
<a href="http://www.baidu.com">百度4</a>
<a href="http://www.baidu.com">百度5</a>
<a href="http://www.taobao.com">淘宝</a>
</body>
</html>
效果实现：
……
Ⅶ、列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 列表样式</title>
<style type="text/css">
/* ul标签上有一个class=a */
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-alpha;
}
ol.d {
list-style-image: url(imgs/cat.jpg);
}
</style>
</head>
<body>
<h3>无序列表</h3>
<ul class="a">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
<ul class="b">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
<h3>有序列表</h3>
<ol class="c">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
<ol class="d">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
</body>
</html>
效果实现：
Ⅷ、边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
}
#div1 {
/* border: cadetblue 2px dashed; */
border-style: dotted;
border-width: 2px;
border-color: darkseagreen;
}
#div2 {
border-top-color: black;
border-width: 2px;
border-style: dashed;
border-bottom-color: brown;
border-left-color: cadetblue;
border-right-color: darkmagenta;
}
#div3 {
/* 上下 左右 */
border-style: dotted solid;
}
</style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</head>
</html>效果实现：
Ⅸ、盒子模型
下图说明了盒子模型（Box Model）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.a {
/* content部分 => 200*100 */
width: 200px;
height: 100px;
border-color: beige;
border-width: 10px;
border-style: groove;
/* 会与顶部对象增加20px距离 */
margin-top: 20px;
margin-left: 20px;
/* 增加border与content之间的距离 */
padding: 20px;
}
.b {
/* 表示上下左右同时设置20px */
/* margin: 20px; */
/* margin: 上 右 下 左; */
width: 200px;
height: 100px;
border-color: beige;
border-width: 10px;
border-style: groove;
/* margin: 10px 20px ; */
/* 上下距离10px,居中效果 */
margin: 10px auto;
padding: 10px 20pxS;
}
</style>
</head>
<body>
<div class="a">
border => 设置边框，增加元素的大小<br />
</div>
<div class="b">
border => 设置边框，增加元素的大小<br />
</div>
</body>
</html>效果实现：
设置：
/* 会与顶部对象增加20px距离 */
margin-top: 20px;
/* 增加border与content之间的距离 */
padding: 20px;
Ⅹ、table样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table样式</title>
<style>
table {
width: 100%;
}
td {
height: 50px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
vertical-align: bottom;
}
table,
tr,
td {
border: 1px seagreen dashed;
/* 将多条边框折叠成一条*/
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>mo-shi-mo</td>
<td>98</td>
</tr>
</table>
</body>
</html>
效果实现：
练习：
代码实现：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>homewprk</title> <style> table { width: 100%; } td { height: 20px; width: 200px; text-align: center; } table, td, tr { border: 1px groove; border-collapse: collapse; } .a { background-color: lightcyan; font-family: 黑体; color: darkturquoise; } .d { background-color: lightcyan; font-family: 黑体; } .b { background-color: aliceblue; } .c { background-color: gainsboro; } </style> </head> <body> <table> <tr class="a"> <td colspan="2" rowspan="2">受理员</td> <td rowspan="2">受理数</td> <td rowspan="2">自办数</td> <td rowspan="2">直接解答</td> <td colspan="2">拟办意见</td> <td colspan="2">返回修改</td> <td colspan="3">工单类型</td> </tr> <tr class="d"> <td>同意</td> <td>比例</td> <td>数量</td> <td>比例</td> <td>建议件</td> <td>诉求件</td> <td>咨询件</td> </tr> <tr> <td rowspan="8" class="b">受理处</td> <td class="c">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="c"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="c"> <td>总计</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> </table> </body> </html>
练习
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
