Web前端系统学习——课程笔记（章节8-9）

Web前端系统学习——课程笔记

课程链接：WEB前端系统学习 - 网易云课堂

参考教程：菜鸟教程

笔记链接：Web-Learn-Note

---

章节8 表格与表单

• 课时30 表格嵌套规则 样式初始化 14:04

  <table></table> 表格
  <thead></thead> 表格的头部
  <tbody></tbody> 表格的身体
  <tfoot></tfoot> 表格的尾部
  <tr></tr>       表格行数
  <th></th>       表格的标题
  <td></td>       表格的单元格
  
  table {
  	border:1px solid red;
  	border-collapse: collapse;
  }
  td,th {
  	border:1px solid red;
  	padding:0;
  }
  

• 课时31 表格标签特性 单元格合并 20:13

  table标签的特性
  	1.单元格会默认平分整个table的宽度
  	2.th的内容默认加粗，并且水平和垂直都居中
  	3.td的内容默认不加粗，并且垂直居中
  	4.table的宽度决定整个表格的宽度，如果td，th设置的总宽度比table的宽度大，不好使
  	5.表格的同一列继承最大宽度 （th,td最好都设置上宽度）
  	6.表格的同一排继承最大高度  （th,td最好都设置上高度）
  
  单元格合并 
  	colspan="数值" 
  	rowspan="数值"
  		数值对应需要合并的单元格的数量 ，
  		温馨提示：
  			被合并的单元格要删除，否则会多出一个单元格
  

• 课时32 表单 表单控件input类型 29:22

  form
  	action="需要传送到地址"
  	method="传送的方式"
  		get 在地址栏做内容的拼接，用户可以看的到
  		post 把表单元素里面的内容做拼接，并且打包传送的action的地址，用户看不到
  	target
  		_blank 在新窗口打开
  		-self  在当前窗口打开
  
  
  	input的type类型
  		文本 text
  		密码 password
  		radio 单选
  		checkbox 多选
  		file  文件上传
  		button 按钮
  		hidden 隐藏
  		reset 重置
  		submit 提交
  
  	温馨提示 ：
  		input里面标签的值都体现在value中 
  		name属性一定要设置，如果不设置，无法实现上传
  

课时33 表单其他控件 样式初始化 09:35

 	select

章节9 整站规划

• 课时34 服务器 路径 命名 19:32

  服务器：可以提供服务的机器 可以提供数据服务的机器 
  
  命名法
      驼峰式命名
          id="mainLeft"
          id="sideBar"
      下划线 php
          id="dl_header"
      中划线 命名法
          id="dl-header"
  
  (1)页面结构
  - 容器: container
  - 页头：header
  - 内容：content/container
  - 页面主体：main
  - 页尾：footer
  - 导航：nav
  - 侧栏：sidebar
  - 栏目：column
  - 页面外围控制整体布局宽度：wrapper
  - 左右中：left right center
  
  (2)导航
  - 导航：nav
  - 主导航：mainbav
  - 子导航：subnav
  - 顶导航：topnav
  - 边导航：sidebar
  - 左导航：leftsidebar
  - 右导航：rightsidebar
  - 菜单：menu
  - 子菜单：submenu
  - 标题: title
  - 摘要: summary
  
  (3)功能
  - 标志：logo
  - 广告：banner
  - 登陆：login
  - 登录条：loginbar
  - 注册：regsiter
  - 搜索：search
  - 功能区：shop
  - 标题：title
  - 加入：joinus
  - 状态：status
  - 按钮：btn
  - 滚动：scroll
  - 标签页：tab
  - 文章列表：list
  - 提示信息：msg
  - 当前的: current
  - 小技巧：tips
  - 图标: icon
  - 注释：note
  - 指南：guild
  - 服务：service
  - 热点：hot
  - 新闻：news
  - 下载：download
  - 投票：vote
  - 合作伙伴：partner
  - 友情链接：link
  - 版权：copyright
  

• 课时35 网站加载速度和用户流失比率 13:07

  网站的加载速度
  	文件大小
  		css
  			提取公共样式 把相同的css样式提出 尽量重用 减少代码量
  			尽量用复合样式减少代码量
  			尽量发现公共样式 使代码重用减少代码量
  			相同样式用群组选择器 减少代码量
  
  		css的维护
  			划分好区域 方便维护代码
  
  	文件数量
  		图片
  

• 课时36 背景图合并 整站思路 26:37

  图片的命名不要用中文，尽量用英文或者拼音 不要随意加数字 不要大小写切换 要么全大写 要么全小写