本文主要分享幾個網頁前端的幾個基礎知識點，用於零碎的html知識學習，同時也是在實踐中的一些心得。最後給出了幾個小例子。

1. 網頁程式設計初識

1. 掌握基本的html標籤以及CSS語法
2. 學會檢視網頁的原始碼F12
3. 生活中多總結一些基本的美好的東西

2. 頁面定製CSS程式碼中的選擇器

• #這是id選擇器的標誌
• .這時class選擇器的標誌

3. div標籤的用法

解釋
<div></div>主要是用來設定涵蓋一個區塊為主，所謂的區塊是包含一行以上的資料，所以在<div></div>的開始之前與結束後，瀏覽都會自動換行，所以夾在<div></div>

<div>普通內容</div> 
<div style="font-size:16px">我字型大小為16px</div> 
<div style="color:#F00">我字型顏色為紅色</div> 
<div style="background:#000; color:#FFF">我背景為黑色字型為白色</div> 
<div style="border:1px solid #F00; height:60px">佈局設定邊框和高度</div>
 

4. 樣式與頁面分離基本思想

設計網頁時，我們將頁面和樣式分開寫：
樣式

#my_style_design{
        position: fixed; /*固定定位*/
        right: 0;
        top: 50%; /*貼著右邊，垂直位置50%*/
        height: 100px;
        width: 100px; /*尺寸 100 x 100*/
        transform: translate(0, -50%); /*通過位移，保證浮動視窗的垂直居中*/
        box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5);
        background-color: white; /*加些背景色和陰影，以便區分*/
}
 

網頁

<div id="my_style_design">
    <! 網頁內容 !>
</div>

從上面可以看出，樣式和網頁是通過id="my_style_design"和#my_style_design聯絡在一起的，也就是說網頁上的<div></div>使用的樣式為my_style_design。

5. <script></scrip>標籤初識

使用元素的方式有兩種：

• 直接在頁面中嵌入JavaScript程式碼


• 包含外部JavaScript檔案

方法1

<script type="text/javascript">
    function hello(){
        alert("hello");
    }
</script>

方法2

<script type="text/javascript" src="外部檔案的程式碼.js"></script>

6. html案例

6.1 段落

程式碼

<p style="background:#FFB6C1 ; padding: 10px 10px 10px 10px; border: 1px dashed #F4A423; font-family: 幼圓; front-size: 16px;">
人最寶貴的東西是生命。生命對每個人來講只有一次。一個人的生命應該這樣度過：當他回首往事時，不會因虛度年華而悔恨，也不會因碌碌無為而羞恥。在臨死的時候，他能夠說：我的整個生命和全部精力，都已獻給了世界上最壯麗的事業——為人類的解放事業而鬥爭。<br>
——［俄］奧斯特洛夫斯基
</p>

展示

人最寶貴的東西是生命。生命對每個人來講只有一次。一個人的生命應該這樣度過：當他回首往事時，不會因虛度年華而悔恨，也不會因碌碌無為而羞恥。在臨死的時候，他能夠說：我的整個生命和全部精力，都已獻給了世界上最壯麗的事業——為人類的解放事業而鬥爭。

——［俄］奧斯特洛夫斯基

6.2 圖片

程式碼

<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542947868759&di=de9243408a5d905764ca952a7abea4eb&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1410032331%2C102114236%26fm%3D214%26gp%3D0.jpg" width="542" height="338"/>
</div>

展示

6.3 表格

程式碼

<table class="tg">
  <tr>
    <th class="tg-xldj">內容</th>
    <th class="tg-xldj">內容</th>
  </tr>
  <tr>
    <td class="tg-xldj">&lt;<填寫內容>&gt;</td>
    <td class="tg-xldj">&lt;<填寫內容>&gt;</td>
  </tr>
</table>

展示

6.4 視訊

程式碼

<video src="http://183.60.197.31/16/x/i/n/q/xinqvpqpthnadclnkdraroufbbcacm/hc.yinyuetai.com/C01B0166660C51A35C0E5612EB9BC5E3.mp4" controls width="200" height="200" poster="http://img18.3lian.com/d/file/201709/21/f498e01633b5b704ebfe0385f52bad20.jpg"></video>

展示