![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：标签不难, 记住且掌握不易, 多写多看
Collection
Collection
1、标签：
HTML常用标签
标题；<h1>~<h6> (字体大小)
段落；<p>
链接；<a href=" "target="">
图像；<img src=""alt="">
列表；<uL>+<Li>,<oL>+<Li>.<dL><dt><dd>
表格；<table><thead><tbody><button>
框架；<iframe src=""width=""height="">
通用；<div><span>
容器；<header><nav><main><article><section><footer>
HTML的标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分
2、元素
HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。例如:<p>我是一个段落</p>表示一个html元素.可以看出,一个html元素主要包括html标签和纯文本.标签定义了网页显示的格式,文本表示网页的内容.故此,网页 = html文档,而html文档则是由html元素定义的.
3、属性
HTML属性为HTML元素提供附件信息。
例如在超链接标签<a href = “http://www.php.cn>PHP中文网</a>使用了href 来指定超链接的地址.
属性总是以名称/值的形式出现,例如:name = “value”
属性总是在开始标签中定义.
<!DOCTYPE html> <!-- 文档类型 --> <html lang="en"> <head> <!-- 头部浏览器可读 --> <meta charset="UTF-8"> <!-- 编码 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>网站的名字</title> </head> <!-- 用户直接读取部分 --> <body> <h1>我最大</h1> <p>你最大</p> <h6>我最小</h6> <p>你最小</p> </body> <html>
点击 "运行实例" 按钮查看在线实例
三类列表 有序 无序 自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表</title> </head> <body> <!-- 无序列表 --> <h3>装作爱读书的</h3> <ul> <li>读书好</li> <li>读好书</li> <li>好读书</li> </ul> <!-- 有序列表 --> <h3>装作爱读书的</h3> <ol> <li>读书好</li> <li>读好书</li> <li>好读书</li> </ol> <!-- 导航 --> <ul> <li><a href="">我要读书</a></li> <li><a href="">我要读好书</a></li> </ul> <!-- 定义列表 --> <dl> <dt>读书</dt> <dd>读好书</dd> <!-- 可多个 --> <dt>读书</dt> <dt>读好书</dt> <dd>读好书</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
商品清单表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格</title> </head> <body> <!-- 对于多列且每一列之间有关联的数据适合用表格进行组织 --> <h3>***</h3> <ul> <li>1 康帅傅红茶，1瓶.3元</li> <li>2 和其正凉茶，2瓶，4元</li> <li>3 今麦郎绿茶，1瓶，3元</li> </ul> <hr> <!-- 分割线 --> <table border="1" width="500" cellspacing="0" cellpadding="10"> <caption> <h3>购物车</h3> </caption> <!-- 表头 --> <thead> <tr bgcolor="yellow"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> </thead> <!-- 主体 --> <tr> <td>1</td> <td>康帅傅红茶</td> <td>3</td> <td>1</td> <td>3</td> </tr> <tr> <td>2</td> <td>和其正凉茶</td> <td>4</td> <td>2</td> <td>8</td> </tr> <tr> <td>3</td> <td>今麦郎绿茶</td> <td>3</td> <td>1</td> <td>3</td> </tr> <!-- 底部 --> <tr> <td colspan="3" align="center">合计</td> <td>4</td> <td>14</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
注册表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册表单</title> </head> <body> <h3>用户注册</h3> <form action="login.php" method="post"> <p> <label for="username">帐号</label> <input type="text" id="username" name="uesename" value="王胖子"> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="必须8-16位之间"> </p> <p> <label for="emall">邮箱</label> <input type="emall" id="emall" name="emall" placeholder="example@emall.com"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">课程</label> <select name="" id=""> <optgroup label="前端"> <option value="">请选择</option> <option value="">html5</option> <option value="">css3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好</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> <input type="checkbox" name="hobby[]" value="read" id="read" checked><label for="read">阅读</label> </p> <p> <label for="secrecy">性别</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="button" value="按钮"> <button type="button">注册</button> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
