首頁 > 博客列表 > 第二課:html基礎(chǔ)認(rèn)識

博主信息

博文 12

粉絲 0

評論 0

訪問量 10396

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

第一部分:頁面元素

頁面為一個二維空間,所有元素的排列只有垂直和水平兩種方式,各元素的方式如下:

塊元素
垂直排列,主要用來當(dāng)容器,最常見的元素就是DIV
```
<div></div>
```
行內(nèi)元素
水平排列,主要為內(nèi)容項,最常見的元素就是<span></span>
行內(nèi)塊元素
主要是外部資源,如<img> <input></input><select></select>,有自己的寬高,同時也受當(dāng)前容器限制;同時也可以當(dāng)容器.通常在使用中,會設(shè)置寬高為容器的100%
```
img{width:100%;heigth:100%}
```
當(dāng)行內(nèi)塊元素的寬高>其容器寬高時,兩個元素顯現(xiàn)出的效果是各顯示各的
可以通過display屬性來實現(xiàn)各類元素的相互轉(zhuǎn)換
flex布局,快被grid替換

第二部分:html結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    //這行代碼很重點,實現(xiàn)手機端頁面
    <title>Document</title>
</head>
<body>
</body>
</html>

一個html文件包括文檔類型和根元素兩項,其中根元素里包括了頭元素<head>和根元素<body>兩個元素

<head>里的<meta>單標(biāo)簽
用戶看到的是<body>里的元素

頁面元素的標(biāo)簽和屬性

<div id="X" class="dad "></div>
<img src="dddd">
<link href="">
<script src=""></script>
<button data-username="dksd" data-index="1">用戶資料</button>

外部標(biāo)簽一般為單標(biāo)簽
屬性通常與描述的元素相對應(yīng)
三大通用屬性,包括id,class,style
自定義屬性,data-為前綴,dataset來對象來讀取

第三部分:頁面布局元素

<body>
 <div id="header"> 頁眉 </div>
 <div id="main"> 主體 </div>
 <div id="footer"> 主體 </div>
</body>

優(yōu)化:把id換成class

<body>
 <div clsss="header"> 頁眉 </div>
 <div clsss="main"> 主體 </div>
 <div clsss="footer"> 主體 </div>
</body>

語義化

<body>
 <header> 頁眉 </header> 
 <main> 主體 </main>
 <footer> 主體 </footer>
</body>

有限回退

<body>
<div class="article-header">文章頭部</div>
<div class="article-main">文章主體</div>
</body>

最終推薦

<body>
<div class="article header">文章頭部</div>
<div class="article main">文章主體</div>
</body>

其它一些元素:<article></article><aside></aside><nav></nav>

兩大重點元素

1.表格元素

<table>是一個table類型,是一個復(fù)合標(biāo)簽

<body>
<table border="5">
<caption>表格標(biāo)題</caption>
 <thead>
   <tr>
      //th有居中加粗的作用
      <th>dfadsaf</th>
      <th>dfadsaf</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>dfadsaf</td>
      <td>dfadsaf</td>
   </tr>
 </tbody>
  <tfoot>
   <tr>
      <td colspan="2">統(tǒng)計</td>
   </tr>
 </tfoot>
</table>
</body>

列的合并為rowspan,行合并為colspan,關(guān)鍵點要看到合并點在哪,同時注意下合并后的對向下或向右的單元格影響,實際操作中把這些受影響的單元格注釋掉
合并屬性只能寫在td中

2.表單元素

表單是用戶和服務(wù)器交流窗口,也是有網(wǎng)絡(luò)攻擊的入口
表單也是一個復(fù)合元素,主要包括form,fieldset,label,input,select,textarex,button

<form action="">
<fieldset>
 <legend>表單項目名稱</legend>
  <label for="user">用戶名:</label><input id="user" type="text" name="提交到服務(wù)器上變量的名稱" value="變量的默認(rèn)值" />
  <label for="psw">密碼:</label><input id="psw" type="password" name="password" value="變量的默認(rèn)值" />
</fieldset>
<button>提交</button>
</form>

input 為明文傳送
label for和值為input里的id,可以直接將兩者綁定

VScode一些使用快捷鍵

多重操作:
1. Alt +單擊：插入光標(biāo);
2. Ctrl + Shift + L：選擇當(dāng)前選擇的所有出現(xiàn)
常用操作
1. Shift + Alt + F：格式化文檔,主要通過Prettier - Code formatter插件實現(xiàn)
2. Ctrl + /：注釋
3. Alt+ ↑ / ↓ 光標(biāo)放置行內(nèi)容向上/向下滾動
4. Shift+Alt + ↓ / ↑ 光標(biāo)放置行復(fù)制一行新的,同時將光標(biāo)移動到上面/下面的行上

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

第二課:html基礎(chǔ)認(rèn)識

2023-03-10 22:29:56

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