第一周复习
一、HTML常用標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>html常用標簽</title> </head> <body> <!--<p>我要努力學習前端</p> <h1>leikuan</h1> <h3>leikuan</h3> <h5>leikuan</h5> 你是我的<br/> <hr/> <span><strong> leikuan leikuan</strong> </span> <em>zmj</em> <div><u>zmj</u><s>zmj</s> </div> zmj <hr/> 我要學好前端<br/> >大于號<br/> <小于號<br/> "引號<br/> ©版權符號<br/> <hr/> 圖片屬性 <img src="images/lixian.jpg" width="400px" height="400px" alt="圖片加載失敗" title="李現圖片" border="2px" /> 超鏈接、錨點 <a href="http://baidu.com" target="_blank" title="百度" >百度</a> <hr width="200px" align="center" color="red" size="2px" /> <address> 格式標簽這是第一個周復習 努力加油 </address> <hr/> <!--預文本標簽pre--> <!-- <pre>我是你你是我那我是誰 </pre> 文本格式化標簽 <b>leikuan</b> <strong>加粗</strong><br/> <em>leikuan</em> <i>斜體 </i><br/> <u>下劃線</u><br/> <del>刪除</del> <small>小號字</small> 3<sup>5</sup> H<sub>2</sub>O <ins>插入</ins> 列表標簽：無序列表標簽（ul）、有序（ol）、自定義（dl）--> <h3>你喜歡吃什么水果？</h3> <ul type="square"><li>蘋果</li><li>香蕉</li><li>西瓜</li><hr/><h3>你喜歡吃什么蔬菜？</h3><ol type="a"><li>小白菜</li><li>胡蘿卜</li><li>西紅柿</li><li>蓮菜</li></ol><hr/><dl><dt>專業</dt><dd>前端</dd><dd>后臺</dd><dd>JAVA</dd></dl> </ul> </html>二、表格、內聯框架
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格、內聯框架</title> </head> <body> <!--表格的基本結構（其標簽都為雙標簽）--> <!--表格的練習--> <!--<table border="2px" width="500px" height="300px" align="center" cellspacing="0px"><caption>學生信息表</caption><tr align="center"><th colspan="3">學生信息表</th><th colspan="2">成績</th></tr><tr><th>姓名</th><th>性別</th><th>專業</th><th>課程</th><th>分數</th></tr><tr align="center"><td>球球</td><td>男</td><td rowspan="2">計算機</td><td rowspan="3">程序設計</td><td>68</td></tr><tr align="center"><td>喃喃</td><td>女</td><td>89</td></tr><tr align="center"><td>小明</td><td>男</td><td>會計</td><td>68</td></tr><tr align="center"><td>小明</td><td>男</td><td>建筑</td><td>建筑設計</td><td>68</td></tr> </table>--> <!--table布局的練習--><!--內聯框架--> <iframe width="100%" height="200px" src="http://baidu.com" name="topiframe"></iframe> <iframe src="others/menu.html" width="820px" height="400px" name="leftiframe" ></iframe> <iframe width="500px" height="400px" src="http://sina.com.cn" name="rightiframe"></iframe> </body> </html>三、form表單
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>form表單</title> </head> <body> <label>姓名：<input type="text"/></label><br/> 密碼：<input type="password"/><br/> 確認密碼：<input type="password"/><br/> 密碼提示問題： <select><option>請選擇一個問題</option><option>爸爸叫什么名字</option><option>媽媽叫什么名字</option> </select><br/> 密碼顯示答案:<input type="text"/><br/> 性別：<input type="radio"name="sex"/>男 <input type="radio" name="sex"/>女<br/> 年齡：<input type="text"/><br/> 籍貫： <select><option>請選擇</option><option>海南</option><option>陜西</option> </select> 省/直轄市 <select><option>海口</option><option>三亞</option><option>西安</option> </select> 市<br/> 愛好：<input type="checkbox" />上網<input type="checkbox" />體育<input type="checkbox" />學習<br/> 個人介紹：<br/> <textarea rows="5px" cols="10px"></textarea><br/> 上傳頭像：<input type="text"/><input type="file"/><br/> <input type="submit"/><input type="reset"/> <!--元素集--> <fieldset><legend>健康信息</legend>身高：<input type="text"/><br/>體重：<input type="text"/> </fieldset> </body> </html>四、HTML5新增的類型與屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>html5新增input類型與屬性</title> </head> <body> <!-- 電子郵件： 搜索：URL類型： 顏色： 數字： 范圍： 日期： 周 ：月：--> <form action="01html常用標簽.html" method="post" >電子郵件：<input type="email" multiple/><br/>搜索：<input type="search"/><br/>URL類型：<input type="url" multiple/><br>顏色：<input type="color"/><br/>數字：<input type="number"min="0" max="100" step="5" ><br/>范圍：<input type="range" min="0" max="100" value="10" step="5"/><br/>日期：<input type="data"/><br/>周：<input type="week"/><br/>月：<input type="month"/><br/>用戶名：<input type="text" placeholder="請輸入用戶名" autofocus required name="name"/><br/>密碼：<input type="password" maxlength="12" minlength="6"/><br/><input type="submit"/><input type="reset"/> </form> </body> </html>五、HTML5新增的結構標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>html5新增的結構標簽</title> </head> <body> <header>頭部</header> <nav>導航</nav> <article>內容<section>標題</section> </article> <aside>側邊欄</aside> <footer>頁眉</footer> <figure><img src="images/guangtouqiang.jpg" alt="圖片加載失敗" title="光頭強圖片" width="200px" ><figcaption>光頭強系列</figcaption> </figure><br/> <details><sammary>新聞</sammary><p>新聞 ，是指報紙、電臺、電視臺、互聯網等媒體經常使用的記錄與傳播信息的 一種文體。是記錄社會、傳播信息、反映時代的一種文體。新聞概念有廣義與狹義之分。廣義上:除了發表于報刊、廣播、互聯網、電視上的評論與專文外的常用文本都屬于新聞，包括消息、通訊、特寫、速寫(有的將速寫納入特寫之列)等等; 狹義上:消息是用概括的敘述方式，以較簡明扼要的文字，迅速及時地報道附近新近發生的、有價值的事實，使一定人群了解。新聞一般包括標題、導語、主體、背景和結語五部分。前三者是主要部分，后二者是輔助部分。寫法以敘述為主兼或有議論、描寫、評論等。新聞是包含海量資訊的新聞服務平臺,真實反映每時每刻的重要事件。您可以搜索新聞事件、熱點話題、人物動態、產品資訊等,快速了解它們的最新進展。</p> </details> 你是<mark>大長腿</mark>嗎？ <hr/> <meter value="60" min="0" max="100" ></meter><br/> /*手機電量*/ <progress value="60" max="100" ></progress> </body> </html>六、datalist、video、audio、embed、canvas標簽（有一些還不太理解）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>標簽</title> </head> <body> <!--選項列表--> <input type="text" list="start"/> <datalist id="start"> <option>leikuan</option> <option>雷寬</option> <option>蔡依林</option> <option>易烊千璽</option> <option>李現</option> </datalist> <!--視頻--> <video src="" ></video> <!--音頻 1.audio支持的三種格式 ogg mp3 wav 注意：loop 屬性值 正數（代表播放次數） 負數或者不加任何屬性值（代表無限播放）--> <audio src="images/1.mp3" controls autoplay muted loop></audio> 如果瀏覽器不支持某種格式的播放，可以將一種音頻轉換成3種中的格式 <audio controls ><source src="images/1.mp3"/><source src="images/1.ogg"/>您的瀏覽器不支持音頻播放 </audio> <!--插件、嵌入的東西--> <embed src="1.mp4"> <!--畫布canvas--> <!--（不太懂） 1.canvas 必須配合js在網頁上繪制圖像 2.畫布是一個矩形區域，可以控制每一個像素 3.canvas擁有多種繪制路徑、矩形、圓形... 顏色的表示方式： 1.直接用顏色名稱："red" "green" 2.十六進制顏色值："#eeeeff" 3.rge(1-255,1-255,1-255) 屬性： fillStyle 填充繪畫的顏色、漸變或模式 strokeStyle 用于筆觸的顏色、漸變或模式 shadowColor 用于陰影的顏色 shadowOffsetX 水平距離偏移量 shadowOffsetY 垂直距離偏移量 shadowBlur createLinearGradient 矩形 createRadialGradient 圓形 方法： getcontext（）;返回一個對象，這個方法封裝了很多的繪圖方法和屬性，但是現在只提供了"2d"的繪圖環境 rect：創建矩形 fillrect：繪制填充矩形 --> <canvas id="mycanvas" width="400px" height="400px">您的瀏覽器版本太低 </canvas> <script type="text/javascript">//代碼塊var canvas=document.getElementById("mycanvas");var obj=canvas.getContext("2d");//obj.rect(0,0,100,100);//陰影：obj.shadowColor="rgb(11,25,9)";obj.shadowOffsetX=3;obj.shadowOffsetY=3;obj.shadowBlur=3;//漸變：//var colorobj=obj.createLinearGradient(0,0,100,0);//圓的漸變var colorobj=obj.createRadialGradient(50,50,10,50,50,50);colorobj.addColorStop(0,"red");colorobj.addColorStop(0.5,"blue");colorobj.addColorStop(1,"green");//obj.rect(0,0,100,100)obj.fillStyle=colorobj;//obj.fillStyle="red";obj.strokeStyle="green";obj.fillRect(0,0,100,100);obj.strokeRect(100,100,100,100); </script> </body> </html>七、引入CSS方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>引入CSS層疊樣式表方式</title> </head> <!-- <style> 內部樣式表p{color: black;font-size: 50px;}</style>--> <style> /*外部導入樣式*/@import url(css.css); </style> <body> <!-- 1.內聯方式（行內樣式） 例如：<p style="color: red;font-size: 50px">我要努力學好前端</p> 2.內部樣式表（屬性多時使用） 例如：<style>p{color: black;font-size: 50px;}</style> 3.外部樣式表（當css多時使用） 例子：<link rel="stylesheet" href="css.css"/> 要先在建立一個后綴為css的文件描述屬性 stylesheet:樣式調用 4.導入式樣式表 <style>@import url(css.css);;</style> --> <!--<p style="color: red;font-size: 50px">我要努力學好前端</p>-->/*內聯方式*/ <p>我要努力學好前端</p> <!--<link rel="stylesheet" href="css.css"/>--> </body> </html>八、CSS基礎選擇器和合并選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS基礎選擇器和合并選擇器</title><style>/*元素選擇器 通用選擇器 類選擇器 ID選擇器 合并選擇器*//* p{color: red;}{color: red;}*/.lei{color: red;}#jiao{color: red;}p,div{color: red;}</style> </head> <body> <p class="lei">leikuan</p> <div id="jiao">zhoumingjiao</div> </body> </html>九、背景
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>背景</title><style>div{width: 1200px;height: 1200px;background-color: green; /*背景顏色*//*background-image: url("images/lixian.jpg"); !*背景圖片*!*//*background-repeat: no-repeat; !*圖片是否重復*!*//*background-repeat: repeat-x;*//*background-size: cover;*/ /*背景圖片大小*//*background-size: contain;*//*background-position: center; !*背景圖片位置*!*//*background-attachment: scroll; !*背景附和 *!*//*背景簡寫 所有屬性寫在一起*/background: url("images/lixian.jpg") no-repeat 50px 60px;}</style> </head> <body> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> <div>leikuan</div> </body> </html>十、字體
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>字體</title><style>pre{color: red; /*顏色*//*font-size: 20px; /*字體大小*//*font-style: italic; /*字體樣式 正常、斜體*//* font-family: 微軟雅黑; /*文本使用某個字體*//*font-weight: bolder; /*文字的粗細*//*font簡寫1.必須按照官方的給定的順序給值（style weight size family）2.font-size和font-family不可缺少*/font: italic bold 20px "黑體";}</style> </head> <body> <h1>前端簡介</h1> <pre>前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。 </pre> </body> </html>十一、顏色透明度和內容溢出
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>顏色透明度和內容溢出</title><style>div{width: 800px;height: 800px;background-color: black;color: red;opacity: 1; /*字的間距*//*!*overflow: hidden;*! 溢出元素隱藏*//*!*overflow: auto;*! 自動*/overflow: scroll; /*顯示滾動條*/white-space: nowrap; /*內容同一行顯示 不換行*//*text-overflow:ellipsis;*/ /*文字溢出時，省略號表示*/}</style> </head> <body> <div>前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。<br/>前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 。<br/>它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 。它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互 。它從網頁制作演變而來，名稱上有很明顯的時代特征。在互聯網的演化進程中，網頁制作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。 </div> </body> </html>十二、文本
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文本</title><style>h3{text-align: center; /*內容方式*//*text-align: right;*//*text-align: left;*/}p{text-decoration: none; /*有無裝飾文字*//*text-decoration: underline;*//*text-decoration: overline;*//*text-decoration: line-through;*/text-indent: 2em;/*文本的縮進*/}span{/*文本的大小寫*/text-transform: capitalize; /*第一個單詞的首字母大寫*//*text-transform: lowercase;*/ /*全部字母小寫*//*text-transform: uppercase; /*全部字母大寫*/}/*p{*//* background-color: red;*//* width: 100px;*/word-wrap: break-word;!/*可設置過長的文本會自動換行*//*}*/div{height: 200px;/*設置對象的行高*/background-color: red;font-size: 20px;line-height: 200px;}div{background: orange;height: 100px;}p{background: orange;}img{width: 100px; /*內容垂直對齊方式*/vertical-align: middle;}</style> </head> <body> <!--<p>Introductiontothefrontend</p>--> <!--<div>前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。</div>--> <p>this is paragraph!!!<img src="images/lixian.jpg"/></p> </body> </html>十三、列表屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表屬性</title><style>.text{/*list-style-image: url("images/2.jpg");*//*list-style-type: circle;*//*list-style: url("images/2.jpg") inside disc;*/list-style: url("images/21.jpg") inside disc; /*當找不到圖片時，用后面的圖形如disc來代替*/}li{list-style-position: inside;width: 100px;border: 1px solid red;}</style> </head> <body> <h3>大家喜歡吃什么水果？</h3> <ul class="text"><li>蘋果</li><li>香蕉</li><li>西瓜</li> </body> </html>十四、 CSS3新增選擇器（關系）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>關系選擇器</title><style>.parent span{ /*后代選擇器*/color: red;}.parent>span{ /*子代選擇器*/color: red;}p+span{ /*相鄰兄弟xuanzq*/color: green;}p~span{ /*通用兄弟選擇器*/color: orange;}</style> </head> <body> <!--<div class="parent"><span>子元素span</span><div>子元素div<span>孫子代元素span</span></div> </div> <span>外部元素span</span>--> <span>這是p上的span元素</span> <p>這是一個p元素</p> <span>這是第一個緊鄰的span元素</span> <span>這是第二個span元素</span> <span>這是第三個span元素</span> </body> </html>十五、CSS屬性選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css屬性選擇器</title><style>a[href]{color: red; /* 具有href的屬性的a元素*/}p[class="p1"]{color: blue; /*具有屬性和屬性值的p標簽*/}p[class~="p1"]{color: orange;/*具有屬性和包含屬性值的p標簽*/}p[class^="p"]{color: aqua; /*有屬性且開頭是p的標簽*/}p[class$="4"]{color: blue; /*有屬性且結尾是p的標簽*/}a[href*="baidu"]{color: black; /*有屬性且包含屬性值是p的標簽*/}div[class|="set"]{color: blueviolet; /*有屬性且有鏈接符以開頭屬性值開頭的標簽*/}</style> </head> <body> </body> </html>總結
- 上一篇： Sketch教程|Sketch图层如何使
- 下一篇： AutoML 前瞻与实践 ---- Au