html 筆記

時間 2019-11-09

標籤 html 筆記欄目 HTML 简体版

原文原文鏈接

html：超文本標記語言
---------------html基本標籤--------------------
一、圖片(單標籤)
<img src="圖片的路徑" style="width:寬度;height:高度" title="鼠標移到圖片上時出現的說明性文字" alt="圖片顯示不出來的時候出現的文字" border="邊框"/>

爲了方便寫相對路徑，把圖片和網頁必定要放在同一個文件夾裏面。
寬高的取值：百分比、具體像素(px)

二、背景
背景顏色
<body style="
顏色的表示法：
a.英文：red、yellow、green等
b.十六進制：#ff0000紅色

背景圖片
<body style="background-image:url(圖片路徑)">

若是顏色和圖片共存，顏色將再也不顯示；若是圖片是背景透明的，才能把背景顏色透出來

三、佈局
換行:<br />
換段:<p style="text-align:left/center/right"></p>
標題:<h# style="text-align:left/center/right"></h#> #表明1-6
空格: 
版權:©

四、超連接
a.頁面間的連接（至少要有兩個頁面）
<a href="網頁的路徑.html">點擊的內容</a>

b.頁面內的連接（在一個頁面內跳轉）
<a href="#錨記">點擊的內容（點哪裏？）</a>
<a name="錨記">跳轉的內容（跳哪裏？）</a>

c.空連接(有連接的樣子，但沒有任何功能)
<a href="#">點擊的內容</a>

d.連接到郵箱
<a href="mailto:郵箱地址">點擊的內容</a>

五、分隔線
<hr style="width:寬度;text-align:對齊方式"/>

六、列表(有序用ol，無序用ul)
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
</ol>

七、定義描述
<dl>
<dt>描述的詞條</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dd>描述4</dd>
</dl>

八、修改文字的顏色大小
<span style="color:顏色;font-size:?px">要修改的文字</span>
說明：用span的好處在於，不會對頁面結構有影響

九、滾動（補充內容）
<marquee direction="left/right/up/down" onmouseover="this.stop()" onmouseout="this.start()">
    內容
</marquee>

十、註釋


----------------------表格-------------------------
表格的基本結構：
<table border="邊框">
<tr>
     <td>表格內容</td>
</tr>
</table>
在表格裏面，全部的內容必須寫在<td></td>裏面
作表格的時候，記得把border加上，能夠看出不少表格問題css

合併單元格的時候，在td裏面加上以下屬性：olspan:跨列 rowspan:跨行
表格高級標籤：
<table>
<caption>表格標題，會居中</caption>
<thead>
    <tr>
      <th></th> 
    </tr>
</thead>
<tbody>
    <tr>
      <td></td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <td></td>
    </tr>
</tfoot>
</table>
------------------------表單----------------------
表單容器：
<form name="名字" method="提交方式" action="提交到哪兒去">
表單元素放在這裏面
</form>
關於提交方式，有兩個取值get和post，默認狀況下是get
get:速度快   不安全   信息量少
post:速度慢安全     信息量多

關於action屬性，裏面放一個網址
action和submit配合，能夠產生頁面跳轉的效果，同時還能發送數據

表單元素：
一、文本框/密碼框
<input type="text/password" value="文本框或者密碼框裏面的默認值" name="名字"/>
二、提交按鈕/重置按鈕/普通按鈕
<input type="submit/reset/button" value="更改按鈕上的文字"/>
三、單選按鈕/複選框
<input type="radio/checkbox" name="相同的名字" value="區分不一樣的值" checked="checked" />
單選按鈕爲了實現互斥選擇的功能，記得把name設爲同樣的；多選按鈕無所謂

四、下拉列表
<select name="名字">
   <option value="值1">內容1</option>
   <option value="值2" selected="selected">內容2</option>
   <option value="值3">內容3</option>
   <option value="值4">內容4</option>
   <option value="值5">內容5</option>
</select>

五、文本域(多行文本框)
<textarea cols="列(單位字符)" rows="行(單位字符)">
   文本寫在這裏面
</textarea>

六、只讀、禁用
readonly = "readonly"(文本域裏面)
disabled = "disabled"(按鈕裏面)

七、文件瀏覽
<input type="file" />
----------------------框架--------------------
1、框架主頁面的作法
一、把<body></body>去掉，用<frameset></frameset>來代替
二、進行框架劃分，在frameset裏面說明是上下劃分仍是左右劃分，<frameset cols="左右分" rows="上下分"></frameset>
三、說明具體的劃分比例,好比：
<frameset cols="30%,70%">      框架三七分
<frameset cols="20%,60%,20%"> 框架2:6:2
<frameset cols="100,*">        左邊100像素
<frameset cols="*,*,*">        三等分
<frameset cols="2*,*">         框架2:1
四、frameset將頁面分紅幾個小頁面，就在<frameset></frameset>裏面加上幾個<frame />html

