前端第一節(jié)課

Document --> 第一節(jié)課 <h1>標(biāo)題</h1> <!--ctrl+/加注釋或解注釋--> <h2>標(biāo)題2</h2> <h2>標(biāo)題3</h2><!--蓋房子中的小部件（床）--> <p>段落1</p> <p>段落2</p><!--在span內(nèi)的字符，可以只給span內(nèi)的文本加特性，其他的不用管，磚--> <!--id是唯一的，不能重名，class就是類，可以重復(fù)使用--> <span id="rlr" class="spans" style="color: crimson;">標(biāo)題1</span> <span class="spans" style="color: yellow;">標(biāo)題2</span> <span onclick=alert(123) style="color: sienna;">標(biāo)題3</span><!--div是一個(gè)塊級(jí)元素，特征是獨(dú)占一行，對(duì)寬度高度支持，蓋房子的磚--> <div style="background: tan;width: 100%;height: 100px;">123</div> <div style="background: royalblue;">234</div> <div style="background: orangered;">345</div><!--無序列表--> <ul><li style="color: red;">列表1<div style="color: purple;">[2020.3.27]</div></li><li style="color: red;">列表2<div style="color: purple;">[2020.3.27]</div></li><li style="color: red;">列表3<div style="color: purple;">[2020.3.27]</div></li> </ul> <ol><li style="color: red;">列表1<div style="color: purple;">[2020.3.27]</div></li><li style="color: red;">列表2<div style="color: purple;">[2020.3.27]</div></li><li style="color: red;">列表3<div style="color: purple;">[2020.3.27]</div></li> </ol><dl><dt>標(biāo)題1</dt><dd>摘要1啊實(shí)打?qū)嵉?lt;/dd><dt>標(biāo)題1</dt><dd>摘要1啊實(shí)打?qū)嵉?lt;/dd><dt>標(biāo)題1</dt><dd>摘要1啊實(shí)打?qū)嵉?lt;/dd> </dl><!--image,絕對(duì)路徑：C:\Users\R.L.R\Desktop\baota\1583119697(1).png--> <!--相對(duì)路徑：..\123768.png--> <!--alt對(duì)圖片的文字說明，鼠標(biāo)放上去就會(huì)有提示--> <!--SEO搜索引擎優(yōu)化--> <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度"> <!--第一個(gè)width是屬性，用=賦值；在style內(nèi)是CSS的方法，要用冒號(hào)--> <!--圖片設(shè)置寬高時(shí)，只用其中一個(gè)屬性-->> <img src="C:\Users\R.L.R\Desktop\baota\1583119697(1).png" alt="" width="200" style="height: 200px;"><!--a,跳轉(zhuǎn)到其他網(wǎng)址--> <!--默認(rèn)是_self，在本窗口打開鏈接，_blank：在新窗口打開，_top_parent--> <a href="http://www.baidu.com" target="_blank">跳轉(zhuǎn)百度</a><!--表格--> <!--border內(nèi)壁寬度，cellpadding是單元格之間的空白,cellspacing是單元格線之間的空白--> <!--使用style屬性書寫的樣式叫做行內(nèi)樣式： <table border="1" cellpadding="10" cellspacing="0"></table> --> <!--如果有其他table，為了區(qū)別可以使用class的方法區(qū)別控制，如下所示--> <table class="gs1" border="1" style="border-collapse: collapse;"><!--得現(xiàn)有行，tr--><tr><!--再有列，td--><!-- <td style="padding: 10px;">ID</td> --><td>ID</td><td>姓名</td><td>性別</td><td>年齡</td><td>地址</td></tr><tr><!--再有列，td--><td>1</td><td>請(qǐng)問</td><td>男</td><td>19</td><td>北京</td></tr><tr><!--再有列，td--><td>2</td><td rowspan="3">遇上</td><td>女</td><td>12</td><td>銀川</td></tr> </table><!--rowspan合并行colspan合并列 -->> <table class="gs2" border="1" style="border-collapse: collapse;"><!--得現(xiàn)有行，tr--><tr><!--再有列，td--><!-- <td style="padding: 10px;">ID</td> --><!--th默認(rèn)加粗，居中，標(biāo)題表格-->><th>ID</th><th>姓名</th><th>性別</th><th>年齡</th><th>地址</th></tr><tr><!--再有列，td--><td style="padding: 10px;">1</td><td>遇上</td><td>男</td><td>19</td><td>北京</td></tr><tr><!--再有列，td--><td>2</td><td>遇上</td><td>女</td><td>12</td><td>銀川</td></tr> </table><table border="1"><tr><th>ID</th><th>姓名</th><th>年齡</th><th>地址</th></tr><tr><td>1</td><td>李剛</td><td>17</td><td>北京</td></tr><tr><td>2</td><td rowspan="3">李明</td><td>32</td><td>寧夏</td></tr><tr><td>3</td><td>123</td><td>倒薩</td></tr><tr><td>4</td><td>43</td><td>西安</td></tr><tr><td colspan="5">總數(shù)量：4</td></tr> </table><!--快捷方式:h1+回車--> <h1>妙啊</h1> <div>舒服</div> <!--打三個(gè)span：span{標(biāo)題}*3--> <span>123</span> <span>123</span> <span>123</span> <!-- span#gs.spans{標(biāo)題$}*3 --> <span id="gs" class="spans">biaoti1</span> <span id="gs" class="spans">biaoti2</span> <span id="gs" class="spans">biaoti3</span> <!-- ol>li.items{列表$}*4>span.span_item{2020-} --> <ol><li class="items">列表1<span class="span_item">2020-</span></li><li class="items">列表2<span class="span_item">2020-</span></li><li class="items">列表3<span class="span_item">2020-</span></li><li class="items">列表4<span class="span_item">2020-</span></li> </ol>

總結(jié)

以上是生活随笔為你收集整理的前端学习笔记（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。