方方老师的思路:在制作个人简历的过程中学会html/css知识,并且在日后完善简历作品的过程中贯穿JavaScript/vue/react 等知识点,在实践的过程中学习

• 在做简历之前买一个域名
• 平时可以上dribbble.com(国际顶级设计师网站,里面有很多优秀设计)练习页面能力
• 前端讲究用了再学而不是学完再用
• 前端大概2005年进入中国,所以没有大学老师会教前端,目前还没有前端科班生
• 简历加分项

1. 开源代码,在github上每天都有commit记录
   2.博客链接
   3.外文翻译,把自己翻译的外文技术系文章
   4.他人评价
   5.对公司业务的分析,这能表示你对公司的关注

• html5.1已经发布,不过现在通用的还是html5,版本不同最直观的就是标签不同
• 能统一在微信上显示的网页就是所谓的H5技术

html

常见标签
a/anchor 锚点
div/divide span
video/视频
audio/音频
svg/不规则图形~~~~

• 你知道标签的英文意思,基本会怎么使用
• 除了div+span 其他标签都会自带样式
• 去MDN看标签的具体使用
• 学前端有个问题就是谣言太多了~~~~html标签是没有块和内联元素区分的,因为都是可以用display 属性来转换的,只有在css里面才区分内联和块元素的区别,总的来说,html是不管样式的,它只提供语义化的表达,样式是由css来控制

---

简历html架构思路

• html是页面的骨架,它无关样式,只在乎语义化
• 看见一个logo 就要想到用一个img标签去代表
• 看到链接标示,就要想到用锚点标签,一般都是多个类似的放在导航上面,那么直接用导航标签
• 写完一部分标签之后,就留意一下他的区域,然后就用div标签包裹起来//注意一点:写Class或者ID的时候尽量用驼峰命名法的标识符~~~因为好看
• 看见大图就用banner/要留意它和其他元素之间是否存在耦合关联,因为很多时候是要划分区域的,区域不同包裹的元素就不同,影响到很多元素之间的父子级关系,影响到css样式渲染
• 在往下看,就看到简历的核心内容,就用main标签//
• main标签里面又要细分 图片+文字+链接logo三部分,先屡一下耦合关系,然后用3个div划分区域,其中用到了hr水平分割线,也用到了描述列表dl dt标签,在往下看发现下面很像页脚,可以用footer标签,最后用了a+p+br/强制换行 因为空格和回车在html都会被默认取消
• 这里有一个重点:就是main标签里面的内容原本是3个div可是1和2被包裹起来了,12-3形成了上下结构,为什么这样做呢?//这是因为目前的css布局只有两种:纵向和横向,grid复杂布局可能要到2018年底才出现
• main之后开始新的章节,就用到section标签,表示新的内容,当然用div也行
• 在html里面,有的特殊符号是需要转义的

总结:

1.写html心中只在意它的架构,重点在于语义化
2.写html的时候,区域的划分很重要,必须要了解每个区域的功能以及耦合关系,再考量区域的划分,这个很需要经验,多写就行了
3.写html只在乎是什么,看到页面上有什么,就给一个合乎语义的标签代表,样式和渲染效果不在考虑范围内,那是写css的时候 调试的
4.写html的速写语法: a[href='#']*7>img[art='#']

第一节课后作业笔记

• whois 命令是查看某个域名的拥有者
• 空元素指的就是那些没有内容的元素,注意有的元素是没有内容但是有属性比如meta link
• html不会报错,只会纠错,比如把div+span写进head标签里面,会自动把他转移到body去
• ifram可以拥有一个name,a标签的target 可以通过name指向这个iframe 现在前端开发中基本不用这个元素了
• 可以通过meta标签里面的http-equiv= content-type content='text/html'属性把智障后端忘记写的content状态补上
• body 默认margin是8px
• 可替换元素就是那些内容决定展示的标签:img /
• html标签是没有样式的,只有语义,看见的默认样式都是浏览器加上去的

HTML总结:
1.总的来说html就是写个架构,看见什么,根据具体功能就给一个符合语义的标签
2.除了给合适的标签还要,考虑布局,因为我们写页面就是为了给客户良好的体验,一个页面的展示就牵涉布局,所以不管为了体验,还是方便自己写代码,在写html除了考虑语义化的同时,还要考虑布局,目前css只纵横两种布局,以后会出grid