2、框架小頁面的作法
當作普通頁面來作，作完後在相應的<frame>裏面引入，以下所示：
<frameset rows="*,*">
<frame src="網頁1.html"/>
<frame src="網頁2.html"/>
</frameset>

爲了實如今框架間進行跳轉，在須要跳轉的frame內設置一個名字，如<frame name="如花"/>;設置完成後回到有超連接的子頁面，在超連接中添加target屬性,如<a href="***.html" target="如花">

3、關於target屬性
<a href="網頁的路徑.html" target="目標">點擊的內容</a>
target的取值一共有如下幾種：
框架名：實如今框架間跳轉
_self:自身跳轉(默認狀況下)
_blank:新打開一個頁面
_top:跳出整個框架

---------區分-----------
表格：colspan rowspan
文本域：rows cols
框架： rows cols安全

-------------------iframe內嵌框架-----------------
通常的網頁，頭部和尾部的效果每每是同樣的，爲了不少寫代碼，會把頭部和尾部的內容單獨提取出來，作成兩個獨立的網頁，而後分別引入到各個網頁中。這種方式叫作頁面複用
好比說：有兩個頁面head.html和foot.html
<body>
   <iframe src="head.html" style="width:寬度;height:高度" frameborder="0"></iframe>
   正文
   <iframe src="foot.html" style="width:寬度;height:高度" frameborder="0"></iframe>
</body>
-----------------------css樣式表------------------------
html ---- 打結構 css ---- 美化修飾js   ---- 動態效果
1、樣式表的引入方式(行內>內嵌>外部)
一、行內樣式表
<標籤 style="屬性1:屬性值1;屬性2:屬性值2;">

二、內嵌樣式表
<head>
<style type="text/css">   --type屬性不要忘記寫
    選擇器 {屬性1:屬性值1;屬性2:屬性值2;}
</style>
</head>

三、外部樣式表
新建一個文本文檔，後綴名改成.css，在裏面寫上全部須要的樣式規則（注意，不要出現任何帶<>的html標籤！！！）。
爲了將外部樣式表和網頁聯繫在一塊兒，在html網頁中加入以下代碼：
<head>
   <link rel="stylesheet" type="text/css" href="樣式表的路徑.css"/>
</head>

2、經常使用的樣式表屬性
一、文本屬性
*color:文本顏色
*font-size:文本大小
font-family:文本字體
font-weight:文本加粗 bold
*text-decoration:none(沒有下劃線)/underline(有下劃線)
text-align:left/right/center 對齊方式
line-height:行高
letter-spacing:字符間距

二、背景屬性
top/center/bottom
b.百分比：0% 0% --左上角   100% 100% --右下角
c.具體像素：注意支持負數

背景的縮寫方式：
background:顏色圖片重複方向

三、方框屬性(border/margin/padding)
border-width:邊框寬度
border-style:邊框樣式(solid實線/dashed虛線)
border-color:邊框顏色
縮寫方式：border:寬度樣式顏色

padding:border內的距離
margin:border外的距離
-------------------
padding:1px            四個方向一塊兒更改
padding:1px 2px        上下各1像素，左右各2像素
padding:1px 2px 3px    上1像素，右2像素，下3像素，左2像素
padding:1px 2px 3px 4px 從上方開始，順時針轉動
方框屬性的具體效果：
a.細框文本框：border-width:1px border-style:solid(寬度必定要是1像素，樣式必定要是實線，顏色隨意)
b.爲按鈕添加背景
爲按鈕添加背景圖片；
查看圖片的大小，將按鈕的width和height改得和圖片大小同樣；
（上面兩步修改完成後，有些電腦看不到任何變化，這時候須要把最後一步加上）
border改成0px

方框屬性裏面一共有四個具體的方向，分別是 left/right/top/bottom
四、列表屬性
list-style:none/url(圖片) 修改列表前面的圖標。    float:left/right   浮動
五、層屬性
修改層屬性以前，先把這段代碼加在網頁的最上方，否則有些層屬性無法正常顯示
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

層的居中對齊：margin:0 auto
float:left/right 讓原本要換行的層變得不換行，同時修改層的對齊方式
clear:left/right/both 讓原本不換行的層變得換行

3、幾種選擇器(id>class>html)
一、html選擇器(標籤選擇器)
   直接把"選擇器"換成一個html標籤，全部被這個html標籤框起來的內容都會一塊兒改變

二、class選擇器(類選擇器) ！！同一個類名可使用屢次
   聲明階段： .類名 {樣式規則}
   使用階段： <標籤 class="類名">

三、id選擇器    ！！同一個id名只能使用一次
   聲明階段： #名字 {樣式規則}
   使用階段： <標籤 id="名字">   框架

四、僞類選擇器（四個僞類選擇器必定要按順序寫,記憶方式"愛恨原則(love/hate)"）
a:link     : 沒有被點擊的超連接
a:visited : 被點擊過的超連接
a:hover    : 鼠標懸浮在超連接上面時
a:active   : 超連接被按下的時候佈局

相關標籤/搜索

每日一句

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