这篇博客是关于HTML的学习笔记，涵盖了基本标签、文本格式化、超级链接、图片链接、表格、表单元素等内容。博主强调了超级链接、表格和表单作为重点，并分享了初学HTML的心得体会和实践成果。
目录
这是第一天学习HTML所记录的笔记，不是很全面，对于新手来说可以慢慢记
组成结构：
html:文档的根标签
head：头，标签处。
title：适配搜索引擎
link:链接css的，引入css样式
style：定义css样式
script：定义js，也可以引入js
body：身体
1.基本标签：
h1 - h6:标题标签，字体变大啊，变粗，变黑，上下空一行 书写：<h1></h1>
p：空一行 <p></p>
br:换行，相当于回车 <br>
2.文本格式化标签：
| b加粗 | <b></b> |
| code | <code></code> |
| i斜体 | <i></i> |
| em强调文本 | <em></em> |
| kbd键盘输入 | <kbd></kbd> |
| pre预格式 | <pre></pre> |
| small变小 | <small></small> |
| strong加粗 | <strong></strong> |
| abbr缩写 | <abbr></abbr> |
3.超级链接：
普通的链接：<a href=" "></a> href要去的地方 ：URL或HTTP地址的完整地址
默认的方式去到当前目录下某一个页面
../:返回上一级
target:目标 .怎么打开目的地址
_blank:在新窗口打开
_parent._top:在父容器中打开
title：标题，当鼠标悬停在标签上出现的提示文字
4.图片链接：
src：图片路径
height，width：值尽量只给一个
锚机链接：tips
align：对齐方式
marquee：弹幕 loop：循环
区域/空白：div：块。立方体，可以有宽高<div></div>
span：行。 没有宽和高。尺寸根据内容而定 <span></span>
（1）无序列表：
<ul>
<li></li>
</ul>
（2）有序列表：
<ol>
<li></li>
</ol>（3）自定义列表：
<dl>
<dt>项目1</dt>
<dd>描述内容</dd>
</dl>5.表格：
一组标签
table：
<table> border：划线
<tr>
<td></td>
</tr>
</table>
<hr>水平分割线</hr>
框架：iframe
表单元素：提交数据
form： <form></form>
互斥：name
所有的文本框的内容都是他的value属性
method：
get:提交的数据
post:提交的数据是不显示在地址栏，封装一个请求体，长度没有限制
audio音频
video视频
分为两大类：
1.行级元素：不能自己换行
2.块级元素：可以自己换行
重点：
1.超级链接
2.表格
3.表单
4.浏览器开发工具
第一天的初始学习HTML，小有压力，但是效果明显初步完成页面创作，看到完成的作品有种莫名的成就感（虽然很丑）
第一个页面运用了表格居中，鼠标悬停，页面跳转
第二页是左边导航栏，右边锚点跳转（没有截图出来，有点长）而且把滚动条删掉了（嘻嘻）
第三页是歌曲选择（这个页面相对简单），触碰右面作者可出现鼠标悬停效果，点击可跳转到歌曲播放页面
第四页是新人注册页面
初始页：
<!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>
<style>
.zx td:hover {
color: blueviolet;
background-color: #81ecec;
}
.zx td {
border-radius: 10px;
}
.xc td {
border-radius: 10px;
}
.cv td {
border-radius: 10px;
}
</style>
</head>
<body>
<table width="100%" height="100"px align="center">
<tr class="zx" align="center" bgcolor="#74b9ff">
<td width="25%"><a href="index.html">首页</a></td>
<td width="25%"> <a href=tangshi.html>诗词列表</a></td>
<td width="25%"><a href=gequ.html>歌曲列表</a></td>
<td width="25%"><a href=zhuce.html>加入我们</a></td>
</tr>
</table>
<table align="center" width="100%" height="600px">
<tr class="xc" align="center" height="80%">
<td width="50%" background="../homework/img/tangshi.jpg">
<strong>静夜思</strong><br>
<p>李白</p>
床前明月光<br>
疑是地上霜<br>
举头望明月<br>
低头思故乡<br>
</td>
<td width="50%" background="../homework/img/RC.jpg">
<strong>菊花台</strong><br>
菊花殘 滿地傷 你的笑容已泛黃<br>
花落人斷腸 我心事靜靜躺<br>
北風亂 夜未央 你的影子剪不斷<br>
徒留我孤單 在湖面 成雙<br>
</td>
</tr>
<tr class="cv" align="right" height="20%" bgcolor="#fd79a8">
<td><strong><a href=tangshi.html>查看更多>>></a></strong></td>
<td><strong><a href=gequ.html>查看更多>>></a></strong></td>
</tr>
</table>
</body>
</html>唐诗页：
<!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>侧边导航栏</title>
<style>
body{
margin: 0;
background: url("img/tangshi.jpg") ;
background-size: cover;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrap{
width: 60px;
height: 225px;
border: 0.5px solid;
position: fixed;
}
.head{
font-weight: bold;
width: 100px;
height: 50px;
background-color: white;
line-height: 40px;/* 行高=高度 垂直居中 */
font-size: 20px;
color: #000000;
text-align: center;
border-radius: 10px;
}
.list:hover{
color: tomato;
background-color: silver;
}
ul li{
width: 100px;
height: 110px;
line-height: 60px;
}
.list{
box-sizing: border-box;
padding: 3px;
margin-top: 0.5px;
margin-bottom: 0.5px;
background-color: white;
text-align: center;
font-size: 18px;
color: #9A9C9E;
position: relative;
border-radius: 10px;
}
.qw {
font-size: 50px;
}
</style>
</head>
<body >
<div class="wrap">
<ul>
<li class="head">唐朝古诗</li>
<li class="list"><a href="#m1"style="text-decoration: none;">静夜思</a></li>
<li class="list"><a href="#m2"style="text-decoration: none;">九月九日忆山东兄弟</a></li>
<li class="list"><a href="#m3"style="text-decoration: none;">早发白帝城</a></li>
<li class="list"><a href="#m4"style="text-decoration: none;">江南逢李龟年</a></li>
<li class="list"><a href="../homework/index.html">返回首页>>></a></li>
</ul>
</div>
<div class="qw" align="center" >
<h2 id="m1">静夜思</h2>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center" >
<h2 id="m2">九月九日忆山东兄弟</h2>
独在异乡为异客，<br>每逢佳节倍思亲。<br>
遥知兄弟登高处，<br>遍插茱萸少一人。<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center">
<h2 id="m3">早发白帝城</h2>
朝辞白帝彩云间，<br>千里江陵一日还。<br>
两岸猿声啼不住，<br>轻舟已过万重山。<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center">
<h2 id="m4">江南逢李龟年</h2>
岐王宅里寻常见，<br>崔九堂前几度闻。<br>
正是江南好风景，<br>落花时节又逢君。<br>
<div style="height: 800px;"></div>
</div>
</body>
</html>
歌曲页：
<!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>
<style>
body{
background: url("img/333.jpg") ;
background-size: cover;
overflow: hidden;
}
a {
text-decoration: none;
}
td :hover {
color: blueviolet;
background-color: #81ecec;
border-radius: 20px;
}
</style>
</head>
<body >
<table align="center" weith="100%" height="400px">
<tr >
<td ><font size="12px">我怀念</font></td>
<td><a href="../homework/audio/林俊杰 - 我怀念的 (Live).mp3"><font size="12px">林俊杰</font></a></td>
</tr>
<tr>
<td><font size="12px">菊花残</font></td>
<td><a href="../homework/audio/林俊杰 - 我怀念的 (Live).mp3"><font size="12px">周杰伦</font></a></td>
</tr>
<tr>
<td><font size="12px">菊花伤</font></td>
<td><a href="../homework/audio/林俊杰 - 我怀念的 (Live).mp3"><font size="12px">林俊杰</font></a></td>
</tr>
<tr>
<td><font size="12px">菊花茶</font></td>
<td><a href="../homework/audio/林俊杰 - 我怀念的 (Live).mp3"><font size="12px">周杰伦</font></a></td>
</tr>
</table>
<table width="800px" height="400px" align="center">
<tr align="right">
<td><strong><a href="../homework/index.html">返回首页>>></a></strong></td>
</tr>
</table>
</body>
</html>注册页：
<!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>
<style>
body{
background: url("img/zhuce2.jpg") ;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body >
<table width="100px" height="200px" align="center">
<tr>
<td>
<strong >加入我们</strong></td>
</tr>
</table>
<form action="">
<table width="350px" height="40px" align="center" >
<tr>
<td>用户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="genter">男
<input type="radio" name="genter">女</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email"></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date"></td>
</tr>
<tr>
<td>
<button>提交</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<table width="800px" height="400px" align="center">
<tr align="right">
<td><strong><a href="../homework/index.html">返回首页>>></a></strong></td>
</tr>
</table>
</form>
</body>
</html>
日期：2022/07/09
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
