1.HTML文档的基本结构(预览地址：http://html.lixingyu.xyz/0702/demo1.html)
实例:HTML文档的基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML文档的基本结构</title> </head> <body> <pre> HTML文档的基本结构:有html、meta、title、head、body 5个基本标签构成。 《html> //告诉浏览器，这个是HTML文档 《head> //HTML文档的头部， 《meta charset="UTF-8"> //charset：指定HTML文档的字符编码 《title>标题《/title> //一个网页中只能使用一次title标签，是标识一个网页唯一标题作用 //而且根据W3C标准必须放入一个网页中头部head标签内。 《/head> 《body> //HTML文档的主体，在浏览器里显示的内容 《/body> 《/html> </pre> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.标题<h1> - <h5> 与段落<p>(预览地址：http://html.lixingyu.xyz/0702/demo2.html)
实例:标题<h1> - <h5> 与段落<p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题<h1>-<h5> 与段落<p></title> </head> <body> h1 到 h6 标签是标题标签，其中 h1 标签 字体的最大最粗，h2 次之......h6 最小 <h1>标题标签 h1 最大最粗（一级标题）</h1> <h2>标题标签 h2 第二（二级标题）</h2> <h3>标题标签 h3 第三（三级标题）</h3> <h4>标题标签 h4 第四（四级标题）</h4> <h5>标题标签 h5 第五（五级标题）</h5> <h6>标题标签 h6 第六 最小（六级标题）</h6> <p>段落标签 p （正文内容）</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 链接标签 a标签(预览地址：http://html.lixingyu.xyz/0702/demo3.html)
实例：链接标签 a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签 a标签</title> </head> <body> <!--链接是现代互联网的发展基础, 全球各个网站就是通过这个小小的链接全部互联到了一起--> <p>HTML文档的基本结构及基本常用标签，target的默认值是 _self</p> <a href="http://www.php.cn/blog/detail/13436.html">默认在当前页面打开</a> <br><!--换行标签 br --><br> <p>HTML文档的基本结构及基本常用标签，target的值是 _self</p> <a href="http://www.php.cn/blog/detail/13436.html" target="_self">默认在当前页面打开</a> <br><!--换行标签 br --><br> <p>HTML文档的基本结构及基本常用标签，，target的值是 _blank</p> <a href="http://www.php.cn/blog/detail/13436.html" target="_blank">在新窗口打开</a> <br><!--换行标签 br --><br> <!--注: 当前父窗口与顶层窗口都是自己,所以与_self效果相同--> <p>HTML文档的基本结构及基本常用标签，target的值是 _parent</p> <a href="http://www.php.cn/blog/detail/13436.html" target="_parent">在父窗口打开</a> <br><!--换行标签 br --><br> <p>HTML文档的基本结构及基本常用标签，target的值是 _top</p> <a href="http://www.php.cn/blog/detail/13436.html" target="_top">顶层窗口打开</a> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.图像标签 img标签(预览地址：http://html.lixingyu.xyz/0702/demo4.html)
实例：图像标签 img标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签 img标签</title> </head> <body> <!--宽度和高度设置一个即可, 另一个会按比例自动调整--> <!--图像的alt属性是一定要有的,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍--> <img src="https://timgsa.baidu***/timg?image&quality=80&size=b9999_10000&sec=1562151480587&di=ef573159777d55a61d6a44ec9ea4b097&imgtype=0&src=http%3A%2F%2Fs9.sinaimg.cn%2Fbmiddle%2F005XWbeUgy6QwbUP4QE58%26690" alt="美丽小姐姐" width="400" title="一个人在郊外不安全早点回家"> <!--图片是外部资源, html文档无法直接提供内容, 所以对于外部资源, html大多是通过单标签进行加载--> <!--html是通过单标签中的属性指定要加载的外部资源的地址--> <!--可以是本地的图片, 也可以是一个网络图片--> <!--添加一条橫线进行分隔--> <hr> <img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png" alt="php工具箱"> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 列表标签(预览地址：http://html.lixingyu.xyz/0702/demo5.html)
无序列表：ul + li 标签
有序列表：ol + li 标签
定义列表：dl + dd +dt 标签
实例：列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--1.无序列表--> <h3>购物车（无序列表：ul + li 标签）</h3> <ul> <li>有备无患的奔驰专用机油, 1个, 800元</li> <li>能看清鞋子的京东摄像头, 2个, 300元</li> <li>3.带暖手宝功能的笔记本电脑, 1台, 7800元</li> </ul> <!--开发中, 无序列表使用更广泛, 例如导航--> (无序列表：ul + li 标签) <ul> <li><a href="">首页</a></li> <li><a href="">公司新闻</a></li> <li><a href="">公司产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul> <!--2.有序列表--> <h3>购物车（有序列表：ol + li 标签）</h3> <ol> <li>有备无患的奔驰专用机油, 1个, 800元</li> <li>能看清鞋子的京东摄像头, 2个, 300元</li> <li>带暖手宝功能的笔记本电脑, 1台, 7800元</li> </ol> <!--3.定义列表--> （定义列表：dl + dd +dt 标签） <dl> <dt>php</dt> <dd>全球最流行的通用的服务器端编程脚本语言</dd> <dt>mysql</dt> <dd>使用最广泛的免费开源的关系型数据库管理系统</dd> <dt>ThinkPHP</dt> <dd>国内使用最广泛的轻量级免费开源的PHP开发框架<dd> </dl> <!--定义列表,类似于名词解释, 通常用来制作页脚的导航--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.表格标签(预览地址：http://html.lixingyu.xyz/0702/demo6.html)
实例：表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--当只有一列数据的时候,用列表无疑是最方便的当有多列, 并且每一列之间有一定关联的时候,应该使用表格更方便 --> <!--使用表格重新编写--> <!--border: 表格与单元格添加边框--> <!--cellspacing: 设置单元格与表格之间的间隙大小,0为折叠--> <!--cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤--> <!--width: 设置表格的宽度, 可以使用相对值:百分比--> <!--align: 设置对齐方式,居中, 居左,居右--> <!--bgcolor: 设置背景色--> <!--colsapn: 单元格在列方向上(水平)的合并--> <!--rowspan: 单元格在行的方向(垂直)合并--> <table border="1" cellspacing="0" cellpadding="5" width="500" align="left"> <!-- 表格标题--> <caption>学员成绩表</caption> <!-- 表格头部,<thead>只允许一个 --> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>姓名</th> <th>学号</th> <th>班级</th> <th>成绩</th> </tr> </thead> <!-- 表格主体,<tbody>可以有多个 --> <tbody> <tr style="text-align: center;color: red"> <td width="100">1</td> <td width="200">李星宇</td> <td width="70">420741</td> <td width="380">PHP中文网第七期学员</td> <td width="80">100</td> <!--单元格相加为450,为什么表格宽度要设置为500, 因为还有cellpadding=5,共50px--> <!--细学的同学可能发现了, 表格线不算宽度吗?当然算,所以表格在总宽度不变的情况下,内部会有轻微缩放--> </tr> <tr style="text-align: center;color: green"> <td>2</td> <td>张三</td> <td>420742</td> <td>PHP中文网第七期学员</td> <td>85</td> </tr> <tr style="text-align: center;color: blue"> <td>3</td> <td>李四</td> <td>420743</td> <td>PHP中文网第七期学员</td> <td>77</td> </tr> </tbody> <!-- 表格底部，tfoot也只允许有一个 --> <tfoot> <tr style="text-align: center;color: #FF00FF"> <!-- 单元格在列方向上的合并: colspan --> <td colspan="4" align="center">总计</td> <td>262</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7.表单与常用控件标签(预览地址：http://html.lixingyu.xyz/0702/demo7.html)
实例：表单与常用控件标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与表单中的控件元素</title> </head> <body> <h3>用户注册</h3> <form action="" method="get" name="register"> <p> <label for="username">帐号:</label> <!-- autofocus:自动获取焦点--> <input type="text" id="username" name="username" placeholder="不超过8个字符" autofocus> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="6-12的字母和数字组成" autofocus> </p> <p> <label for="email">邮箱:</label> <!-- required: 必填项--> <input type="email" id="email" name="email" placeholder="example@mail***" required> </p> <p> <label for="age">年龄:</label> <!-- min - max: 设置取值范围--> <input type="number" id="age" name="age" min="16" max="70"> </p> <p> <label for="birthday">生日:</label> <!-- 时间控件因浏览器不同, 会有不同的实现效果,但功能是类型的--> <input type="date" id="birthday" name="birthday"> </p> <p> <!-- select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型--> <!-- 与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中--> <label for="course">课程:</label> <!-- 默认显示是一个,可以用size设置--> <select name="course" id="course" size="1"> <!-- 选择支持分组--> <optgroup label="前端:"> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <!-- selected: 设置默认选项--> <option value="3" selected>JavaScript</option> </optgroup> <optgroup label="后端:"> <option value="4">PHP</option> <option value="5">MySQL</option> <option value="6">ThinkPHP</option> </optgroup> </select> </p> <!-- 复选框--> <p> <label for="programme">爱好: </label> <!-- 点击"爱好"标签会自动定位到"撸代码"选项上--> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <!-- checked: 默认值--> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label> </p> <!-- 单选按钮--> <p> <label for="male">性别: </label> <!-- 点击"性别"标签会自动定位到"男生"选项上--> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <!-- checked: 默认值--> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <!-- 文本域--> <p> <label for="comment">简介:</label> <!-- 文本域其实就是一个多行文本框--> <!-- 不要设置value属性, 返回的文本在value属性中--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p> <p> <!-- 按钮--> <input type="submit" name="submit" value="提交"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="reset" name="reset" value="重置"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <input type="button" name="button" value="按钮"> <!-- 推荐使用button标签定义按钮--> <!-- 默认也input:submit功能是一样的--> <button>提交1</button> <!-- 等价于--> <button type="submit">提交2</button> <!-- 普通按钮, 点击执行的行为, 由用户自定义--> <button type="button">提交3</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
8.内联框架标签(预览地址：http://html.lixingyu.xyz/0702/demo8.html)
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架标签</title> </head> <body> <!--内联框架: 在当前页窗口中, 再次加载一个窗口, 显示另一个页面,类似画中画功能--> <!--<iframe src="https://www.baidu***/" frameborder="1" name="search" width="1000" height="500"></iframe>--> <!--利用a标签的target属性可以指向一个框架的name属性的特性, 做一个小案例--> <!--<a href="https://www.baidu***/" target="search">百度</a>--> <!--<a href="https://www.so***/" target="search">360</a>--> <!--<a href="https://www.sogou***/" target="search">搜狗</a>--> <p> <!-- <iframe src="" frameborder="1" name="search" width="1000" height="500"></iframe>--> </p> <!--其实网站后台布局原理, 就是这个--> <h2>后台管理</h2> <ul style="float: left;"> <li><a href="demo3.html" target="main">用户管理</a></li> <li><a href="demo4.html" target="main">分类管理</a></li> <li><a href="demo5.html" target="main">商品管理</a></li> <li><a href="demo6.html" target="main">系统设置</a></li> </ul> <iframe srcdoc="<h3>网站管理后台</h3>" frameborder="" width="600" height="500" style="float:left" name="main"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
9.通用容器与语义化标签(预览地址：http://html.lixingyu.xyz/0702/demo9.html)
实例：通用容器与语义化标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用容器与语义化标签</title> </head> <body> <!--通用容器: 内部可以放任何元素, 不适合直接放内容,如文本--> <!--容器的外观显示上,表现为块级元素, 默认占据一行--> <div> <a href="http://www.php.cn/blog/yixing520.html">我的博客</a> </div> <!--span: 也是一个容器, 不过它很害羞,不要把它直接暴露在body中,而应该放在另一个标签中--> <!--span中的内容, 应该是具体的内容, 例如文本--> <!--style属性还没有学, 这里先借用一下,明天会学到--> <p>这么晚了, 大家<span style="color:red;font-size:2em;">累</span>了吗?</p> <!--容器标签更多是用来布局--> <!--属性id: 描述页面上的唯一元素,类似于元素的***号--> <!--属性class: 可以给页面的一个或多个元素设置统一的样式,批量设置--> <div id="header">头部</div> <div id="nav">导航</div> <div id="main"> <div class="article">左侧内容区</div> <div class="aside">右侧边栏区 <div> <img src="https://ss1.bdstatic***/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1145678707,2718337860&fm=26&gp=0.jpg" alt="小姐姐"> </div> </div> </div> <div id="footer">页脚</div> <!--因为还没有学到css,目前暂看不到布局之后的效果--> <!--在html5中, 定义很多语义化的布局标签,可以代替以上的通用容器div,更加的人性化--> <hr> <header role="banner">头部</header> <nav role="navigation">头部</nav> <main role="main"> <article role="article">左侧内容区</article> <aside>左侧内容区 <section> <img src="https://ss1.bdstatic***/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=594267696,3502197635&fm=26&gp=0.jpg" alt="小姐姐"> </section> </aside> </main> <footer>页脚</footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
