构建之法读书笔记3 html和css学习
第五章：团队和流程
团队模式主要包括交响乐团模式、功能团队模式、官僚模式等，每种模式都有其优缺点和适用情景。
开发流程包括RUP流程、渐进交付流程（MVP和MBP），每种流程都有其特点和应用场景。
第六章：敏捷流程
敏捷开发原则要求尽早并持续地交付有价值的软件，欢迎需求变化，经常发布可用的软件，业务人员和开发人员每天共同工作，以有进取心的人为项目核心，面对面的交流最有效，可用的软件是衡量项目进展的主要指标，敏捷流程应能保持可持续的发展，保持简明，自我管理的团队才能创造优秀的架构、需求和设计。
敏捷步骤：要找出完成产品需要做的事情（Product Backlog）、决定当前的冲刺需要解决的事情（Sprint Backlog）、冲刺阶段通过每日立会进行面对面交流。
列表标签
<!-- 布局内容排列整齐的区域 -->
<!-- 列表分类：无序列表（使用最高）、有序列表、定义列表 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
</head>
<body>
<!-- 无序列表：布局排列整齐的不需要规定顺序的区域 -->
<!-- 标签：ul嵌套li，ul是无序列表，li是列表条目 -->
<!-- ul标签只能包裹li标签，li标签可以包裹任何内容 -->
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<!-- 有序列表：布局排列整齐需要规定顺序的区域 -->
<!-- 标签：ol嵌套li,ol是有序列表，li是列表条目 -->
<!-- ol标签只能包裹li标签，li标签可以包裹任何内容 -->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!-- 定义列表：标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。 -->
<!-- dl里面只能包含dt和dd,dt和dd里面可以包含任何内容 -->
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
</dl>
</body>
</html>
表格标签
<!-- table嵌套tr,tr嵌套td/th -->
<!-- table:表格标签 tr:行 th:表格单元格 td: 内容单元格 -->
<!-- 在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线 -->
<!-- 表格结构标签：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰 -->
<!-- 合并单元格：将多个单元格合并为一个单元格，以合并同类信息 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table border="1">
<!-- tr:行 -->
<tr>
<!-- th:表格单元格 -->
<!-- thread 表格头部 （表格头部内容） -->
<th>姓名：</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<!-- td: 内容单元格 -->
<!-- tbody 表格主体（主要内容区域） -->
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<!-- tfoot 表格底部 （汇总信息区域） -->
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
<br>
<!-- 表格结构标签：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰 -->
<table border="1">
<!-- tr:行 -->
<thead>
<tr>
<!-- th:表格单元格 -->
<!-- thread 表格头部 （表格头部内容） -->
<th>姓名：</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<!-- td: 内容单元格 -->
<!-- tbody 表格主体（主要内容区域） -->
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
</tbody>
<!-- tfoot 表格底部 （汇总信息区域） -->
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
<br>
<!-- 合并单元格：将多个单元格合并为一个单元格，以合并同类信息 不能跨结构标签合并-->
<!-- 步骤：保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量） -->
<!-- 跨行合并，保留最上单元格，添加属性rowspan -->
<!-- 跨列合并，保留最左单元格，添加属性colspan -->
<!-- 删除其他单元格 -->
<table border="1">
<!-- tr:行 -->
<thead>
<tr>
<!-- th:表格单元格 -->
<!-- thread 表格头部 （表格头部内容） -->
<th>姓名：</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<!-- td: 内容单元格 -->
<!-- tbody 表格主体（主要内容区域） -->
<td>张三</td>
<td>99</td>
<!-- 跨行合并，保留最上单元格，添加属性rowspan -->
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<!-- tfoot 表格底部 （汇总信息区域） -->
<tfoot>
<tr>
<td>总结</td>
<!-- 跨列合并，保留最左单元格，添加属性colspan -->
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
表单标签：
<!-- 收集用户信息 -->
<!-- 使用场景：登录页面，注册页面，搜索区域 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- input标签 -->
<!-- type属性值不同，则功能不同 -->
<!-- text:文本框（输入什么就显示什么），用于输入单行文本 -->
文本框：<input type="text">
<br><br>
<!-- password：密码框 （输入什么都以点的形式显示）-->
密码框：<input type="password">
<br><br>
<!-- radio:单选框 -->
单选框：<input type="radio">
<br><br>
<!-- checkbox:多选框 -->
多选框：<input type="checkbox">
<br><br>
<!-- file:上传文件 -->
文件上传：<input type="file">
<br><br>
<hr>
<!-- input标签占位文本：提示信息 -->
文本框：<input type="text" placeholder="请输入用户名">
<br><br>
密码框：<input type="password" placeholder="请输入密码">
<br><br>
<!-- 单选框radio -->
<!-- 常用属性：name 控件名称 控件分组同组只能选中一个（单选功能） -->
<!-- checked 默认选中 属性名和属性值相同，简写为一个单词 -->
<!-- gender自定义，划分为同一组 -->
<input type="radio" name="gender" checked>男
<input type="radio" name="gender" >女
<br><br>
<!-- 上传文件：file 添加属性multiple可以实现文件多选功能 -->
上传文件：<input type="file"multiple>
<br><br>
<!-- 多选框 checkbox,也叫复选框，默认选中checked -->
爱好：<input type="checkbox" checked>敲前端代码
<input type="checkbox" >敲后端代码
<input type="checkbox" >敲代码
</body>
</html>
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
</head>
<body>
<!-- select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。 -->
<!-- 添加selected属性：显示默认选中 -->
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>厦门</option>
</select>
</body>
</html>
文本域标签
<!-- 多行输入文本的表单控件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本域标签</title>
</head>
<body>
<!-- 标签：textarea,双标签（输入多个文字时可换行） -->
<!-- cols="30" rows="10"设置文本域尺寸的（可删） -->
<!-- 右下角有拖拽功能，未来会禁用：用css设置尺寸 -->
<textarea cols="30" rows="10">请输入评论</textarea>
</body>
</html>
label标签
<!-- 网页中，某个标签的说明文本 -->
<!-- 经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。 -->
<!-- label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签</title>
</head>
<body>
<!-- label标签增大点击范围 -->
<!-- 写法一 -->
<!-- label标签只包含内容，不包裹表单控件 -->
<!-- 设置label标签的for属性值和表单控件的id属性值相同 -->
性别:<input type="radio" name="gender" id = "man"><label for="man">男</label>
<!-- 写法二 -->
<!-- 使用label标签包裹文字和表单控件,不需要属性 -->
<label><input type="radio" name="gender">女</label>
<br><br>
</body>
</html>
按钮标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮标签</title>
</head>
<body>
<!-- 标签:button(双标签) 有type属性-->
<!-- type属性值:
submit 提交按钮,点击后可以提交数据到后台(默认功能)
rest 重置按钮,点击后将表单控件恢复默认值
button 普通按钮,默认没有功能,一般配合JavaScript使用 -->
<!-- form 表单区域标签 (这些表单标签只有在form的统一管理下才能有实际功能)-->
<!-- action属性是未来发送数据的地址 -->
<form action="">
用户名：<input type="text" placeholder="请输入用户名">
<br><br>
密码：<input type="password" placeholder="请输入密码">
<br><br>
<button type="submit">提交</button>
<!-- 省略type属性默认就是提交 -->
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
无语义的布局标签
<!-- 布局网页(划分网页区域,摆放内容) -->
<!-- div:独占一行 -->
<!-- span:不换行 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无语义的布局标签</title>
</head>
<body>
<!-- div:大盒子(独占一整行) -->
<div>这是 div 标签</div>
<div>这是 div 标签</div>
<!-- span:小盒子(不换行) -->
<span>这是 span 标签</span>
<span>这是 span 标签</span>
<br><br>
<!-- 字符实体:在网页中显示预留字符 -->
<!-- ( 空格 ) -->
<!-- (< 小于号 <) -->
<!-- (> 大于号 >) -->
乾坤未定,你我皆是黑 马
<p><7></p>
</body>
</html>
浙公网安备 33010602011771号