前端第一節課

Document --> 第一節課 <h1>標題</h1> <!--ctrl+/加注釋或解注釋--> <h2>標題2</h2> <h2>標題3</h2><!--蓋房子中的小部件（床）--> <p>段落1</p> <p>段落2</p><!--在span內的字符，可以只給span內的文本加特性，其他的不用管，磚--> <!--id是唯一的，不能重名，class就是類，可以重復使用--> <span id="rlr" class="spans" style="color: crimson;">標題1</span> <span class="spans" style="color: yellow;">標題2</span> <span onclick=alert(123) style="color: sienna;">標題3</span><!--div是一個塊級元素，特征是獨占一行，對寬度高度支持，蓋房子的磚--> <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>標題1</dt><dd>摘要1啊實打實的</dd><dt>標題1</dt><dd>摘要1啊實打實的</dd><dt>標題1</dt><dd>摘要1啊實打實的</dd> </dl><!--image,絕對路徑：C:\Users\R.L.R\Desktop\baota\1583119697(1).png--> <!--相對路徑：..\123768.png--> <!--alt對圖片的文字說明，鼠標放上去就會有提示--> <!--SEO搜索引擎優化--> <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度"> <!--第一個width是屬性，用=賦值；在style內是CSS的方法，要用冒號--> <!--圖片設置寬高時，只用其中一個屬性-->> <img src="C:\Users\R.L.R\Desktop\baota\1583119697(1).png" alt="" width="200" style="height: 200px;"><!--a,跳轉到其他網址--> <!--默認是_self，在本窗口打開鏈接，_blank：在新窗口打開，_top_parent--> <a href="http://www.baidu.com" target="_blank">跳轉百度</a><!--表格--> <!--border內壁寬度，cellpadding是單元格之間的空白,cellspacing是單元格線之間的空白--> <!--使用style屬性書寫的樣式叫做行內樣式： <table border="1" cellpadding="10" cellspacing="0"></table> --> <!--如果有其他table，為了區別可以使用class的方法區別控制，如下所示--> <table class="gs1" border="1" style="border-collapse: collapse;"><!--得現有行，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>請問</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;"><!--得現有行，tr--><tr><!--再有列，td--><!-- <td style="padding: 10px;">ID</td> --><!--th默認加粗，居中，標題表格-->><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">總數量：4</td></tr> </table><!--快捷方式:h1+回車--> <h1>妙啊</h1> <div>舒服</div> <!--打三個span：span{標題}*3--> <span>123</span> <span>123</span> <span>123</span> <!-- span#gs.spans{標題$}*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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。