HTML基礎知識回顧整理

時間 2019-12-19

標籤 html 基礎知識回顧整理欄目 HTML 简体版

原文原文鏈接

20151008~20151101所學HTML內容回顧整理css

HTML (標籤、div+Css)+ JS（js語法，dom，jquery）html

HTML: Hyper Text Mankup Language 超文本標記語言jquery

學html,實際就是在學標籤都有哪些，怎麼用。如何經過標籤來控制文本樣式。web

文件後綴：html， htmdom

1、標籤：基本標籤、文字標籤、內容標籤、佈局標籤工具

2、用ps把一張圖作成HTML頁面oop

3、div+Css佈局

4、雜字體

基本標籤：
<html>
<head>
    <title>標題內容</title>
head 中標題欄文字，起控制做用，設置編碼方式，背景音樂或關鍵詞設置、描述等信息
</head>

<body>
<font color="#990000" size="大小">內容</font>     三原色：紅 綠 藍
 標籤  屬性                                           #  00 00 00 --黑
                                                        FF FF FF --白
                                                      --00~FF 從沒有到滿了
 網頁的內容
</body>
</html>

  任何標籤都是包含關係，不會交叉

標籤分爲：基本標籤<html><head><title></title></head><body></body></html>
          body屬性：text文本的顏色
          bgcolor背景顏色
          bggroud=圖片路徑 背景圖片  ../ 往上翻一個文件夾
          topmargin="100"上邊距 網頁內容開始的地方距離網頁上邊線100像素
          bottommargin="100"下邊距
          leftmargin="100"左邊距
          rightmargin="100"右邊距
          head中有一個標籤bgsound 背景音樂
          <bgsound src="Images/456.mp3" loop="-1" />

文字標籤<font></font>
     屬性：color顏色 size大小 face字體 標籤裏的屬性用空格隔開
          例子：<font color="顏色" size="大小" face="字體名稱">漢企</font>                        
               <b>加粗</b>
               <i>傾斜</i>
          　　　<u>下劃線</u>
          　　  <center>居中</center>
          　　  <br> 換行
               <!--註釋-->
                  以&符開頭，能夠輸入好多特殊字符
               &lt  小於號<
               &gt  大於號>
               &nbsp 空格
               &copy 版權符，就是一個圈裏一個c

內容標籤 
           標題標籤：            
          <h1>標題一</h1>
                <h2>標題二</h2>
                    隨着數字變大，字體字號變小
          <h6>標題六</h6>
         段落標籤：
         asfyehdjkkdjriw
                 <p>這是一段特殊的文字</p>    上面空一行空白行，下面空一行
                          被P標籤包含起來的會是單獨一段
         dwfjiowfirueib
         djiorjieisfdkhi

         <div></div>  層標籤 默認佔一行，換行
         <span></span> 層標籤 有多大，佔多大
         列表：
        <ol>有序列表
              <li>1</li>   ===>1. 1
              <li>2</li>       2. 2
              <li>3</li>       3. 3
              <li>9</li>       4. 9
        </ol>
        <ul>無序列表
              <li>1</li>   ===>● 1
              <li>2</li>       ● 2
              <li>3</li>       ● 3
              <li>9</li>       ● 9
        </ul>
             ol、ul 屬性：type 控制前面的序列方式
  

超連接：<a href="網址">內容</a>
圖片：<img src="路徑" width="寬" height="高"/>
背景音樂：<bgsound src="Images/456.mp3" loop="-1" />  最好不要用中文音樂名，改爲數字等

佈局標籤
表格
<table> 定義表格
<caption>    定義表格標題。
<th>    定義表格的表頭。
<tr>    定義表格的行。
<td>    定義表格單元。
<thead>    定義表格的頁眉。
<tbody>    定義表格的主體。
<tfoot>    定義表格的頁腳。
<col>    定義用於表格列的屬性。
<colgroup>    定義表格列的組。

<table> 　　（　　width　寬度　　border　　邊框　　cellpadding　　內容與單元格的邊距　　cellspacing　　單元格之間的邊距
　　　　　　　　align　　對齊方式　　bgcolor　　背景色　　background　　背景圖片　　）
　　<tr>　　　　--第一行--　　（　　align 一行的內容水平對齊　　valign　　一行的內容垂直對齊　　height　　行高　　）
　　　　<td>第一列</td>
　　　　<td>第二列</td>　　　　
　　</tr>

　　<tr>　　　　--第二行--
　　　　<td>第一列</td>
　　　　<td>第二列</td>　　　　
　　</tr>
</table>

合併單元格
colspan="n"　　合併同一行單元格
rowspan="n"　　合併同一列單元格

用ps把一張圖作成HTML頁面優化

