上辈子敲代码，这辈子学 HTML（一）---------html框架、

一、框架html的结构很清晰就跟人体的逻辑一样人体分为头部和身体所以每个html也要有head与body。1.一般框架由上图我们可以基本了解大致结构了但是里面应该放些什么呢2.head框架了解之前我们先看一张图我们由图可知head结构里可以放meta、title、link等等那么这些又是什么呢常用框架如图2.1.1 meta简单来说meta就相当于浏览器的“操作说明书”用来定义html的元数据也就是页面本身信息不会显示在页面中只会被浏览器、其他WEB服务解析。常用例子字符编码meta charsetUTF-8 、网页自动刷新meta http-equivrefresh content、网页语言meta http-equivcontent-language contentzh-CN2.1.2 titletitle标签用来定义网页名如图2.1.3 其他style、link、script等css!DOCTYPE html html langen head meta charsetUTF-8 / title登录/title style typetext/css #outside{ width: 95%; height:750px; border: 2px solid #1678BD; border-radius: 10px 10px 0px 0px; margin-left: 34px; margin-top: 20px; } #d1{ background-image: linear-gradient(to bottom right,#369AD6,#197BC0); border-radius: 8px 8px 0px 0px; height: 40px; padding-left: 30px; padding-top: 10px; font-size: 23px; color: #DAE2E9; } #d2 button{ background-color: #C86400; border-radius: 8px; color: white; width: 120px; height: 40px; border: 0px; font-size: 15px; margin-left: 170px; } .info{ margin-top: 50px; align-content: center; margin-left: 400px; } .info div{ margin-top: 20px; margin-left: 20px; } .info input{ height: 30px; width: 250px; } /style /head这一块我们后面再提style标签表示样式换句话说就是给内容添加色彩进行排版布局以及添加动画借助keyframes等操作2.linkindex.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlelink示例/title !-- link引入外部CSS必须写在head里 -- link relstylesheet hrefstyle.css /head body p我是测试文字/p /body /htmlstyle.css p { color: blue; font-size: 20px; }也就是说link可以将文件.css引入到我们需要的html中。当然link还有一个好玩的用法当link中rel“icon”时这时href地址指向图片时会将此图片放进标签中。3.script跟link用法差不多单独写则表示js脚本能够完成一系列事件动作如果后面接地址则表示引入外部js文件