前端三劍客之HTML

牛村小崽發表於2019-07-21

@()

what is html

  • (hypertext marked language)超文字標記語言,負責頁面文字、圖片內容的編輯排布;
  • 特點:
    1. 使用的是一對一對的標籤組成
      雙標籤 可巢狀其他的標籤;單標籤不可巢狀其他標籤;
    2. 標籤之間可以相互巢狀,但不可以交叉巢狀


    3. 若是有多個相同的標籤,可使用id或name屬性去區分

       <tag1 id="20130705" name="a"></tag1>
       <tag1 id="20140603" name="b"></tag1>

      重點:HTML的核心在與標籤的使用、標籤屬性的使用

html基本格式

  • 網頁的每個介面都是一個獨立的HTML檔案:

     <!---基本格式----->
     <html>
      <!---頁面 start----->
         <head>
             <!---頭部 start----->
             <title>這裡寫網頁頁面的標頭</title> 
             <!---頭部 end----->
         </head>
         <body>
             書寫內容的地方
         </body> <!---主體 start----->
         <!---頁面 end----->
     </html> 

html常用標籤及其屬性

文字修飾

<font> 屬性
size 字型大小 最大值是7
color 字型顏色 用單詞表示 "red" "green" "blue" RGB表示rgb(0,0,255) 十六進位制表示#0000ff
face 字型型別 黑體、楷體、宋體、華文彩雲等 必須瀏覽器支援
字元實體
含義:就是講一些特殊含義符號例如空格(&nbsp)、引號(")等顯示在html中, 在編寫時可以鍵入實體名或者實體編號來表示,但是在有些瀏覽器不支援某個字元實體的實體名但是編號時所有都支援的,所以建議都是用實體編號;
字元實體查閱
<br> 換行標籤,達到換行的目的,一個<br>但標籤就是往下一行;

段落修飾

<p> 段落標籤 使元素成塊 可以內嵌其他標籤來修飾段落內文字的顯示效果;
align 對其屬性 left 左對齊 center居中對其 right右對齊

標題修飾

<h1> 標題標籤 使元素成塊 可以使h1 - h6 共六個標題 標題依次變小 h1標籤建議只在頁面中出現一次,多次出現不利於搜尋引擎的識別;
align 對其屬性
它和段落一樣沒有color樣式,如需修改文字樣式可以巢狀其他標籤實現
<hr> 水平分隔線
有color顏色
size高度
width寬度
align對其

序列修飾

特點:塊元素,獨立成行有行間距會自動縮排;
無序序列

<ol>
      <li></li>
       <li></li>
</ol>
        

有序序列

<ul>
    <li></li>
    <li></li>
</ul>
    

在序列裡 <ol>標籤表示無序序列<ul>標籤表示有序序列<li>則表示序列元素,有幾個<li>標籤就表示有幾個標籤元素,而<ol>和<ul>則用來區分這些序列元素的型別,序列型別可以相互巢狀但是會再次縮排;
<ol>屬性:type 1、a 、A 、i、 I
<ul>屬性:type
start 起始數
<li>屬性:type disc(實心圓) 、circle(空心圓) 、square(實心方塊)

圖片

<img>

alt 圖片丟失顯示內容
src 圖片源
width 圖片寬度
height 圖片高度
border 圖片邊框

音訊

<bgsound>        

注:只對IE有效果
src=""

<embed>

src=""
width
hight

視訊

<embed>

支援mp3、mp4
src ="" 檔案路徑
width 寬度
height 高度

字型其他樣式

加粗 b 斜體 i 下劃線 u

<b>加粗內容</b>
<i>斜體內容</i>
<u>下劃線內容</u>

超級文字

<a>

屬性:
href 資源的路徑地址
target 是否在新頁中開啟,預設是在當前頁開啟,target="_blank"則在新頁中開啟,target="_self" 或者"_top"當前頁開啟;
執行效果:
1.跳轉到本地或者網路的資源地址;
url 網路資源

<a href ="www.baidu.com">

path 本地資源

<a href ="luomit.txt">

2.調動本地郵件客戶端進行傳送郵件

<a href="mailto:14125@qq.com">傳送資訊到14125@qq.com郵箱\</a>

3.呼叫JavaScript指令碼檔案

 <a href="javascript:alert("你點我幹哈啊!")">呼叫JavaScript指令碼\<a>

4.設定錨點(書籤) 設定書籤跳轉的功能

表格

<table>

width 表格寬
height 表格高
cellspcing 單元格間距
cellpading 內容與單元格邊框的距離
align 對齊 left center right
brckground 背景圖片
bgcolor 背景顏色

<tr>行</tr>
<td>列</td> 

align 對齊(水平) left center right
valign 對齊(垂直) left center right middel top bottom
brckground 背景圖片
bgcolor 背景顏色

<th></th>

th = td +居中+加粗
單元格的合併
行合併 rowspan <td rowspan="2">10</td> 這就把當前單元格和下一列的並列一個單元格合併
列合併 colsoan

<caption>表格的標頭</caption>  

寫在表格開始處

相關文章