用ps把一張圖作成HTML頁面
        table 表格
        div+css
切圖、切片工具、切圖、文件、存儲爲web所用格式、修改圖片大小、GIF、存儲、格式：

HTML和圖像、選擇存儲位置

1.在ps中打開一個網頁模板，利用切片工具進行剪裁

2存儲方式是：存儲爲web所用格式

3設置存儲像素1366.GIF格式

4保存到文件夾中以html+圖像 的格式

5打開html，打開方式爲DW方式打開

6根據網頁在進行對其修改

 
設置超連接：加上超連接網址，而後設置boder="0"
<td rowspan="2">
　　<a href="http://baidu.com">
    　<img src="images/16sucai_201510091610-(1)_03.gif" width="114" height="33" alt="" boder="0">
　　</a>
</td>

css+div

超連接：
<a hert = " " target(超連接的打開方式) = "self（自身）"或"new（新開窗體）">
</a>
錨點：超連接的特殊應用
<a href="#1"...> </a>
<a name ="1"> </a>

表格：容器,能夠把這一個頁面劃分區域表格不能隨便移動
div： 層標籤 （默認佔一行）
經過座標設定位置，能夠隨意挪動 table 的單元格能夠任意拖拽更利於網站優化
<div> </div>

css:style：樣式表 控制標籤的樣式

body以及body裏面全部的標籤均可以加style

style：樣式表

內聯樣式表：style 樣式表寫在body屬性位置的時候
內嵌樣式表：寫在head範圍以內的,來控制當前頁面着寫標籤的樣式

<head>
<style>
body
{ /* 設置body標籤的 顏色 */
    background-color:#309
}
</style>
</head>
外部樣式表：經過 link 標籤連接 css 文件起一個宏觀調控的做用，後期維護方便

<head>

選擇器：如何用外部樣式表控制HTML的標籤

<link type="text/css" 
href="css/style.css" rel="stylesheet" />
</head>

id選擇器：標籤的身份編號，一個網頁裏面 body範圍以內全部的標籤均可以寫id 並且 id不能重複惟一識別

先在css文件裏設置：
#p1
{
color:#0F9;}
而後：做用在原文件
</head>

<body>
<p id="p1">rer</p>
<p id="p2">sdf</p>
<p id="p3">sdf</p>
</body>
</html>

標籤選擇器：
body{ /* 設置body標籤的 顏色 */
　　　　background-color:#309
　　}

優先遵循id選擇器
在css註釋：/* */
在HTML註釋<!-- -->
class選擇器：
先在css文件裏面創建

.yangshi1
{
　　color:#C0F;
}

而後在文件裏面link css文件 而後經過 
class=樣式的名字
<body>
<p id="p1">rer</p>
<p id="p2" class="yangshi1">sdf</p>
<p id="p3">sdf</p>
</body>

畫一個div，讓這個div佔滿整個屏幕：
#apDiv1 {
    position: absolute;
    width: 100%;▲
    height: 100%;▲
    background-color:#FF0;
    z-index: 1;
}

position是位置：默認是absolut，相對於body而言固定
        fixed 鎖定位置，如網頁上方的導航欄

當兩個div疊加到一塊兒時，z-index: 從1開始，後面數字越大，層數越靠上，覆蓋
當兩個div中z-index:都爲1 時，body中<div id="apDiv1"></div><div id="apDiv2"></div> 後寫的那個在上面

作一個導航菜單，div的居中

position: absolute;
margin:auto;
div中，margin設置爲auto是，是自適應，上下左右間距自由，取決於position：
absolute時，是在起點位置，
relative時，是居中

overflow:scroll;--若是超出的話給div加滾軸
    hidden --隱藏

<div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">

雜：鼠標放到圖片上彈出層文字效果

鼠標放到圖片上彈出層文字效果

<style> 
img{border:0}/* css 註釋說明：設置圖片邊框爲0 */ 

.xiaotu{ position:relative;width:365px; height:250px;margin:0 auto} 
.xiaotu a,.xiaotu span{display:none; text-decoration:none}
.xiaotu:hover{cursor:pointer} 
.xiaotu:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
 z-index:100; left:0; display:block;}
.xiaotu:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px; 
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 設置顯示文字定位位置，背景半透明 */ 
 
</style> 

<div class="divcss5" style="background:url(http://www.bcty365.com/uploadfile/2014/0621/20140621103346573/img/1a.jpg)">
    <span>文字內容</span>
    <a href="#" class="now">?</a>
</div>

顯示、隱藏

<div id="xuanxiang" class="yincang" onMouseOver="this.className='xianshi'" onMouseOut="this.className='yincang'">
<h1>主頁</h1>
<div id="neirong">內容1<br>內容2<br></div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。