今日学习了HTML的基础知识，包括文档结构、文本格式化、超链接、图片、表格和表单元素等。通过创建网页框架，学习了如何制作导航菜单，实现不同页面间的跳转，以及创建简单的信息登记表。还了解了行级和块级元素的区别，并通过实际操作提升了编程思维。
今日学习了html相关的基础标签
这是html网页的最基础框架：
<html>------这是整个html网页的最大框架，也叫文档根标签。
<head> -------头标签。
<title>这里填写网页标题的名称</title>
</head>
<body>
这里填写的内容是在网站表面显现的。大部分代码都在里面书写。
</body>
</html>
以下这些都是文本格式化标签。
<head></head>------头标签:
<link rel="stylesheet" href="#(css所在路径,默认可以填#)" type="text/css">----链接css,引入css样式。
<style></style>--定义css样式(内链)
<script></script>----定义Js,也可以引入Js
<title></title>----适配浏览器引擎。
<body></body>身体标签
<h1~6></h1~6>--标题标签，随着数字变大，字体变小。1~6以外的数字，不会报错，但是没有标签的功能
<p></p>--段落标签。可以自动换行
<br>--换行标签。
<b></b>--加粗
<code></code>--计算机代码
<em></em>--文本字体倾斜（把字体倾斜）
<i></i>--斜体（是一种字体）
<kbd></kbd>--键盘输入
<pre></pre>--预格式，可以正常像写文档一样的显现。
<small></small>--更小的字体
<strong></strong>--加粗
<abbr></abbr>--缩写
<address></address>--地址
<bdo></bdo>--文字方向
<blockquote></blockquote>--从另一个源引入
<cite></cite>--工作
<sub></sub>--下标
<sup></sup>--上标
<ins></ins>--插入文本
<del></del>--删除文本
<font></font>--文本
超链接标签：
<a href="填写要跳转的标签的地址" target=""></a>
target="_blank"---跳转的网页会另起一个新网页打开
target="_self"------在原页面打开（覆盖原页面）。
图片标签：
<img src="图片地址"></img>
height=""----高，填写数字+像素：1px;
width=""-----宽，同上。
alt=""---------无法加载照片时显示的文字
algin=""------对齐方式。{center:居中;right:右侧;left:左侧}
弹幕便签
<marquee></marquee>
behavior=""{alternate:表示在两端之间来回滚动；
scroll:表示由一端滚动到另一端，会重复。
slide:表示由一端滚动到另一端，不会重复。}
direction=""{up、down、left、right:上、下、左、右}
loop=""{滚动次数：-1为一直滚动，1为滚动一次}
无序列表：<ul><li></li></ul>
有序列表：<ol><li></li></ol>
自定义列表：<dl><dt><dd></dd></dt></dl>
表格:<table><tr><td></td></tr></table>{还有一个th默认不用，border="线有多宽" cellspacing="" cellpadding="" width="" height="" bgcolor="" algin=""}
<tr><td></td></tr>{跨行：rowspan,跨列：colspan}
快捷键：table>tr*5>td*6---生成一个5*6的表格。
<iframe src="页面"></iframe>在当前页面可以显示另一个页面的内容
转义字符：< 小于号 > 大于号   空格 © 版权号 <hr>水平分割线
表单元素：<form action="表单提交的目的地" method="post/get"></form>
method:
get:提交的数据都会显示在地址栏，不安全，地址长度有限制
post:提交的数据不会出现在地址栏，封装一个请求体，长度也没有限制，
<input type=“text,password,checkbox,radio,mail,date,number,file,color,range,hidden,url,submit,button,reset,”>
//文本框，密码框，复选按钮，单选按钮，邮箱，日期，数字，提交文件，调色板，边界，隐藏，链接地址，提交按钮，自定义按钮，重置按钮。
所有内容如果想要提交，必须放在表单里。
所有标签可也划分为两大类：1.行级元素（不能自己换行）
2.块级元素（可以自己换行）
补充
表单元素：提交数据
form：
rowspan跨行
colspan跨列
< a href=" ">链接按钮</ a>
radio单选和name一起用
checkbox多选
select 选择表 option 选项
input type（文本框）textarae(大框)
框内命名顺序：class起名 input type属性 id类型
action：提交地址
输入元素：input
用户名：text
密码：password
生日：data
数字：number
邮箱：emile
文件：flie
提交：sumbit value
恢复原始状态：reset
#上面想好使必须写在from里，提交和重置按钮必须在一个form里
按钮：button type与上面一致
只读：readonly
不能选：disable
水印:ple
表单元素的提交形式：左边是name右边是value
提交的形式
methon
get：所提交的数据都会显示在地址栏，不安全，地址栏长度是有限制的
gost：提交的数据是不显示在地址栏，封装一个请求体。长度也没有限制
分成两大类
行级元素：不能自己换行
块级元素：可以自己换行
重点
1、超级链接
2、表格
3、表单
4、浏览器开发工具
练习题
在第一天的学习中我学习了如何使用HTML去制作able表格
当天任务制作四个表格，并且可以从主页转换其他页面：
表1：第一行有首页、诗词、歌曲、加入我们四个选项，点击首页仍然返回本页，点击其他选项则进入其他页面。
第二行有诗歌和歌曲两个页面去吸引观众，但是无法点开，一般放上图片，由于当时没学会放入图片所以手打诗词、歌曲。
主页代码：
<!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>
</head>
<body>
<table border="1" align="center" width="300" height="300">
<tr>
<td width="25%"><a href="shouye.html">首页</a></td>
<td width="25%"><a href="shici.html">诗词</a></td>
<td width="25%"><a href="gequ.html">歌曲</a></td>
<td><a href="jiaru.html">加入我们</a></td>
</tr>
<tr>
<td colspan="2">
<p>静夜思</p>
<p>李白</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</td>
<td colspan="2">
<p>夜曲</p>
<p>稻香</p>
<p>周杰伦</p>
</td>
</tr>
</table>
</body>
</html>表2.点开诗词选项默认出现《静夜思》，单击《赠汪伦》则转换，编写静夜思同时在另一个页面编写赠汪伦，在静夜思代码下方链接赠汪伦，下方有返回首页的按键
静夜思代码：
<!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>
</head>
<body>
<table border="1">
<tr>
<td><a href="shici.html">静夜思</a></td>
<td rowspan="2">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</td>
</tr>
<tr>
<td><a href="shici2.html">赠汪伦</a></td>
</tr>
</table>
<a href="shouye.html">返回首页</a>
</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>
</head>
<body>
<table border="1">
<tr>
<td><a href="shici.html">静夜思</a></td>
<td rowspan="2">
<p>李白乘舟将欲行</p>
<p>忽闻岸上踏歌声</p>
<p>桃花潭水深千尺</p>
<p>不及汪伦送我去</p>
</td>
</tr>
<tr>
<td><a href="shici2.html">赠汪伦</a></td>
</tr>
</table>
<a href="shouye.html">返回首页</a>
</body>
</html>表3：点开歌曲选项默认出现《夜曲》，单击《稻香》则转换，编写夜曲同时在另一个页面编写稻香，在夜曲代码下方链接稻香，下方有返回首页的按键
夜曲的代码：
<!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>
</head>
<body>
<table border="1">
<tr>
<td><a href="gequ.html">夜曲</a></td>
<td rowspan="2">
<p>为你弹着肖邦的夜曲</p>
<p>纪念我死去的爱情</p>
</td>
</tr>
<tr>
<td><a href="gequ2.html">稻香</a></td>
</tr>
</table>
<a href="shouye.html">返回首页</a>
</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>
</head>
<body>
<table border="1">
<tr>
<td><a href="gequ.html">夜曲</a></td>
<td rowspan="2">
<p>还记得你说家是唯一的城堡</p>
<p>随着稻香河流继续奔跑</p>
</td>
</tr>
<tr>
<td><a href="gequ2.html">稻香</a></td>
</tr>
</table>
<a href="shouye.html">返回首页</a>
</body>
</html>表4：点开加入我们会有一个信息登记表，密码隐藏起来，邮箱格式必须有@，还有返回首页的按键
加入我们的代码：
<!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>
</head>
<body>
<form aciton="aaa" method="post">
<table>
<tr>
<td>加入我们</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="date"></td>
</tr>
<tr>
<td><button type="submit">提交</button></td>
</tr>
</table>
<a href="shouye.html">返回首页</a>
</form>
</body>
</html>总结
今天学习的table表格让我知识面焕然一新，并且培养了自己的计算机思维，我觉得对我来说重大让我的知识储备有了质的飞跃，在老师的指导下我把繁杂的表格拔丝抽茧将里面的主要内容很好的提取出来，同时将多个表格串联起来，使得初步学会了前端制作网页，在同学的帮助下把表格制作的顺序一一缕清，让我有了一个清晰的代码思路，更好地养成我的编程思维模式。
同时表格里那些多如繁星的标签我也大概有了一定了解，从小白到萌新只需了解代码结构和写法看懂代码就在一瞬间，很开心的今天所学知识把我带入了前端学习的思维，为之后的学习打下更多基础，第一次自己制作网页，感谢老师和同学的大力支持
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
