第一天
-
注释 (快捷键 ctrl+/ )
-
-
基本标签
习惯性写自闭合标签/ eg:
<!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> </head> <body> <!-- 标题标签 --> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!-- 段落标签 --> <p>回忆上了发条</p> <p>总准时报到</p> <p>我让日夜颠倒</p> <p>因为黑夜太难熬</p> <p>总以为哭过就好</p> <p>梦和现实对调</p> <p>穿越了城市的喧闹</p> <p>夜太深 心跳呢</p> <p>已经遗失了 不见了</p> <p>爱上你 心跳呢</p> <p>慢慢 停止了 不爱了</p> <p>你紧紧拥抱我入睡</p> <p>曾经是永恒的画面</p> <!-- 水平线标签 --> <hr/> <!-- 换行标签 --> 回忆上了发条<br/> 总准时报到<br/> 我让日夜颠倒<br/> 因为黑夜太难熬<br/> 总以为哭过就好<br/> 梦和现实对调<br/> 穿越了城市的喧闹<br/> 夜太深 心跳呢<br/> 已经遗失了 不见了<br/> 爱上你 心跳呢<br/> 慢慢 停止了 不爱了<br/> 你紧紧拥抱我入睡<br/> 曾经是永恒的画面<br/> <!--粗体,斜体 --> <h1>字体样式标签</h1> 粗体:<strong>i love you</strong> <br/> 斜体;<em>i love you</em> <!-- 特殊符号 --> <br/> 空 格 空 格 <br/> > <br/> < ©版权所有 <!-- 特殊符号记忆方式 & ; --> </body> </html>
-
图像标签
存放resources(eg:images,videos)的文件夹,想用相对路径打开,应与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> </head> <body> <!-- img学习 src : 图片地址 (必填) 相对路径 ,绝对路径 ../ --上一级目录 alt : 图片名字 (必填) title : 鼠标悬停文字 width : 图片宽度 height : 图片高度 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </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> </head> <body> <!-- 使用name作为标记 --> <a name="top">顶部</a> <!-- ||页面间链接,从一个页面链接到另一个页面|| --> <!-- a标签 href :必填,表示要跳转到那个页面 target : 表示窗口在哪里打开 _blank : 在新标签中打开 _self : 在自己的网页中打开 --> <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> <a href="2.基本标签.html" target="_self">点击我跳转到页面二</a> <a href="https://www.baidu.com">点击我跳转到百度</a> <br> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <p> <a href="1.我的第一个网页.html"> <!-- 可以用图片跳转到页面 --> <img src="../images/1.jpg" alt="桌面壁纸" title="壁纸" width="500" height="600"> </a> </p> <!-- 锚链接 1.需要一个锚标记 2.跳转到标记 (通过a href 跳转) #+标记名字 3.name在哪里跳转到哪里 --> <a href="#top">回到顶部</a> <a name="down">down</a> <!-- 功能性链接 邮件链接 : mailto --> <a href="mailto:2980419362@qq.com">点击联系我</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>列表学习</title> </head> <body> <!-- 有序列表(ordered list) 应用范围 : 试卷 , 问答 --> <ol> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ol> <hr/> <!-- 无序列表(unordered list) 应用范围 : 导航 , 侧边栏 --> <ul> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>C/C++</li> </ul> <hr> <!-- 自定义列表 dl : 标签 dt : 列表名称 dd : 列表内容 公司网站底部 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>python</dd> <dd>Linux</dd> <dd>C</dd> <dt>位置</dt> <dd>江西</dd> <dd>上海</dd> <dd>武汉</dd> </dl> </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> </head> <body> <!-- 表格table 行 : tr 列 : td border : 边框 --> <table border="1px"> <tr> <!-- colspan 跨列 --> <!-- align="center" 居中 --> <td colspan="4" align="center">1-1</td> </tr> <tr> <!-- rowspan跨行 --> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</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> </head> <body> <!-- 音频(audio)和视频(video) src : 资源路径 controls : 控制条 autoplay : 自动播放(chorme禁止了自动播放,需在src前加muted) --> <video muted src="../video/1..mp4" controls autoplay></video> <br> <audio src="../w-audio/▶ Tik Tok - 2PM&尹恩惠.mp3" controls></audio> </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>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主题</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</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</title>
</head>
<body>
<!-- iframe内联框架
src : 地址
w-h :宽度高度
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com" target="hello">点击跳转</a>
<!-- 嵌入代码若转载失败,记得加https: -->
<!-- <iframe src="http://player.bilibili.com/player.html?aid=689105858&bvid=BV1Rm4y1A77J&cid=861814023&page=1" -->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> -->
<!-- </iframe> -->
</body>
</html>
-
学习表单
a. 登录注册
<!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> </head> <body> <h1>注册</h1> <!-- 表单form action : 表单提交的位置,可以是网站,也可以是请求处理地址 method : post , get 提交方式 get提交方式:可以在url中看到我们提交信息,不安全,高效 post:比较安全,传输大文件 --> <form action="1.我的第一个网页.html" method="post"> <!-- 文本输入框 : input type="text" --> <p>名字 : <input type="text" name="username"></p> <!-- 密码框 : input type="password" --> <p>密码 : <input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
text:文本框, password:密码框,checkbox:多选框,radio:单选框
<!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>
</head>
<body>
<h1>注册</h1>
<!-- 表单form
action : 表单提交的位置,可以是网站,也可以是请求处理地址
method : post , get 提交方式
get提交方式:可以在url中看到我们提交信息,不安全,高效
post:比较安全,传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 文本输入框 : input type="text"
value="柒柒" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>名字 : <input type="text" name="username"></p>
<!-- 密码框 : input type="password" -->
<p>密码 : <input type="password" name="pwd"></p>
<!-- 单选框标签
input type="radio"
value : 单选框的值
name : 表示组 (只有组相同才能单选)
-->
<p>性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框
input type="checkbox"
v -->
<p>爱好
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">打游戏
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" name="btn1" value="点击">
<input type="image" src="../images/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>