学习狂神说HTML
2024-06-03
1.网页基本信息
meta /ˈmet.ə/
<!-- HTML中注释格式 --> <!-- 文档规范为HTML，不标注也行因为浏览器默认规范就是HTML --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，用于描述网站的一些信息 --> <!-- 我一开始写作meta lang="utf-8"导致标题乱码 --> <!-- 应该是用charset --> <meta charset="utf-8"> <!-- meta一般用来seo --> <!-- 我一开始的写法都是错误的：meta msg="狂神说" --> <!-- 我一开始的写法都是错误的：meta description="一个学习java的地方" --> <!-- name和content的键值对 --> <meta name="keywords" content="狂神说java，西部开源"> <meta name="description" content="一个可以学习Java的地方"> <!-- 网页标题 --> <!-- 我最开始写作meta lang="utf-8"导致乱码 --> <title>我的第一个HTML程序</title> </head> <!-- body标签代表网页主体 --> <body> Hello, World! </body> </html>
2024-06-04
1.网页基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>测试网页基本标签</title> </head> <body> <!-- 标题标签，h代表heading（标题） --> 1.测试：标题标签<br/> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!-- 段落标签，p代表paragraph（段落） --> 2.测试：段落标签<br/> 文本一非段落。 文本二非段落。 <p>文本三是段落</p> <p>文本四是段落</p> <!-- 换行标签，br代表break（换行）--> 3.测试：换行标签<br/> 文本五非段落。<br/> <!-- 习惯上我们把自闭合标签后面也加上/，更规范 --> 文本六非段落。<br/> <!-- 水平线标签，hr代表horizontal rule水平线 --> 4.测试：水平线标签<br/> <!-- 我一开始写错了，写的是<line></line> --> <!-- 水平线标签是<hr/> --> <hr/> <!-- 字体样式标签 --> 5.测试：字体样式标签<br/> 正常字体<br/> 粗体：<strong>粗体</strong><br/> <!-- 我一开始写错了<shadow>斜体</shadow><br/> --> <!-- 斜体：em标识emphasized，表示强调 --> 斜体：<em>斜体</em><br/> <!-- 特殊符号标签 --> 6.测试：特殊符号标签<br/> <!-- greater than --> 大于号：><br/> <!--- less than --> 小于号：<<br/> <!-- 测试空格 --> 手敲7个空格 7个空格结束<br/> 正确的空格写法7个空格 7个空格结束<br/> <!-- 版权符号 --> ©版权狂神所有<br/> </body> </html>
2.测试图像标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试图像标签</title> </head> <body> <!-- src：文件路径 --> <!-- 推荐使用相对路径来定位图片 --> <!-- ../取上级目录 ../../取上上级目录 user/project/html/test-img.html当前路径 user/project/image/sea.png user/test/image/green.png 当前相当于在html目录 ../进入project目录， 然后就能访问../image/sea.png了 ../../相当于再往上一层，进入user目录了， 然后就能访问../../test/image/green.png了 --> <!-- alt：即alternate 替代文字 --> <!-- alt：当图片加载不出来时给出的提示文字（必填） --> <!-- title：鼠标悬停图片上时的提示文字 --> <!-- width：设置图片宽度 --> <!-- height：设置图片高度 --> <img src="../image/sea.png" alt="海岛图片" title="海岛图片提示文字1" width="500" height="400" /> <img src="../../test/image/green.png" alt="绿色草原图片" title="绿色草原图片提示文字2" width="300" height="300" /> </body> </html>
2024-06-05
1.超链接：页面内链接及锚链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>测试超链接</title> </head> <body> <h6>测试页面内链接：</h6> <!-- href链接地址 --> <!-- target打开链接位置：_blank新标签页打开；_self在自己的网页中打开 --> 测试（打开新标签页）跳转到“标签测试”页面： <a href="test-label.html" target="_blank">“标签测试”页面</a><br/> 测试（在自己的网页中打开）跳转到“测试系统”页面： <a href="http://localhost:8092/pmis/loginController.do?login" target="_self">测试系统</a><br/> 测试图像链接：（打开新标签页）跳转到“标签测试”页面：<br/> <a href="test-label.html" target="_blank"> <img src="../image/sea.png" alt="海洋图片" title="悬停文字" width="400" height="300"/> </a> <h6>测试锚链接：</h6> <!-- 我一开始写作<a href="test-img-for-href.html#myTestTop" target="_blank"></a><br>没显示出超链接的原因是<a></a>之间没内容，导致点不到 --> 测试（打开新标签页）跳转到某个页面的锚链接： <a href="test-img-for-href.html#myTestBottom" target="_blank">测试跳转到某个页面的锚链接</a><br> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试锚链接</title> </head> <body> <!-- 定义锚链接的标记，name来定义名字，在其他位置可通过#myTestTop来跳转 --> <a name="myTestTop"/> <div> <img src="../image/sea.png" alt="海岛图片" title="海岛图片提示文字1" width="500" height="400" /> </div> <div> <img src="../../test/image/green.png" alt="绿色草原图片" title="绿色草原图片提示文字2" width="300" height="300" /> </div> <!-- 中间省略大量用于测试的站位图片代码 --> <a name="myTestBottom"/> <!-- 通过href="#myTestTop"来跳转 --> 测试锚链接回到某锚链接所在位置： <a href="#myTestTop">回到顶部</a> </body> </html>
2024-06-06
1.list列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试列表</title> </head> <body> <h6>有序列表</h6> <p>有序列表常用于：试卷</p> <p>ol是ordered list的缩写，有序列表</p> <p>li是list item的缩写，列表项</p> <!-- 我一开始ol后面也写内容了<ol>试卷，一般这里不写内容 --> <ol> <li>单选题</li> <li>填空题</li> <li>问答题</li> </ol> <hr/> <h6>无序列表</h6> <p>无序列表常用于：网站导航</p> <p>ul是unordered list的缩写，无序列表</p> <!-- 我一开始ul后面也写内容了<ul>农业发展专区，一般这里不写内容 --> <ul> <li>种植业新闻</li> <li>畜牧业新闻</li> <li>水产养殖新闻</li> <li>农产品加工新闻</li> </ul> <hr/> <h6>自定义列表</h6> <p>自定义列表常用于：网站最下方的多列超链接布局：新闻动态、产品下载等</p> <p>dl是definition list的缩写，自定义列表</p> <p>dt是definition term的缩写，自定义项目</p> <p>dd是definition description的缩写，自定义描述</p> <p>term：项目，或指某专业名词</p> <!-- 我一开始dl后面也写内容了<dl>自定义列表，一般这里不写内容 --> <dl> <dt>新闻动态 <dd>本月要闻</dd> <dd>生产信息</dd> <dd>通知公告</dd> </dt> <dt>产品下载 <dd>企业版下载</dd> <dd>个人版下载</dd> <dd>学校教育版下载</dd> </dt> </dl> <hr/> </body> </html>
2.table表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试表格</title> </head> <body> <h6>测试表格</h6> <p>表格table标签</p> <p>tr是table row的缩写，表示行</p> <p>td是table data的缩写，表示列</p> <p>border属性设置边框</p> <p>跨行跨列都是设置在td上</p> <p>跨列：colspan=''</p> <p>跨行：rowspan=''</p> <hr/> <table> <tr> <td>名/科</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> <td>生物</td> </tr> <tr> <td>张三</td> <td>100</td> <td>80</td> <td>90</td> <td>95</td> <td>85</td> <td>95</td> </tr> <tr> <td>李四</td> <td>90</td> <td>70</td> <td>90</td> <td>85</td> <td>95</td> <td>85</td> </tr> <tr> <td>王五</td> <td>88</td> <td>70</td> <td>99</td> <td>85</td> <td>93</td> <td>85</td> </tr> </table> <hr/> <p>合并表格测试</p> <table border="1px"> <tr> <td>名/科</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> <td>生物</td> </tr> <tr> <td>张三</td> <td colspan="2">100</td> <td>90</td> <td>95</td> <td>85</td> <td>95</td> </tr> <tr> <td>李四</td> <td>90</td> <td rowspan="2">70</td> <td>90</td> <td>85</td> <td>95</td> <td>85</td> </tr> <tr> <td>王五</td> <td>88</td> <td>99</td> <td>85</td> <td>93</td> <td>85</td> </tr> </table> <hr/> </body> </html>
2024-06-07
1.媒体标签video、audio
audio [ˈɔːdiəʊ] 音频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试媒体标签video、audio</title> </head> <body> <h6>测试video视频标签，不设置controls是无法播放的</h6> <!-- <video src="../resources/video/life.mp4"/> --> <hr/> <p>controls属性控制是否显示视频控件，boolean类型，加上就意味着为true，显示视频控件</p> <!-- <video src="../resources/video/life.mp4" controls /> --> <hr/> <p>autoplay属性控制是否默认直接播放，boolean类型，加上就意味着true，自动播放</p> <p>前提是设置了controls属性</p> <p>好像是现在浏览器不支持自动播放了？测试并不能自动播放</p> <!-- <video src="../resources/video/lift.mp4" controls autoplay /> --> <hr/> <h6>测试audio音频标签</h6> <p>好像是现在浏览器不支持自动播放了？测试并不能自动播放</p> <audio src="../resources/audio/mySky.mp3" controls autoplay /> </body> </html>
2.结构标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>测试结构标签</title> </head> <body> <header> <h2>网站头部</h2> </header> <section> <h2>网站内容块</h2> </section> <article> <h2>文章</h2> </article> <aside> <h2>侧边栏</h2> </aside> <nav> <h2>导航栏</h2> </nav> <footer> <h2>网站脚部</h2> </footer> </body> </html>
2024-06-09
1.iframe内联框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习iframe内联框架</title> </head> <body> <p>练习iframe内联框架</p> <!--<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=55631961&bvid=BV1x4411V75C&cid=97257967&p=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>--> <!-- <iframe src="https://www.baidu.com" width="300px" height="200px"></iframe>--> <iframe name="testImgIframe"></iframe> <!-- 当点击超链接后，通过target标签，在iframe打开网页 --> <a href="test-img.html" target="testImgIframe">显示图片iframe</a> </body> </html>
2.post提交、get提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习get、post</title> </head> <body> <form action="test-img.html" method="post"> <p>用户注册</p> <p> <!-- 练习get请求 --> <!-- 一开始我写作 用户名：<input type="text"/> 提交时url后面没有变量名。 http://localhost:63342/HTML/user/project/html /test-img.html? 原因是没有给两个input框设置name属性 --> <!-- 一般都要给input标签设置name名字， 否则提交时不知道其是哪个变量 --> <!-- 设置后url才是如下： http://localhost:63342/HTML/user/project/html /test-img.html?username=kong&pwd=ddd --> <!-- 设置成post请求后，url上不再显示参数值，更安全更好 --> 用户名：<input type="text" name="username"/> </p> <p> 密码：<input type="password" name="pwd"/> </p> <p> <input type="submit">提交</input> <input type="reset">重置</input> </p> </form> </body> </html>
3.input、单选、多选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习input、单选、多选</title> </head> <body> <!-- 练习时用get请求便于看参数 --> <form action="test-img.html" method="get"> <!-- 单选框必须设置相同name， 才会被识别为同一组 --> <p> <!-- 两个name，所以会被识别为两组单选框 --> 出生城市：<input name="born1" value="yantai" type="radio"/>烟台 <input name="born2" value="weihai" type="radio"/>威海 </p> <p> 性别：<input name="gender" value="male" type="radio"/>男 <input name="gender" value="femal" type="radio"/>女 </p> <p> 爱好：<input name="hobby" value="play" type="checkbox"/>玩 <input name="hobby" value="music" type="checkbox"/>音乐 <input name="hobby" value="chat" type="checkbox"/>聊天 <input name="hobby" value="walk" type="checkbox"/>溜达 </p> <p> <!-- 一开始我写为<input type="button" name="btn1" value="按钮">按钮1</input> 最终按钮上显示“按钮” 说明按钮上显示的字是通过value属性设置的， 与<input></input>之间单独写的“按钮1”文字无关 --> 验证不能自动提交的按钮：<input type="button" name="btn1" value="按钮">按钮1</input> </p> <p> <!-- input的type为image时表示一个图像形式的提交按钮 --> 验证可以自动触发提交的图片按钮：<input type="image" name="img1" src="../image/sea.png" width="40px" height="20px"/> </p> </form> </body> </html>
2024-06-13
1.练习select textarea file email url number range search
textarea area /ˈeə.ri.ə/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习select textarea file email url number range search</title> </head> <body> <p>练习select textarea file email url number range search</p> <form action="test-img.html" method="get"> <!-- 下拉 --> <p>选择国家： <!-- checked表示默认选中 --> <select name="country"> <option value="China" checked>中国</option> <option value="America">美国</option> <option value="India">印度</option> </select> </p> <!-- textarea --> <p> 反馈：<textarea name="suggestions" value="反馈意见" cols="50" rows="10"></textarea> </p> <!-- file上传 --> <p> 练习附件：<input name="testAttach" type="file"> </p> <!-- email校验 --> <p> email:<input name="email" type="email"/> </p> <!-- url校验 --> <p> url:<input name="url" type="url"/> </p> <!-- 数字校验 步幅2 --> <p> 年龄：<input name="age" type="number" max="150" min="0" step="2"/> </p> <!-- range 步幅10 --> <p> 音量：<input name="volume" type="range" max="100" min="0" step="10"/> </p> <!-- 搜索框search --> <p> 搜索用户名：<input type="search" name="searchUserName"/> </p> <input type="submit"/> </form> </body> </html>
2024-06-15
1.表单的应用（readonly只读、disabled禁用、label标签for属性增强鼠标可用性）和表单的初级验证（placeholder提示、requeird必填、pattern正则校验）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习表单的hidden readonly disabled label for placeholder required pattern</title> </head> <body> <form action="test-img.html" method="get"> <!-- hidden隐藏域 readonly只读 disabled禁用 label for 增强鼠标可用性， 点击label，光标选中到for指向的哪个id那个input框 placeholder默认提示 required必填 pattern正则表达式，用时上网现查即可 --> <input name="id" type="hidden" value="DAFEAIADFADIEAF"/> <div> 验证只读：类型：<input name="type" readonly value="测试类型-只读"/> </div> <div> 验证禁用：位置：<input name="location" disabled value="测试位置-禁用"/> </div> <div> 验证增强鼠标可用性：<label for="weather">天气</label> <input name="weather" id="weather"/> </div> <div> placeholder提示：<input name="city" placeholder="请输入您所在城市"/> </div> <div> 验证必填：街道名：<input name="street" required/> </div> <div> pattern正则验证：邮箱： <input name="email" pattern="^(?=.*[A-Za-z0-9])([\w+\-\.]+@[A-Za-z0-9\-]+(\.[A-Za-z]{2,})+)$"> </div> <input type="submit"/> </form> </body> </html>
至此狂神说《HTML5》课程学习完毕。
