.png)
手机流量卡
免费领卡
号卡合伙人
产品服务
关于本站html完整语法学习
第一个html
<!DOCTYPE html><html lang="en"><head> <!--meta 描述性标签，用来描述网站的一些信息--> <!--meta 标签一般用来做SEO--> <meta charset="UTF-8"> <meta name="key" content="第一个网站，学html"> <meta name="description" content="学习html"> <title>第一个网站</title></head><body>Hello,World!</body></html>
基本标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <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><!--水平线标签--><hr/><!--换行标签 只是换了一行，但是还是一段-->两只老虎，两只老虎<br/>跑得快，跑得快<br/>一只没有眼睛<br/>一只没有尾巴<br/>真奇怪！真奇怪<br/><!--粗体，斜体--><h1>字体样式标签</h1>粗体：<strong>i love you</strong> <br/>斜体：<em>i love you</em> <br/>粗体：<B>i love you</B> <br/>斜体：<I>i love you</I> <br/><hr/><!--特殊符号-->空 格； <br/><!-- 代表一个空格-->空 格 <br/><!--> 代表大于号 <代表小于号-->>< <br/><!--版权符号-->©</body></html>
图片标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片标签</title></head><body><!-- src:图片的地址 绝对地址：使用盘符找到的文件 D:\代码\HTML\resources\image\2.png 相对地址：相对于当前项目的文件 ../resources/image/2.png ../返回上一级目录 alt ： 如果src路径下的文件未找到，就用这里名的内容替代 title ： 将鼠标放置在这个图片上面会显示title里卖弄的内容 width : 图片显示的宽度 height ： 图片显示的高度 --><img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"><!--从这里可以直接跳转到下面这个链接的down这个锚标记处--><a href="4.链接标签.html#down">跳转</a></body></html>
链接标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>链接标签</title></head><body><!--使用a标签里面的name属性设置锚链接标记--><a name="top">顶部</a><br/><!-- a标签： href ： 必填，表示要跳转到哪里去 target : 表示窗口在哪里打开 _blank ： 在新标签中打开 _self : 在自己的网页中打开，属于默认设置 a标签中间填写链接的文本或图片 --><a href="1.我的第一个html.html" target="_blank">点击我跳转到页面一</a><a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/><a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"></a><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><p> <a href="1.我的第一个html.html"> <img src="../resources/image/2.png" alt="桌面壁纸" title="悬停文字" width="255" height="255"> </a></p><!-- 锚链接 ： 1.需要一个锚标记 2.跳转到锚标记 使用方法为 #+锚链接的标记名 可以实现页面内的跳转，，也可从一个页面直接跳转到锚链接的标记位置 --><a href="#top">回到顶部</a><a name="down">down</a><!-- 功能性链接： mailto:邮箱地址（可以将内容发送到这个邮箱里面） QQL链接 --><a href="mailto:1713791837@qq.com">点击联系我</a><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1713791837&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:1713791837:52" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a></body></html>
列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body><!--有序列表 ： Orderly list 显示出有顺序的结构，前边用数字显示顺序 应用范围：试卷，答题卡... --><ol> <li>Java</li> <li>Python</li> <li>汇编</li> <li>前端</li> <li>编译原理</li></ol><!--无序列表 显示出没有顺序的结构，前边用黑点显示 应用范围：导航，侧边栏... --><ul> <li>Java</li> <li>Python</li> <li>汇编</li> <li>前端</li> <li>编译原理</li></ul><!--自定义列表 dl : 列表标签 dt : 列表名称 dd : 列表内容 --><dl> <dt>学科</dt> <dd>java</dd> <dd>linux</dd> <dd>spring</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"> <title>表格</title></head><body><!-- 表格 ： table 行 ： tr 列 ： td colspan : 合并多少列为一列 rowspan : 合并多少行为一行 border : 设置边框宽度 --><table border="1px"> <tr> <td colspan="3"> 学生成绩</td> </tr> <tr> <td rowspan="2">小破孩</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">憨憨</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr></table></body></html>
视频与音频
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>媒体元素</title></head><body><!--视频和音频 controls : 控制条 autoplay : 设置视频自动播放 --><video src="../resources/video/2.qlv" controls autoplay></video><br/><audio src="../resources/audio/ai.mp3" controls></audio></body></html>
页面结构
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面结构</title></head><body> <header> <h1>网页头部</h1> </header> <section> <h1>网页主体</h1> </section> <footer> <h1>网页脚部</h1> </footer></body></html>
内联框架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联框架</title></head><body><!-- iframe : 可以将src里面的网页内容嵌套在本网页内 src : 链接地址 w-h : 宽和高 还可以使用name属性： 将a标签里面的链接内容放置到iframe里面 --><iframe src="" name="hello" width="855px" height="512px"></iframe><a href="https://www.bilibili.com/" target="hello">点击跳转</a></body></html>
form表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body><!--表单form action : 提交到哪个位置，可以是网站也可以是请求处理地址 method : 提交方式，，有post与get get方式提交，数据可以在url里面看到，不安全，但高效 post方式提交：比较安全，能够提交数据量较大的文件 --><h1>注册</h1><form action="1.我的第一个html.html" method="get"> <!--文本输入框 ： type="text" value="你好帅" 默认初始值 maxlength="8" 最多能输入几个字符 size="30" 文本框的长度 readonly 只读 placeholder 提示的默认信息 只能用在输入框上 required 非空判断，表示此字段必须填写 只能用在输入框上 --> <p>名字：<input type="text" name="userName" placeholder="请输入用户名" required> </p> <!--密码框 ： type="password" hidden 隐藏，将这个框用户看不到，但是却是存在的，可以放置默认值 --> <p>密码：<input type="password" name="pwd" hidden value="123456"> </p> <p>性别： <!--单选框: type="radio" value:单选框的值 name : 表示组，name值一样则表示为一组数据，不能同时选择两个 disabled : 禁用，禁止选择男性 --> <input type="radio" value="boy" name="sex" disabled>男 <input type="radio" value="girl" name="sex">女 </p> <p> <!--多选框 type="checkbox" value:多选框的值 name : 表示组，name值一样则表示为一组数据 --> <input type="checkbox" value="sleep" name="hobby">睡觉 <!--checked : 默认选中--> <input type="checkbox" value="code" name="hobby" checked>敲代码 <input type="checkbox" value="chat" name="hobby">聊天 <input type="checkbox" value="game" name="hobby">游戏 </p> <p> <!--按钮 type="button" name ： 按钮名称 value : 按钮上显示的内容 --> <input type="button" name="btn1" value="点击按钮"> <!--图片按钮 相当于提交按钮--> <input type="image" src="../resources/image/2.png" width="50px" height="50px"> </p> <p>国家： <!--下拉框 使用select标签 name ：列表的名称，后台可以获得列表名称 value ： 传到后端的值 --> <select name="country"> <option value="china">中国</option> <option value="usa">美国</option> <!--selected 表示默认选择法国--> <option value="fa" selected>法国</option> <option value="ying">英国</option> </select> </p> <p>反馈： <!--文本域 textarea标签 cols : 默认显示几列 rows : 默认显示几行 --> <textarea name="textarea" cols="30" rows="10">默认文本</textarea> </p> <p> <!--文件域--> <input type="file" name="files"> </p> <p> <!--邮箱验证 输入的值必须添加@并且前后都有值--> 邮箱：<input type="email" name="email"> </p> <p> <!--url验证 输入的值必须是一个网址--> url:<input type="url" name="url"> </p> <p> <!--数字验证 输入的值必须大于0小于100并且是10的倍数 max ： 最大值 min ： 最小值 step ： 步长，每次加几 --> 数字:<input type="number" name="num" max="100" min="0" step="10"> </p> <p> <!--滑块 range 标签 可以在参数中获取得到的多少数值 --> 滑块：<input type="range" name="voice" min="0" max="100" step="2"> </p> <p> <!--搜索框--> 搜索:<input type="search" name="search"> </p> <p> <!--增强鼠标可用性 label标签 也就是在点击label这个标签里面的内容时，会自动将光标锁定到输入框id为for属性里面的内容 --> <label for="work">你点我逝世：</label> <input type="text" id="work"> </p> <p> <!--pattern 正则表达式，这里输入的东西必须满足pattern的规则--> 自定义邮箱： <input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p> <p> <!--提交按钮 ： type="submit" --> <input type="submit"> <!--重置按钮 ： type="reset"--> <input type="reset"> </p></form></body></html>
本文链接：https://www.kkkliao.cn/?id=172 转载需授权！
版权声明：本文由廖万里的博客发布，如需转载请注明出处。
