HTML
标签
html的编码其实就是一个DOCTYPE(文件),在这基础之上会增加一些标签主要就是<head>,<body>,<Script>-这个标签是js脚本引入的标签还设计到很多很多其他的标签例如form表单标签,table表格标签,ur无序列表,li有序列表,除此之外标签里也可以添加一些属性,例如class,id,value,输入框等input type之类的,和标签中间的text(文本)等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初学测试</title> </head> <table width="100%" border="2"> <caption>成员表</caption> <thead> <tr> <th rowspan="2" colspan="1">组号</th> <th rowspan="2" colspan="1">姓名</th> <th rowspan="1" colspan="2">成绩</th> </tr> <tr> <th>唱</th> <th>跳</th> </tr> </thead> <tbody> <tr> <td rowspan="3" colspan="1">第一组</td> <td rowspan="1" colspan="1">梅狸猫</td> <td rowspan="1" colspan="1">80</td> <td rowspan="1" colspan="1">87</td> </tr> <tr> <td rowspan="1" colspan="1">真虾头</td> <td rowspan="1" colspan="1">88</td> <td rowspan="1" colspan="1">90</td> </tr> <tr> <td rowspan="1" colspan="1">贞德式妮鸭</td> <td rowspan="1" colspan="1">70</td> <td rowspan="1" colspan="1">77</td> </tr> </tbody> </table> <!--ul=Unordered List-无序列表--> <ul> <li>更大</li> <li>更快</li> <li>更强</li> </ul> <!--ol=Ordered List-有序列表--> <div style="height: 1000px"></div> <ol type="a" id="ol"> <li>更大</li> <li>更快</li> <li>更强</li> </ol> <body> <h1>6</h1> <h2>66</h2> <h3>666</h3> <h4>6666</h4> </body> </html>
CSS
css是html的段落布局操作,由于html本身的格式设置达不到很精美,符合我们的要求,所以我们创建了css来对其进行格式调整,一般的css布局都是同过在<head>标签里设置<style>来对网页的格式设计,而主要使用的是两种布局flex和gird
*css的布局都是通过display函数来实现的*
display: block; /*以块级元素的方式显示*/ display: inline-block; /*在一行中以块级元素的方式显示*/ display: inline; /*在一行中显示*/ display: flex; /*以flex的方式进行呈现,此时的呈现已经规定了子元素的摆放方式*/ display: grid; /*以网格的方式进行呈现,此时的呈现已经规定了子元素的摆放方式*/
flex布局
flex-direction: 布局的方向
flex-grow: 增长的比例
flex-shrink: 收缩的比例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HighLight</title> <style> /*html,body{*/ /* font-size:100px;*/ /* width: 100%;*/ /* height: 100%;*/ /* margin: 0;*/ /* display: flex;*/ /* flex-direction: row;*/ /*}*/ html,body{ display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; } div{ font-family: 楷体; font-size: 100px; width: 100%; text-align: center; background-color: #6363d4; color: white; } .a{ font-family: 隶书; font-size: 70px; width: 100px; height: 100%; background-color: aqua; } .b{ display: flex; flex-grow: 1.5; flex-shrink: 0.8; } main{ flex-grow: 1.5; flex-shrink: 0.8; display: flex; flex-direction:row; } section{ flex-shrink: 0.8; flex-grow: 1.5; display: flex; flex-direction: column; } nav,footer{ width: 100%; font-size: 50px; font-family: 宋体; background-color: #dddddd; height: 80px; margin: 0; } article{ flex-grow: 1.5; flex-shrink: 0.8; font-size: 50px; font-family: 宋体; background-color: darkkhaki; } </style> </head> <body> <!--<div>左</div>--> <!--<div>右</div>--> <div id="01">精彩集锦</div> <main> <aside class = "a">侧边栏窗格</aside> <section class="b"> <nav>导航窗格</nav> <article>主要内容-display布局</article> <footer>版权信息</footer> </section> </main> </body> </html>
grid布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LEGENDSPOOL</title> <style> html{ width: 100%; height: 100%; margin: 0; } body{ display: grid; grid-template-columns:100% ; grid-template-rows:10% 90%; } header { font-family: 楷体; font-size: 100px; text-align: center; background-color: #1cb59a; color: aqua; } main{ display: grid; /*height: calc(100% - 150px);*/ grid-template-columns: 7% 93%; grid-template-rows: 100%; /*grid-template-columns: ;*/ } aside{ background-color: darkkhaki; font-size: 80px; font-family: 隶书; height: 200%; } </style> </head> <body> <a> <header>传奇球员</header> <main> <aside>导航窗格</aside> <section> <li> 巴萨罗纳 <ul>梅西</ul> <ul>内马尔</ul> <ul>苏亚雷斯</ul> <ul>伊涅斯塔</ul> <ul>哈维</ul> </li> <li> 皇家马得里 <ul>C罗</ul> <ul>加雷斯贝尔</ul> <ul>本泽马</ul> </li> <li> AC米兰 <ul>伊布</ul> <ul>贝克汉姆</ul> <ul>内斯塔</ul> <ul>巴乔</ul> </li> </section> </main> </a> </body> </html>
除此之外,css中还有一个选择器思想定位元素,#id-id选择器 .class-类选择器 标签名-标签选择器
JavaScript
脚本语言,用来进一步操作html网页格式的。
可以通过js实现一些基础的函数功能实现,一些事件的创建。
js是一个弱类型的语言,所以里面只有let(局部)和var(全局)变量之分,除此之外===代表类型一致数据一样。也存在if-else语句等循环语句