前段三剑客html css javaScript
标题标签<h1> </h1>
段落标签 <p></p>
换行标签<br/>
水平线标签<hr/>
字体样式标签:粗体:<strong> i love you</strong> 斜体: <em> i love you</em>
注释和特殊字符 空 格 空  &格 > < ©版权所有
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <img src="../resource/image/1.jpeg" alt="头像" title="悬停文字" width="300" height="300" > <!--图片地址 (必填) 图片名字(必填) --> <a href="4.链接标签.html#down">跳转</a> //见下面 </body> </html>
--------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作为标记--> <a name="top">顶部</a> <!--a标签 href:必填,表示要跳转到哪个网页 target:表示窗口在哪里打开 _blank 在新标签中打开 _self在自己的网页中打开 --> <a href="1.我的第一个网页.html" target="_blank">点击我跳转到我的页面</a> <a href="http://www.baidu.com" target="_self">点击我跳转到百度</a> <br> <a href="1.我的第一个网页.html"> <img src="../resource/image/1.jpeg" alt="头像" title="悬停文字" width="300" height="300" > </a> <br> <!--锚 1.需要一个锚标记 2.跳转到标记 # 链接--> <a href="#top">回到顶部</a> <a name="down">down</a> <!--功能性连接 邮件连接:emailto: qq链接 --> <a href="mailto:70743960@qq.com">点击联系我</a> </body> </html>
-----------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表--> <ol> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>c/c++</li> </ol> <hr> <!--无序 应用;导航,侧边栏, --> <ul> <li>java</li> <li>python</li> <li>运维</li> <li>前端</li> <li>c/c++</li> </ul> <!--自定义列表 dl:标签 dt:列表名称 dd:列表内容· 公司底部 --> <dl> <dt>学科</dt> <dd>java</dd> <dd>c</dd> <dd>linux</dd> <dt>位置</dt> <dd>安徽</dd> <dd>c</dd> <dd>linux</dd> </dl> </body> </html>
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body> <!--表格table 行 tr rows 列 td --> <table border="1px"> <tr> <!--colspan跨列--> <td colspan="4">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"> <title>媒体元素学习</title> </head> <body> <!--音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <video src="../resource/video/抖音.mp4" controls > </video> <audio src="../resource/audio/c.mp3" controls> </audio> </body> </html>
------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <!--header;标记头部区域内容 footer:标记脚部区域内容 section:web页面的独立一块区域 nav:导航类辅助内容 --> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <!--iframe内联框架 src地址 w-h宽度高度 --> <!--<iframe src="//player.bilibili.com/player.html?aid=1601242281&bvid=BV152421M7HM&cid=1454535111&p=1" scrolling="no"--> <!-- border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>--> <iframe src="https://www.bilibili.com/ "name="hello" frameborder="0" width="1000px" height="800px"></iframe> <a href="1.我的第一个网页.html" target="hello">点击跳转</a> </body>
</html>
---------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <!--表单 action:表单提交的位置,可以使网站,也可以是是一个处理地址 method;post ,get提交方式 get方式提交:我们可以再url中看到我们提交的信息,不安全,高效 post:比较安全,可以传输大文件, --> <h1>注册</h1> <form action="1.我的第一个网页.html" method="post"> <!--文字输入框:input type="text" value="狂神好帅"默认初始值 maxlength="8" 最长能写几个字符 size="30"文本框的长度 --> <p>名字:<input type="text" name="username" value="狂神好帅" maxlength="8"size="30"></p> <!--密码框 :input type="password" --> <p>密码 <input type="password" name="pwd"></p> <!-- 单选框标签 input type="radio" value:表示单选框的值 name:表示组 --> <p>性别: <input type="radio"value="boy" name="sex" checked>男 <input type="radio"value="girl" name="sex">女 </p> <!--多选框 --> <p>爱好: <input type="checkbox"value="sleep"name="hobby">睡觉 <input type="checkbox"value="code"name="hobby" checked>代码 <input type="checkbox"value="chat"name="hobby">聊天 </p> <!--按钮 input type="button"普通按钮 input type="image" 图像按钮 input type="submit"提交按钮 input type="reset"重置按钮 --> <p>按钮: <input type="button" name="btn1" value="点击变长"> <!-- from 表单里,都是跳转到这个页面 1.我的第一个网页 --> <input type="image" src="../resource/image/1.jpeg" width="100px"> </p> <p>国家: <select name="列表名称" > <option value="china">中国</option> <option value="us">美国</option> <option value="eth" selected>瑞士</option> <option value="india">印度</option> </select> <!--文本域 cols="50" rows="10" --> </p> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!-- 文件域 input type="file"name="files" --> <p> <input type="file"name="files"> <input type="button" value="上传" name="upload"> </p> <!--邮件验证--> <p>邮箱: <input type="email" name="email"> </p> <!-- URL --> <p> URL: <input type="url"name="email"> </p> <!-- 数字 --> <p>数字: <input type="number"name="num"max="100"min="0"step="10"> </p> <!-- 滑块--> <p>音量: <input type="range" name="voice" min="0"max="100"step="2"> </p> <!--搜索--> <p>搜索: <input type="search"name="search"> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>