html基础代码示例
文档结构
<!-- 声明文档的类型 标记该文档为HTML5的文件 --> <!DOCTYPE html> <!-- 页面的根节点 --> <!-- html中的标签都是闭合标签 闭合标签包含 双闭合和单闭合 双闭合：<html></html> 单闭合：<meta /> --> <html> <head> <!-- 声明头部的元信息 对我们文档 规定编码格式 --> <meta charset="utf-8" /> <!-- 包含头部的信息 是一个容器 包含 style title meta script link等 --> </head> <body> <!-- 包含浏览器显示的内容标签 div p a img input等等 --> 这是我们的文档结构 </body> </html>
head标签相关内容
<!DOCTYPE html> <html lang="en"> <head> <!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） --> <!-- 文档的标题 --> <title>路飞学城</title> <!-- 常用两个属性 http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 --> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之后 重定向 到路飞学城的网站 --> <!-- <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> --> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 为了我们的SEO优化 工作的时候下面这两句 要写--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="路飞学城"> <!-- 定义我们的网站图标 --> <link rel="icon" href="./fav.ico"> <!-- 引入外部样式表 --> <link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定义内部样式表 --> <style type="text/css"> </style> <!-- 定义内容脚本文件 --> <script type="text/javascript"> </script> <script src="./index.js"></script> </head> <body> </body> </html>
常用标签
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>常用标签一</title> </head> <body> 带你逐步提升技能 更有Linux运维工程师，带来最极致的成长体验。 <div class="p1"> <p style="height: 2000px" id="p1">顶部</p> </div> <!-- body相关标签 --> <!-- heading :标题 h1~h6 没有h7标题--> <div class="heading"> 不仅有独家<h3>Python全栈开发课程</h3>，带你逐步提升技能。更有Linux运维工程师，带来最极致的成长体验。 <!-- 块级元素 ： 1.独占一行 2.可以设置宽高--> <h1>路飞学城</h1><h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> <h7>路飞学城</h7> </div> <div class="p1"> <!-- 段落标签 --> <p><strong>路飞学城</strong>立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<br>金融分析,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p> <hr> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<s>金融分析</s>,人工智能等互联网最前沿技术,开启职业生涯新可能</p> </div> <div class="anchor"> <!-- a标签属于行内标签： 在一行内显示 设置宽高 不起作用--> <!-- _self:默认值：在当前网站打开资源 _blank:在新的网站打开资源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy">路飞学城</a> <a href="./a.zip">下载压缩包</a> <a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 100px">联系我们</a> <!-- 返回页面顶部的内容 --> <a href="#">跳转到顶部</a> <!-- 返回每个id --> <a href="#p1">跳转顶部的段落标签</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </div> <div class="lists"> <!-- 无序列表 --> <ul type="none" > <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ul> <!-- ol有序列表 --> <ol style="list-style: none"> <li>我的账户></li> <li>我的订单></li> <li>我的优惠券></li> <li>我的收藏></li> <li>退出></li> </ol> </div> <div class="image"> <!-- 1.可设宽高 2.在一行内显示 它叫行内块标签--> <img src="./homesmall.png" alt="python的图片" style="width: 200px;height: 200px"> <img src="./homesmall2.png" alt="python2的图片" style="width: 200px;height: 200px"> </div> <!-- 三种： 1.块级元素 独占一行，可设宽高 如果不设置宽度 浏览器的宽度 2.行内元素 在一行内展示 不能设置宽高 它的宽高根据内容去填充 3.行内块元素 在一行内展示 可设宽高 小练习： 展示两张图片 独占一行 鼠标移上去显示小手的状态 --> </body> </html>
表格table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格 --> <table border="1" cellspacing="0"> <!-- 表格头 --> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 表格主题 --> <tbody> <!-- 表格主体的每一行 --> <tr> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html>
表单form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件</title> </head> <body> <div class="form"> <!-- form标签是一个块级元素 被提交 --> <form action="https://www.baidu.com" method="get"> <p> <!-- label标签行内元素 input是行内块元素--> <label for='user'>用户名:</label> <input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <!-- 单选框 checked会被默认选中，产生互斥的效果 name值要相同--> <p> 用户性别： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!-- 复选框 --> <p> 用户的爱好: <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="乐">乐 </p> <p> <!-- 文件上传 --> <input type="file" name="textFile"> </p> <p> <!-- 文本域 --> 自我介绍： <textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea> </p> <p> <!-- 下拉列表 --> <select name="sel" size="3" multiple=""> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山东">山东</option> <option value="福建">福建</option> </select> </p> <p> <!-- 显示普通的按钮 --> <input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按钮 --> <input type="reset" name=""> <!-- 提交form表单使用 type=submit按钮 --> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按钮</button> </div> </body> </html>
标签分类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签分类</title> </head> <body> <div class="wrapper"> <!-- 块级元素 ：div p h1~h6 ol ul table form li 1.独占一行 2.可以设置宽度和高度，如果设置了宽度和高度，则就是当前的宽高，如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充 --> <div class="left"> 这是路飞学城的战场 <div>这是我的区域 <!-- <div style="width: 500px;height: 100px">这是我的爱好</div> --> <ul> <li> <h2>抽烟</h2> </li> <li> <ol> <li>喝酒</li> <li>烫头</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- a span br i em strong label 行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充 --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">路飞</a> <span style="width: 100px;height: 200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!-- 行内块 : 1.在一行内展示 2.可设置宽高 --> <img src="./homesmall.png" alt="一张图片"> <input type="text" name="username" style="width: 200px;height: 50px"> </div> <!-- 标签嵌套规则 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是h1~h6 p --> </div> </body> </html>
