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

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

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

     select

章节9 整站规划

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

服务器：可以提供服务的机器 可以提供数据服务的机器 命名法驼峰式命名id="mainLeft"id="sideBar"下划线 phpid="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

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

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

0基础转行Web前端系统的学习路线分享
导读: 作为刚接触web前端开发或者已成为前端工程师的你,是否经常碰到以下疑问: 1.零基础从哪里开始学web前端? 2.学web前端要学习哪些语言? 3.自学web前端学的会吗? 小编今天带着你对w ...
Web前端开发学习【1】-----大学生如何购买学生版的阿里云服务器，或免费领取半年的阿里云服务器
Web前端开发学习[1]-----大学生如何购买学生版的阿里云服务器,或免费领取半年的阿里云服务器目录一.进入阿里云官网.注册阿里云账号 1.百度搜索关键词[阿里云服务器],然后进入官网 2.免费注 ...
Deeplearning.ai深度学习课程笔记-在线版
注意:请点击阅读原文课程概述课程视频离线版本可以到github:https://github.com/fengdu78/deeplearning_ai_books 查找下载. 课程地址:https ...
吴恩达老师的机器学习和深度学习课程笔记打印版
注意:下载笔记.视频.代码:请点击"阅读原文" 我和同学将吴恩达老师机器学习和深度学习课程笔记做成了打印版,放在github上,下载后可以打印. 公布了深度学习笔记的word和ma ...
Web前端开发学习误区，你掉进去了没？
从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...
html5移动web开发黑马掌上商城_月入35k大佬总结：web前端必须学习的内容（附全套前端教程）...
为了让学习变得轻松,高效!今天给大家分享一套教学资源,帮助大家在学习Web前端的道路上披荆斩棘,这套资源的领取方式请看文末优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面.交互代码的能力. ...
web 前端必备学习指南-精华
工具 box-shadow generator 生成 box-shadow 的工具. gradient-generator 渐变生成器. Ultimate CSS Gradient Generator ...
web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
web前端需要学习什么？需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...

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

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

章节8 表格与表单

章节9 整站规划

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

最新文章

热门文章