丑憨批的html笔记
生活随笔
收集整理的這篇文章主要介紹了
丑憨批的html笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html語法基礎
h1#idid${itme$}*3 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="貓"><meta name="description" content="炫耀貓"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><!-- <div><p>asdasd</p><p>asdasdad </p></div><p> <strong>bao</strong> 我的貓咪脾氣暴</p><em>12</em><p>12</p><div>12</div><div><img alt="神秘博士第十二季：新年特輯" src="/zb_users/upload/2019/01/20190102215050_22304.jpg"></div><img src="/mmsource/images/2013/12/26/3e522bf5401d491cb66734236ebf2533.jpg"><p>as<br>djk</p><p class="maomi">mybadcat</p><p id="maomi2">my</p><a href="https://blog.csdn.net/datou0529/article/details/80822604">1212</a> <br><a href="http://www.qq.com">qqs</a> --><!-- biaoti --><h1>yi</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><!-- duan luo --><p>duanluo</p><!-- liebiao --><ul><li>li</li><li>li</li><li>li</li></ul><!-- you xu lie biao --><ol><!-- li{asdad $}*6 --><li>1</li><li>2</li><li>3</li><li>4</li><li>asd 1</li><li>asd 2</li><li>asd 3</li><li>asd 4</li><li>asd 5</li><li>asd 6</li></ol><a href="https://www.baidu.com/s?tn=80035161_2_dg&wd=html+ui%E5%BA%93" target="_blank">qq</a><img src="3942de5374363d1.j1pg" alt="加載失敗" title="121212"><strong>strong</strong><br><em>em</em><!-- 表格 --><table border="1"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="2"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="3"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="4"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="5"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="6"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><input type="text" name="" id=""><button>按鈕</button><button>按鈕</button><button>按鈕</button><span>span</span><span>span2</span><br><span><div>12</div></span><span><div>34</div></span></body></html>css語法基礎
html
<!DOCTYPE html> <html lang="en"><head><!-- 優先級:就近原則 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS基礎</title><!-- 在head里寫 內部樣式 --><style>p {font-weight: bold;font-style: italic;color: blue;font-size: 56px;}</style><!-- 引入外部樣式 --><link rel="stylesheet" href="csstest.css"></head><body><h1>h1</h1><p><strong>ppp</strong></p><p><b><font color="red" size="56">12</font></b></p><!-- css:層疊樣式表 --><!-- 內聯樣式 --><p style="color: brown;">duanluo2</p><!-- id選擇器 --><p id="qwe">asdad</p><ul id="ul1"><li id="qw1">item 1</li><li id="qw2" class="leitest">item 2</li><li id="qw3" class="leitest">item 3</li></ul><div id="div1">div1123</div><div id="div2">div2</div><p id="ppp"> 段落</p><!-- 字體 --><div id="div12">wenbenasdasd</div><!-- 邊框 --><div id="qwe23">wqwqw</div><ul id="ul12"><li id="li1">item1</li><li id="li2">item2</li><li id="li3">item3</li></ul></body></html>css
p{font-style: italic; } #qwe{font-size: large; } .leitest{background-color: aqua; } #div1{width: 220px;height: 100px;background-color: aquamarine;text-align: center;line-height: 50px; }#div2{width: 2200px;height: 100px;background-image: url(3942de5374363d1.jpg);background-repeat: no-repeat;background-position-x: center;background-position-y:center;} #ppp{width: 200px;height: 100px;background: #803232;text-indent: 20px; } #div12 {font-size: 48px;font-style: italic;font-weight: bold; } #qwe23 {font-size: 48px;font-style: italic;font-weight: bold;background-color: #fff;border:1px solid cadetblue; } #ul12{list-style: lower-alpha; }css盒模型
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="cssboxer.css"><style>#div1{background-color: aquamarine;}/* #divasd{} */</style> </head> <body><div id="div1">545454</div><div id="div2">2 3 3 </div><div id="div3">656as234d5</div> </body> </html>css
#div1{background: crimson;border: 5px solid black;padding: 10px; } #div2{background: blue;margin: 20px; } #div3{width: 200px;height: 200px;background: brown;border:blue 5px solid;padding: 5px; }css定位
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css定位</title><style>/* div,h1,p{width: 200px;height: 100px;background: aquamarine;display: inline-block;/*inline-block可以*//*}*//* 塊級元素垂直分布，可以設置寬高 行級元素不可以設計寬高 *//* a,span{width: 200px;height: 100px;/* display: block; *//* background: blue;} */#a {background: blue;}#b {background: chartreuse;/* 相對定位 相對于初始位置 初始空間不釋放position: relative;left: 50px;top: 50px; *//* 絕對定位 相對于最近的已定位的父元素 偏移 ，body本身視為已定位*/position: absolute;left: 50px;top: 50px;/* 固定定位（fixed） */ /* 固定定位與絕對定位類似，但它是相對于瀏覽器窗口定位，并且不會隨著滾動條進行滾動。 */ /* 固定定位的最常見的一種用途是在頁面中創建一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。 */}#c {background: crimson;}div{width: 200px;height: 200px;display: inline-block;}</style> </head><body><!-- 塊元素 --><!-- <div id="div1">div</div><h1>h1</h1><p>p</p> --><!-- 行元素 --><!-- <a href="">lianjie</a><span>span</span> --><div id="a">a</div><div id="b">b</div><div id="c">c</div><div></div> </body></html>css浮動
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css fudong</title><style>/* div{width: 600px;height: 200px;/* display: inline-block; *//* display這樣會出現空 *//* float: left; *//* } *//* #a{background: crimson;/* float: right; *//* } *//* #b{background: darkblue;}#c{background: darkgreen;} */ #menu{list-style: none;}#menu li{float: left;margin-right: 20px;}</style> </head> <body><!-- <div id="a">a</div> --><!-- <div id="b">b</div> --><!-- <div id="c">c</div> --><ul id="menu"><li id="li1"><a href="" id="12">item1</a></li><li id="li2">item2</li><li id="li3">item3</li><li id="li4">item4</li></ul></body> </html>總結
以上是生活随笔為你收集整理的丑憨批的html笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 丑憨批的爬虫笔记3（实例）
- 下一篇： 洛谷 题解 P1604 【B进制星球】