个人学习参考用~
目录
一、基本结构
<!DOCTYPE html>
<html lang="zh"></html>
<html>
<head>
<meta charset='utf-8'/>
<title>网页title</title>
<base href="www.xxx.edu.cn/cn/" target="_blank">
<meta name="keyboard" content="dalianhaishi">
</head>
<body>
<header>
<h1>News 1</h1>
</header>
<article>
仰望星空是一种美妙和深刻的体验，能够引领我们思考关于宇宙的本质、生命的意义以及自己的价值。让我们把这种感悟带回日常生活中，愿我们都能在这个宏大而神秘的宇宙中，找到属于自己的一份平静和坚定。
</article>
<section>
<p color="red">评论</p>
<a href="http://www.xxx.edu.cn">链接文本</a>
<a href="chapter2/head.html">head</a>
</section>
<footer>
contact us
</footer>
</body>
</html>二、表格
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table-colspan</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<th>Mon</th>
<th>Sav</th>
<th>胡言乱语阿巴巴</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td>我也不知道我在哪</td>
<td colspan="2">February</td>
</tr>
</table>
<table border="1" width="50%">
<tr>
<th colspan="3">芝士什么?</th>
</tr>
<tr>
<th rowspan="2">芝士羊</th>
<td>干烤芝士</td>
<td>阿巴巴(• •)</td>
<td>阿坝?我在啊那哪></td>
</tr>
<tr>
<td>突突突</td>
<td>嘟噜噜</td>
</tr>
</table>
</body>
</html>三、超链接（文本超链接、图片超链接）
(表格928.html不属于此文件)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset='utf-8'/>
<title>超链接9.26</title>
<title>a-style</title>
<style type="text/css">
a:link {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 10pt;
text-decoration: none;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #ff0000;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: burlywood;
background:#66ff66;
text-decoration:none;
}
</style>
<base href="www.xxxx.edu.cn/cn/" target="_blank">
<meta name="keyboard" content="dalianhaishi">
</head>
<body background="https://pic2.zhimg.com/80/v2-674be6ed238d702bce797abeea31b2d9_1440w.webp">
<header>
<h1 style="color: bisque;">好好好</h1>
</header>
<article>
<img src="https://t10.baidu.com/it/u=418950733,172191862&fm=30&app=106&f=PNG?w=640&h=314&s=9A9A7B855129310F871DDC8003006091" alt="去看宇宙">
<p>你也喜欢仰望星空吗？</p>
我不喜欢
<section>
<h2>这个是文字链接</h2>
<p>点击下面红色句子</p>
<a href="http://www.xx.edu.cn">官网点击进入~</a>
<!--图片链接-->
<h2>这个是图片链接</h2>
<p>点击图片进入链接,src是source的缩写</p>
<a href="https://www.yuketang.cn/web/?next=/v2/web/index">
</a>
<img src="D:\girl.jpg">
</a>
<a href="1xxxx1@163.com">请联系我</a>
<p style="color: aqua;font-size: larger;">评论</p>
</section>
<footer style="color: brown;">
如果有任何问题务必contact me！！
</footer>
</body>
</html>四、背景、导航条
1.下拉菜单的导航条
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">更多</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</li>
</ul>
</body>
</html>
2.纯色背景
选择紫色后：
<!DOCTYPE html>
<html>
<head>
<title>自定义调色盘</title>
<style>
.color {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>选择网页背景颜色：</h1>
<div id="color-palette">
<div class="color" style="background-color: rgb(106, 185, 167);" onclick="changeColor('rgb(106, 185, 167)')"></div>
<div class="color" style="background-color: rgb(167, 167, 210);" onclick="changeColor('rgb(167, 167, 210)')"></div>
<div class="color" style="background-color: rgb(181, 220, 150);" onclick="changeColor('rgb(181, 220, 150)')"></div>
<div class="color" style="background-color: rgb(240, 240, 168);" onclick="changeColor('rgb(240, 240, 168)')"></div>
</div>
<script>
function changeColor(color) {
document.body.style.backgroundColor = color;
}什
</script>
</body>
</html>
3.花里胡哨
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航条练习</title>
<style>
.main-nav {
display: flex;
justify-content: center;
}
.nav-mod-1 ul {
display: flex;
list-style-type: none;
padding: 0;
}
.nav-mod-1 ul li {
margin-right: 10px;
}
body{
background-image: url(./欧式纹样.jpg);
background-repeat:repeat-x;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#first{
background-image: url(./城堡2.jpg);
font-size: +50%;
}
#second{
background-image: url(./城堡1.jpg);
font-size: +50%;
word-spacing: 1cm;
color: aliceblue;
line-height: 20px;
}
</style>
</head>
<body >
<h1>**欢迎来到我的城堡**</h1>
<b>此网页背景图片为水平平铺</b>
<br>
<pre id="first"><b>一、古希腊的建筑风格
古希腊的建筑艺术,则是欧洲建筑艺术的源泉与宝库。
古希腊建筑风格的特点主要是和谐、完美、崇高。
而古希腊的神庙建筑则是这些风格特点的集中体现者，古希腊的“柱式”，这种规范和风格的特点是，追求建筑的檐部（包括额枋、檐壁、檐口）及柱子（柱础、柱身、柱头）的严格和谐的比例和以人为尺度的造型格式。
古希腊最典型、最辉煌，也是意味最深长的柱式主要有三种，即陶立克、爱奥尼克和科林斯柱式。
代表性的建筑群体：雅典卫城。
<b></pre>
</br>
<br>
<p id="second">
二、古罗马的建筑艺术
古罗马的建筑艺术：是古希腊建筑艺术的继承和发展。如果说，古希腊人崇拜人是通过崇拜“神”来体现的话，那么，古罗马人对人的崇拜。
古罗马的建筑理论家维特鲁威，在其《建筑十书》中曾经指出，建筑的基本原则应当是“须讲求规例、配置、匀称、均衡、合宜以及经济”。
这可以说是对古罗马建筑特点及其艺术风格的一种理论总结。从而在屋顶造型方面，出现了在古希腊建筑中很难见到的“穹拱”屋顶。
正是这种“穹拱”屋顶，成为了古罗马建筑，特别是房屋类建筑与古希腊房屋类建筑最明显的区别。
以“圆”为主的风格，是典型的古罗马建筑的特点。
代表：古罗马大斗兽场、古罗马的潘泰翁神庙（又称万神庙）。
</p>
</br>
...........请自行补充
</body>
</html>五、表单、多媒体
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单多媒体</title>
</head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:rgb(140, 115, 196);
padding:0.2em 0.6em;
border-right:1px solid white;
}
li {display:inline}
.main-nav {
display: flex;
justify-content: center;
}
.nav-mod-1 ul {
display: flex;
list-style-type: none;
padding: 0;
}
.nav-mod-1 ul li {
margin-right: 10px;
}
h1, h2 {color: #333;}
form {margin-bottom: 20px;}
input[type="text"], input[type="submit"], input[type="reset"] {margin-bottom: 10px;}
label {margin-bottom: 5px; }
video {margin-top: 15px;}
button {padding: 5px 10px;background-color: #333;color: #fff;border: none;cursor: pointer;margin-right: 5px;}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
li a, .dropbtn {
float: left ;
display: inline-block;
color: white;
text-align: center;
padding: 10px 8px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: rgb(72, 51, 156);
}
li.dropdown {
display: inline-block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
</style>
<body background="./粉海.jpg" style="background-repeat: repeat-x ">
<div class="main-nav" data-sudaclick="blk_mainnav" id="daohhang">
<div class="nav-mod-1">
<ul>
<li><a href="https://news.sina.com.cn/" target="_blank"><b>官网 </b></a></li>
<li> <a href="https://mil.news.sina.com.cn/" target="_blank">新闻</a></li>
<li> <a href="https://news.sina.com.cn/china/" target="_blank">新</a> </li>
<li><a href="https://news.sina.com.cn/world/" target="_blank">百科</a> </li>
</ul>
<ul>
<li><a href="https://finance.sina.com.cn/" target="_blank"><b>学习</b></a></li>
<li><a href="https://finance.sina.com.cn/stock/" target="_blank">竞赛</a></li>
<li><a href="https://finance.sina.com.cn/fund/" target="_blank">成绩单</a></li>
<li><a href="https://finance.sina.com.cn/forex/" target="_blank">排名</a></li>
</ul>
</div>
<div class="nav-mod-1 nav-mod-s nav-hasmore">
<ul>
<li><a href="https://finance.sina.com.cn/" target="_blank"><b>投诉</b></a></li>
<li><a href="https://finance.sina.com.cn/stock/" target="_blank">建议</a></li>
<li><a href="https://finance.sina.com.cn/fund/" target="_blank">预约</a></li>
<li><a href="https://finance.sina.com.cn/forex/" target="_blank">出校</a></li>
</ul>
<ul class="nav-out">
<li> <a href="https://games.sina.com.cn/" target="_blank"><b>海大大</b></a> </li>
<li><a href="http://www.97973.com" target="_blank">学院</a></li>
<li><a href="https://mail.sina.com.cn/" target="_blank">邮箱</a></li>
<li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">更多<i></i></a></li>
</ul>
<ul class="more-list" class="dropdown-content">
<li><a href="https://game.weibo.com/" target="_blank">地图</a></li>
<li><a id="navLinkShow" href="http://show.sina.com.cn/" target="_blank">SHOW</a></li>
<li><a href="https://search.sina.com.cn/?c=more" target="_blank">搜索</a></li>
<li><a href="https://help.sina.com.cn/" target="_blank">客服</a></li>
<li><a href="https://news.sina.com.cn/guide/" target="_blank">导航</a></li>
</ul>
</div>
</div>
<h1>***欢迎来到-今日新闻-专栏***</h1>
<p><b>练习：</b>表单 多媒体</p>
<h2>表单一 输入框确定跳转与重置(id是表单前面的名称):</h2>
<form action="https://www.baidu.com" method="get">
<p>泥嚎呀你的姓名: <input type="text" name="usr_name" autofocus="autofocus" id="fname" /></p>
<p>泥嚎你的学号: <input type="text" id="Iname" /></p>
<input type="submit" value="确定并转到百度">
<input type="reset" value="重置">
</form>
<h2>表单二 自主选择radio单选/多选按钮:</h2>
<p>你最喜欢方舟广场哪一个饭 (单选):</p>
<form>
煎饼：
<input id="cat" type="radio" checked="checked" name="animal" value="noteat">
<br>淮南牛肉汤盒饭：
<input id="cat" type="radio" checked="checked" name="animal" value="noteat"></br>
<br>烤盘饭：
<input id="sheep" type="radio" checked="checked" name="ani" value="caneat"></br>
小馄饨：
<input id="cow" type="radio" checked="checked" name="ani" value="caneat">
<br>
<br>你也和我一样喜欢吃大鸡腿嘛： </br>
<br><input id="cow" type="ra" checked="checked" name="ani" value="快说你也是"><br>
</br>
</form>
<p>请选择你喜欢的菜（多选）：</p>
<form>
<input type="checkbox" id="husky" name="animal" value="西红柿鸡蛋">
<label for="husky">西红柿鸡蛋</label><br>
<input type="checkbox" id="penguin" name="animal" value="宫保鸡丁">
<label for="penguin">宫保鸡丁</label><br>
<input type="checkbox" id="lion" name="animal" value="肉丸">
<label for="lion">肉丸</label><br>
<input type="checkbox" id="bear" name="animal" value="鱼香肉丝">
<label for="bear">鱼香肉丝</label><br>
<br>
<input type="submit" value="提交">
</form>
<h2>表单三 下拉选择表单</h2>
<p>海大小调查-你想要方舟广场引进什么美食？ (表单):</p>
<from>
<select>
<optgroup label="南方菜">
<option value="monky">糯米饭</option>
<option value ="monky">糍粑</option>
<option value ="monky">烧麦</option>
</optgroup>
<optgroup label="北方菜">
<option value ="fish">肉夹馍</option>
<option value="fish">羊肉泡馍</option>
<option value="fish">驴肉火烧</option>
</optgroup>
</select>
</form>
<h2>多媒体 音频 </h2>
<p>今日音乐推荐：***《胶己》*** :</p>
<audio controls="controls">
<source src="王以诺 - 胶己.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h2>多媒体 视频:</h2>
<h2>夺冠现场视频</h2>
<p>cheers~</p>
<div style="text-align:center;">
<button onclick="playPause()">play</button>
<button onclick="makeBig()">makebig</button>
<button onclick="makeNormal()">makenormal</button>
<button onclick="makeSmal1()">makesmall</button>
<br />
<video id="video1" width="420" height="360" style="margin-top:15px; " controls="controls">
<source src="./RDMO8109.MP4" type="video/mp4">
Your browser does not support HTML5 video .
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused) myVideo.play();
else myVideo.pause();
}
function makeBig() { myVideo.width = 640;}
function makeNormal() { myVideo.width = 420;}
function makeSmall() { myVideo.width = 320;}
</script>
</body>
</html>
3543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
