Collection
Collection
一、标题与段落（div，h1~h6，p等）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <div> <!-- 标题: h1 ~ h6 --> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <!-- 水平线：hr --> <hr> <!-- 段落：p --> <p>段落1</p> <p>段落2</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、列表（ul，li，ol，dt，dd）
<div> <h3>列表</h3> <!-- 无序列表 --> <ul> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> </ul> <!-- 有序列表 --> <ol> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> </ol> <!-- 定义列表 --> <dl> <dt>可能是</dt> <dd>蠢材</dd> <dt>也可能是</dt> <dd>天才</dd> </dl> </div>
点击 "运行实例" 按钮查看在线实例
三、 表格（table,caption, thead,tbody,tfoot,tr,th,td）
<table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">前端课程</td> <td align="center">30</td> <td align="center">1</td> <td align="center">学习</td> </tr> <!-- align="center"可以用到tr上再加方便 --> <tr align="center"> <td>2</td> <td>后端课程</td> <td>1000</td> <td>1</td> <td>学习</td> </tr> <tr align="center"> <td>3</td> <td>阿里云服务器</td> <td>30</td> <td>1</td> <td>提供服务</td> </tr> </table>
点击 "运行实例" 按钮查看在线实例
四、 表单（form,label,input,select,textarea,button）
<!-- 下面以用户注册表单为例进行演示 --> <h2>用户注册</h2> <form action="" method="POST"> <div> <!-- (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定 (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上 --> <!-- 用户名: --> <label for="username">用户名:</label> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 --> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!-- 复选框 --> <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历:</label> <select name="" id="edu" value=""> <option value="1">幼儿园算吗?</option> <!-- selected设置默认项 --> <option value="2" selected>小学没毕业</option> <option value="3">不好意思,博士后</option> </select> </div> <!-- 文本域,其实就是多行文本框 --> <div> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!-- 按钮 --> <input type="submit" value="提交"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">注册</button> </form>
点击 "运行实例" 按钮查看在线实例
五、图片与媒体（img，video）
<!-- 图片标签是单标签,引入的是外部的资源 src="图片地址", 支持本地和网络url地址 alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 --> <img src="https://img.php.cn/upload/article/000/000/003/5c2d976cd70af991.jpg" alt="PHP程序员从布衣到大牛的必经之路全程直播实战边学边练边辅导线上***（第四期）" height="200"> <!-- 换行 --> <br /> <!-- 播放视频:controls显示播放控件, 支持宽度设置 --> <video src="http://www.w3school.com.cn/i/movie.ogg" controls width="400"></video>
点击 "运行实例" 按钮查看在线实例
六、CSS
CSS：层叠样式表, 是用来定义页面上的html元素如何显示的一组规则或声明
基本语法: 选择器 {样式声明}
1. 选择器: 最基本的有标签,类class, id 。这三个常用选择器的优先级是: 标签 < 类class < id
2. 样式声明: 包括属性和值二部分
3. 样式规则 = 选择器 + 样式声明
CSS盒子模型
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
3. 盒子模型分为三个层级:
a. 内容级: 宽高和背景三个属性
(1): width
(2): height
(3): background-color (默认透明)
b. 元素级(可视范围)
(1): 包括内容级(width + height + background)
(2): 内边距: padding
(3): 边框: border
c. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
