生活职场趣事分享 发表于 2019-7-12 11:11:39

想看懂网站源代码里面的代码吗?看了你就懂了(续)

https://p3-sign.toutiaoimg.com/pgc-image/436f03bca533409d92539671449fa631~tplv-tt-large.image?x-expires=1970207340&x-signature=JuXFOwm1vEuKjw5PckpMzC%2BmIhY%3D
此章是图上这章的续章,上一篇由于代码太长,只能讲述网站的一个TOP顶部,废话不多说,更新!
https://p3-sign.toutiaoimg.com/pgc-image/64c1b7bf2b9a4ef981c5cb85ddad70e8~tplv-tt-large.image?x-expires=1970207340&x-signature=XZF7y6Zje9oaU89K%2BRkIKQYUvGU%3D
上一篇源代码是XHTML的格式,而这篇格式是HTML5简化了很多写法,首先顶部没有向浏览器声明HTML版本,xmlns声明空间也省略掉了,而在早期版本中是必须要书写的,字符编码声明,尚有声音浏览器都简化了,之后是SEO最重要的TDK,
https://p3-sign.toutiaoimg.com/pgc-image/0f416b3854ac47399263ef46ef50af2d~tplv-tt-large.image?x-expires=1970207340&x-signature=tac09HgVYoWkQmbJ1J8Gg84SM8w%3D
之后是CSS的外部样式表,
https://p3-sign.toutiaoimg.com/pgc-image/6f9f0647522745c39f0bfde6026cd0ac~tplv-tt-large.image?x-expires=1970207340&x-signature=kHhVcSLG58OYZtwNc7%2FGUk%2F26eY%3D
后面是JS的样式表 后面是ddsmoothmenu在浏览器中,与用户进行数据交换都是通过客户端的
javascript代码来实现的,而完成这些交互工作大多数是document对象及其部件进行的,因此document对象是一个比力重要的对象。
简写进入body部门
https://p3-sign.toutiaoimg.com/pgc-image/020b2b910f2947dba7598ff3881e2900~tplv-tt-large.image?x-expires=1970207340&x-signature=ukJ9zHVSXD4VT7WwR7Abw9LgJTM%3D
简写,声明头部,上一章讲过,这是对应网站的内容图下:
https://p3-sign.toutiaoimg.com/pgc-image/0566007eb2804e038e4cf5f3231241b8~tplv-tt-large.image?x-expires=1970207340&x-signature=fAi2xlKA24s30CqzQ5ApVYIAxzg%3D
这一块是网站的横幅img src=就是横幅我们所看到的图片图下:
https://p3-sign.toutiaoimg.com/pgc-image/bc0837b63b7f4134898df0a99ac5d69b~tplv-tt-large.image?x-expires=1970207340&x-signature=vRr%2F%2FDWvrUcffDNuUlb5vvuUGyY%3D
https://p3-sign.toutiaoimg.com/pgc-image/fed5be9fc4964df9ab8179029f7b4239~tplv-tt-large.image?x-expires=1970207340&x-signature=BlHv%2BMnhL4xpjmBXJRGjO4YbZVc%3D
再往下是网站产品的滚动栏,添加了滑动的特效:
https://p3-sign.toutiaoimg.com/pgc-image/d1c44873da1941088ed5eb29285717ad~tplv-tt-large.image?x-expires=1970207340&x-signature=gV1xEsBH%2BGXw%2FMecfLUnZN3wt30%3D
源代码如图下:
https://p3-sign.toutiaoimg.com/pgc-image/058d3727fe4f4d6cb766c4918f1cc9b6~tplv-tt-large.image?x-expires=1970207340&x-signature=FbIuD0j%2B1RvlYaYNOTCnW1MAZIw%3D
再往下是关于我们的界面图下:
https://p3-sign.toutiaoimg.com/pgc-image/58c82f6068734db19553782d0f8376e2~tplv-tt-large.image?x-expires=1970207340&x-signature=3g9XRz2vDrOqdtsXPLmh%2FcdwJC4%3D
查看更多
我们注意一下这个a标签是内链,跳转到了网站的“关于我们”这个栏目。
https://p3-sign.toutiaoimg.com/pgc-image/77e007bd81f943baa664d61a2cee8d27~tplv-tt-large.image?x-expires=1970207340&x-signature=j0Or3kSEuJcSE8cB8pqh%2Bf3PIHw%3D
https://p3-sign.toutiaoimg.com/pgc-image/759167d509154a68b76173a2386b07d6~tplv-tt-large.image?x-expires=1970207340&x-signature=2sUC0NtV26MUuyGfLNaK%2BIKsq1k%3D

这串代码比力简单标题 段落 加上A标签按钮组成尚有图片 配景呢已经在CSS样式中设置了,我们不去管它。
https://p9-sign.toutiaoimg.com/pgc-image/4391dfdbada142bca3e989b04346220f~tplv-tt-large.image?x-expires=1970207340&x-signature=nXrjJ0%2Bi6DY43qHJb%2FYxAyj4hsU%3D
https://p3-sign.toutiaoimg.com/pgc-image/3a2f3a3467e14558829cfb8aa7c2d41d~tplv-tt-large.image?x-expires=1970207340&x-signature=vG%2B5ZEOYr9lzsii9gvSomW74peU%3D
这串代码是产品的代码用的有序列表加li元素写出来的。
https://p3-sign.toutiaoimg.com/pgc-image/979c1956819a4109877efc4de30d1a53~tplv-tt-large.image?x-expires=1970207340&x-signature=hLgZr2mze6t%2FDRiPttJXsjd%2BjMU%3D
https://p3-sign.toutiaoimg.com/pgc-image/feb0f35c43f94391abbf7c3cf3b14a5c~tplv-tt-large.image?x-expires=1970207340&x-signature=Qn10O9%2BHbeJnC%2BApCoRblQIKWyw%3D
这篇是文章的footer底部class属性定义文章底部 根本都是a标签 内链跳转和友情链接跳转二维码的图片来源。
下面是文章的最后一部门
https://p3-sign.toutiaoimg.com/pgc-image/4f85c79aaefc441bb981ecec6eff8c0e~tplv-tt-large.image?x-expires=1970207340&x-signature=KF7RysMX216h%2B%2BO8Yi2Z7cwOU%2Fk%3D
https://p3-sign.toutiaoimg.com/pgc-image/e091865e21e348b087ae0fc446b39d81~tplv-tt-large.image?x-expires=1970207340&x-signature=k03x4f49fUDDqcwbrs%2BY2kwNIgE%3D
最后一部门是公司的接洽方式和备案号尚有JS的一些规则,具体规则我们不去分析,本文适合小白新手去学,希望小编的文章对你们起到资助,又到了结束的部门,欢迎在批评下方留言,小编看到会第一时间回复你们,希望小编下篇更新什么,都可以留言。
页: [1]
查看完整版本: 想看懂网站源代码里面的代码吗?看了你就懂了(续)