導航:首頁 > 萬維百科 > 網頁設計設置字體完整代碼

網頁設計設置字體完整代碼

發布時間:2020-11-09 11:30:26

1、網頁設計怎麼改超鏈接的字體顏色?

直接通過設置元素的color屬性即可改變超鏈接的顏色。

工具原料:編輯器、瀏覽器

1、設置超鏈接字體顏色的簡單代碼如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<title>Document</title>
</head>
<body>
<a href="#"style="color: red;">鏈接一</a>
<a href="#"style="color: #090;">鏈接二</a>
<a href="#"style="color: yellow;">鏈接三</a>

</body>
</html>

2、運行的結果如下圖:

2、網頁製作中 改變字體格式的代碼是什麼

<span style="color:#0000FF">字體顏色為藍色</span> 很多標簽都可以使用style="color:#0000FF" 但<font>……</font>不能這樣使用 使用不同的標記

3、網頁設計字體滾動代碼?

文字滾動是由<marquee></marquee>控制的。marquee的參數如下:

1、方向 <direction=#> #=left, right
如:<marquee direction=left>啦啦啦,我從右向左移!</marquee>
<marquee direction=right>啦啦啦,我從左向右移!</marquee>

2、方式 <bihavior=#> #=scroll, slide, alternate
如:<marquee behavior=scroll>啦啦啦,我一圈一圈繞著走!</marquee>
<marquee behavior=slide>啦啦啦,我只走一次就歇了!</marquee>
<marquee behavior=alternate>啦啦啦,我來回走耶!</marquee>

3、循環 <loop=#> #=次數;若未指定則循環不止(infinite)
如:<marquee loop=3 width=50% behavior=scroll>啦啦啦,我只走 3 趟喲!</marquee>
<marquee loop=3 width=50% behavior=slide>啦啦啦,我只走 3 趟喲!</marquee>
<marquee loop=3 width=50% behavior=alternate>啦啦啦,我只走 3 趟喲!</marquee>

4、速度 <scrollamount=#>
如:<marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>

5、延時 <scrolldelay=#>
如: <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

6、對齊方式(Align) <align=#> #=top, middle, bottom
如:<font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font>
7、底色 <bgcolor=#>
#=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

如:<marquee bgcolor=aaaaee>啦啦啦,我會移動耶!</marquee>

8、面積 <height=# width=#>
如:<marquee height=40 width=50% bgcolor=aaeeaa> 啦啦啦,我會移動耶!</marquee>

9、空白(Margins)<hspace=# vspace=#>

<marquee id="scrollarea" direction="up" scrolldelay="10" scrollamount="1" width="150" height="80" onmouseover="this.stop();" onmouseout="this.start();">
------------------------------------------------------------------------------------------------------------------------------

<marquee></marquee>

以下是一個最簡單的例子:

代碼如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面這兩個事件經常用到:

onMouseOut="this.start()" :用來設置滑鼠移出該區域時繼續滾動

onMouseOver="this.stop()":用來設置滑鼠移入該區域時停止滾動

代碼如下:

<marquee >onMouseOut="this.start()" :用來設置滑鼠移出該區域時繼續滾動 :用來設置滑鼠移入該區域時停止滾動</marquee>

這是一個完整的例子:

代碼如下:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >

這是一個完整的例子

</marquee>

該標簽支持的屬性多達11個:

align

設定<marquee>標簽內容的對齊方式

absbottom:絕對底部對齊(與g、p等字母的最下端對齊)

absmiddle:絕對中央對齊

baseline:底線對齊

bottom:底部對齊(默認)

left:左對齊

middle:中間對齊

right:右對齊

texttop:頂線對齊

top:頂部對齊

4、網頁設計怎麼設置同意字體格式樣式

一、文字樣式設置的基本標簽—<font> 
設置字體樣式的基本標簽是<font></font>,被其包含的文本為樣式作用區。在初學者的HTML代碼編寫中,<font></font>容易被多重嵌套,如<font 屬性1=值1><font 屬性2=值2>文本</font></font>。還有一種情況是標簽嵌套錯位,如<font><p>文本</font></p>。為了規范代碼的編寫,避免不必要的錯誤,讀者在初學時一定要謹慎。 
二、設置文字的顏色 
color是<font></font>標簽的屬性之一,用於設置文字顏色。在D:web目錄下創建網頁文件,命名為font_color.htm,編寫代碼如代碼4.7所示。 
代碼4.7 字體顏色的設置:font_color.htm 
<html> 
<head> 
<title>字體顏色的設置</title> 
</head> 
<body> 
淺紅色文字:<font color="#dd0000">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深紅色文字:<font color="#660000">HTML學習的本質就是該是什麼就用什麼</font><br /> 
淺綠色文字:<font color="#00dd00">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深綠色文字:<font color="#006600">HTML學習的本質就是該是什麼就用什麼</font><br /> 
淺藍色文字:<font color="#0000dd">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深藍色文字:<font color="#000066">HTML學習的本質就是該是什麼就用什麼</font><br /> 
淺黃色文字:<font color="#dddd00">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深黃色文字:<font color="#666600">HTML學習的本質就是該是什麼就用什麼</font><br /> 
淺青色文字:<font color="#00dddd">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深青色文字:<font color="#006666">HTML學習的本質就是該是什麼就用什麼</font><br /> 
淺紫色文字:<font color="#dd00dd">HTML學習的本質就是該是什麼就用什麼</font><br /> 
深紫色文字:<font color="#660066">HTML學習的本質就是該是什麼就用什麼</font><br /> 
</body> 
</html> 
不但可以從代碼4.7中學到color屬性在font標簽中的用法,還可以熟悉各種顏色的表示方法。 
三、 設置文字的尺寸 
size也是<font></font>標簽的屬性,用於設置文字大小。size的值為1-7,默認為3。我們可以size 屬性值之前加上「+」、「-」字元,來指定相對於字型大小初始值的增量或減量。在D:web目錄下創建網頁文件,命名為font_size.htm,編寫代碼如代碼4.8所示。 
代碼4.8 字體尺寸的設置:font_size.htm 
<html> 
<head> 
<title>字體尺寸的設置</title> 
</head> 
<body> 
size為1:<font size="1">HTML學習</font><br /> 
size為2:<font size="2">HTML學習</font><br /> 
size為3:<font size="3">HTML學習</font><br /> 
size為4:<font size="4">HTML學習</font><br /> 
size為5:<font size="5">HTML學習</font><br /> 
size為6:<font size="6">HTML學習</font><br /> 
size為7:<font size="7">HTML學習</font><br /> 
</body> 
</html> 
可嘗試在size值前面加上「+」、「-」字元,更靈活地設置文字尺寸。 
四、設置文字的字體 
face也是<font></font>標簽的屬性,用於設置文字字體(字型)。HTML網頁中顯示的字型從瀏覽端的系統中調用,所以為了保持字型一致,建議採用宋體,HTML頁面也是默認採用宋體。在D:web目錄下創建網頁文件,命名為font_face.htm,編寫代碼如代碼4.9所示。 
代碼4.9 字體字型的設置:font_face.htm 
<html> 
<head> 
<title>字體字型的設置</title> 
</head> 
<body> 
字型為宋體:<font size="5">沁園春·長沙-毛澤東</font><br /> 
字型為楷體:<font size="5">沁園春·長沙-毛澤東</font><br /> 
字型為黑體:<font size="5">沁園春·長沙-毛澤東</font><br /> 
字型為隸書:<font size="5">沁園春·長沙-毛澤東</font> 
</body> 
</html> 
五、 使文字傾斜 
用雙標簽<i></i>可使被作用文字傾斜,達到特殊的效果,例如文章的日期。<em></em>被稱為強調標簽,也是斜體,目前使用比<i></i>標簽更頻繁,其編寫方法如下: 
<i>這是斜體文字</i> 
<em>這也是斜體文字</em> 
六、 使文字加粗 
用雙標簽<b></b>可使被作用文字加粗,是文字更加醒目,例如文章的標題部分。<strong></strong>被稱為特別強調標簽,也是文字加粗,目前使用比<b></b>標簽更頻繁,其編寫方法如下: 
<b>這是粗體文字</b> 
<strong>這也是粗體文字</strong> 
七、給文字加下劃線 
用雙標簽<u></u>可添加下劃線到被作用文字。以下為文字傾斜、加粗和下劃線的綜合示例。在D:web目錄下創建網頁文件,命名為font_style.htm,編寫代碼如代碼4.10所示。 
代碼4.10 文字修飾的設置:font_style.htm 
<html> 
<head> 
<title>字體修飾的設置</title> 
</head> 
<body> 
<font size="5">斜體:<em>沁園春·長沙-毛澤東</em><br /> 
加粗體:<strong>沁園春·長沙-毛澤東</strong><br /> 
下劃線:<u>沁園春·長沙-毛澤東</u><br /> 
斜體 加粗體 下劃線:<em><strong><u>沁園春·長沙-毛澤東</u></strong></em></font> 
</body> 
</html> 
— 注意:在多個標簽包含同一塊文字時,其包含順序不能錯位。 
八、 多種標題樣式的使用 
網頁的文章中,為了凸顯標題的重要性,標題的樣式比較特殊。HTML技術保護了一套針對標題的樣式標簽,分別為雙標簽<h1>到<h6>,文字尺寸從大到小代表不同級別的標題。標題標簽有一個特點,獨佔一行、文字加粗、文字居中。這樣,在設置標題的時候就很輕鬆了,並且可設多級標題。在D:web目錄下創建網頁文件,命名為font_h.htm,編寫代碼如代碼4.11所示。 
代碼4.11 標題的設置:font_h.htm 
<html> 
<head> 
<title>標題的設置</title> 
</head> 
<body> 
<h1>一號標題</h1> 
<h2>二號標題</h2> 
<h3>三號標題</h3> 
<h4>四號標題</h4> 
<h5>五號標題</h5> 
<h6>六號標題</h6> 
<h1>財富雜志:谷歌為何不會盛極而衰</h1> 
 <h3>遭遇潛在問題</h3> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;一些業內人士認為,長期壟斷互聯網搜索和廣告市場谷歌可能會盛極而衰。...與此同時,谷歌近日推出的多項新計劃,例如開放手機聯盟、社交網站通用平台OpenSocial、以及可能投資數十億美元競購無線頻段,也遭到了廣泛的質疑。 
<h3>將繼續壟斷搜索</h3> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;最近有一些文章稱,如果出現更好的搜索引擎,人們會毫不猶豫地放棄谷歌。但是,即使真有更好的搜索引擎出現,谷歌仍然可以在一段時間內屹立不倒。...在這種情況下,網站速度往往會成為決定勝負的關鍵。</p> 
</body> 
</html> 
九、學會處理網頁中的特殊字元 
在HTML中,有一些字元有特殊含義,例如「<」和「>」是標簽的左括弧和右括弧,而標簽是控制HTML顯示的,標簽本身只能被瀏覽器解析,並不能在頁面中顯示。那麼,該怎樣在HTML中顯示「<」和「>」呢?
特殊符號 
HTML代碼 
特殊符號 
HTML代碼 

&lt; 
™(商標符號) 
&trade; 

&gt; 
®(注冊符號) 
&reg; 
「」(英文半形) 
&quot; 
× 
&times; 
§ 
&sect; 
©(版權符號) 
&copy; 
在D:web目錄下創建網頁文件,命名為string.htm,編寫string.htm代碼如代碼4.12所示。 
代碼4.12 特殊字元的設置:string.htm 
<html> 
<head> 
<title>特殊字元的設置</title> 
</head> 
<body> 
<font size="5"> 
標簽的顯示方法:&lt;HTML&gt;<br /> 
引號的顯示方法:&quot;英文半形雙引號&quot;<br /> 
商標的顯示方法:&trade;<br /> 
注冊符號的顯示方法:&reg;<br /> 
版權符號的顯示方法:&copy;<br /> 
顯示&sect;<br /> 
顯示&times; 
</font> 
</body> 
</html> 
— 說明:單獨顯示符號&必須用代碼&amp;。 
十、如何更方便地忽略瀏覽器對部分HTML的解析 
如果在網頁中作一個類似本書的HTML代碼示例,恐怕得把所有的<和>轉換成&lt;和&gt;,顯得比較麻煩。HTML代碼中的<plaintext>和<xmp></xmp>可以輕松解決這個問題。 
<plaintext>是單標簽,它插入到HTML代碼中時,其後面的所有HTML標簽全部失效,即瀏覽器對<plaintext>後面所有的HTML標簽不作解析,直接在頁面上顯示。 
<xmp></xmp>是雙標簽,它只使其包含的內容中的標簽失效,<xmp></xmp>的使用更為普遍。在D:web目錄下創建網頁文件,命名為html.htm,編寫代碼如代碼4.13所示。 
代碼4.13 忽略標簽的設置:html.htm 
<html> 
<head> 
<title>忽略標簽的設置</title> 
</head> 
<body> 
<h2>沁園春·長沙</h2> 
<xmp>獨立寒秋,<strong>湘江北去</strong>,橘子洲頭。 <br />看萬山紅遍,層林盡染; <br />漫江碧透,<u>百舸爭流。</u> <br /></xmp> 
鷹擊長空,<strong>魚翔淺底,</strong> <br />萬類霜天競自由。 <br />悵寥廓,<u>問蒼茫大地</u>,誰主沉浮?<br /> 
<plaintext> 
攜來百侶曾游,<br />憶往昔崢嶸歲月稠。 <br /> 恰同學少年,風華正茂; <br /> 書生意氣,揮斥方遒。 <br /> 指點江山,激揚文字, <br /> 糞土當年萬戶侯。 <br /> 曾記否,<strong>到中流擊水</strong>,浪遏飛舟! 
</body> 
</html> 
十一、其他文字修飾方法 
為了滿足不同領域的需要,HTML還有其他修飾文字的標簽。比較常用的有上標格式標簽和下標格式標簽。某些場合甚至要用到刪除效果,即可用HTML的中劃線標簽。 
— 上標格式標簽為雙標簽<sup></sup>,多用於數學指數的表示,比如某個數的平方或立方。 
— 下標格式標簽為雙標簽<sub></sub>,多用於注釋,以及數學的底數表示。 
— 中劃線標簽為雙標簽<strike></strike>,多用於刪除效果。 
在D:web目錄下創建網頁文件,命名為other.htm,編寫代碼如代碼4.14所示。 
代碼4.14 其他修飾標簽的設置:other.htm 
<html> 
<head> 
<title>其他修飾標簽的設置</title> 
</head> 
<body> 
<font size="5"> 
沁園春<sup>長沙</sup>!<br /> 
數學指數的表示:2<sup>3</sup>=8、100<sup>2</sup>=10000<br /><hr /> 
沁園春<sub>長沙</sub>!<br /> 
數學底數的表示:log<sub>3</sub>81=4、log<sub>5</sub>125=3<br /><hr /> 
刪除效果:<strike>我被刪除了</strike> 
</font> 
</body> 
</html> 

5、網頁設計中,font 如何 精確 字體大小?

你好!你現在的size是html中的字體尺寸,這種不適合在頁面中作設置,這樣會影響整體字體大小的效果。你是好的方法就是要用CSS來做字體大小,這樣會很精確地做到。通常情況下,字體大小都是像素px為單位,用CSS來做設置的話,那如下例所示:
字體設置成為宋體12像素字體:.px12{font-family:宋體; font-size:12px}
那如何調用:<font class="px12">這是設置宋體12像素字體效果</font>
直接寫入頁面也是同樣達到效果,方法為:<font style="font-family:宋體; font-size:12px"></font>
那樣你字體大小就可以很好地精確起來,就不會一下子這么大這么難看了,你可以試一下。
希望我的回答能令你滿意!

6、製作網頁,一般字體設置為多大,行距為多少。

字體大小可以用不同的方式計算,如點或像素,由於基於像素的列印需要轉換為磅,因此建議使用磅。

1、網頁文本顯示最合適的字體大小約為12個磅。現在許多綜合性網站通常使用9磅字體大小,因為頁面中有許多內容需要排列,大字體可用於標題或其他需要強調的地方,小字體可用於頁腳和輔助信息。需要注意的是,小尺寸容易產生整體感和精緻感,但可讀性差。

2、行距的變化也會對文本的可讀性產生很大的影響。行距設置接近字體大小的權重更適合文本。行距的固定比例為10:12,即文字10磅,行距12磅。這主要是出於以下考慮:適當的行距會形成明顯的水平白帶引導觀眾的視線,過寬的行距會使一行文字失去良好的連續性。

(6)網頁設計設置字體完整代碼擴展資料:

網頁製作流程

1、引策劃

網站的整體定位、功能規劃、應用分析、流程設計和內容架構組織。

2、前台

網站頁面的設計製作,包括版式規劃、色彩應用、版面設計、切片輸出、頁面整合、動畫和多媒體設計、交互環節設計和頁面代碼編寫等。

3、後台

程序設計、數據操作、功能實現、管理界面和管理功能設計等,側重界面設計的,應在圖形設計和視覺創意上多下功夫,做頁面代碼和後台程序則要多熟悉web標准、標記語言、內嵌語言、腳本語言、資料庫等內容。

參考資料來源:網路-網頁製作

7、網頁製作中怎麼改變字體顏色?

1、首先打開hbuilder軟體,新建一個html文件,裡面寫入3個p標簽,再在style標簽中設置p標簽的基本樣式,包括間距,字體大小等屬性:

2、然後在style標簽中用3種方法設置文字顏色,第一個p標簽用16進制設置顏色,每兩個數字為一組,最大數字為ff,它們代表紅綠藍三種顏色;第二種方法是rgba,也是紅綠藍三種顏色,只不過值變成了數字,最大為255表示顏色最鮮艷,比如把第一個設置為255就是最紅:

3、第三個標簽使用HSL色彩,其中H代表色調,值最大為360,0和360也是紅色,其他顏色在中間;s是飽和度用百分比來表示,0%表示最暗,100%表示最亮;L表示亮度取值也是百分比;rgba和hlsa中a都表示透明度,取值在0.0到1.0之間,0.0是完全透明,1.0為完全不透明:

4、最後打開瀏覽器就能三種方法表示出的顏色 :

8、html網頁製作里設置表格字體和大小的語句有嗎?是什麼?

HTML Table表格的文字大小與字型在傳統的HTML網頁設計規則中,可以透過HTML預設font文字標簽中的size與face分別設定文字大小與字型,這樣的寫法在HTML5以前是相當普遍的,而到了HTML5開始,修改表格文字大小與字型必須使用css來處理,因為HTML5不支援傳統HTML font的size與face屬性,在css的規則里,修改文字大小是用font-size,而修改字型則是使用font-famliy,以下範例分別使用HTML傳統的font標簽以及css的屬性來修改表格文字。

範例一、用HTML font文字標簽修改表格文字大小與字型

<table border="1" cellpadding="5"> 
<tr>
<td><font size="5">這是size = 5的文字大小</font></td>
<td><font face= "DFKai-sb">這是標楷體的文字字型</font></td> 
</tr> 
</table>

呈現結果

誠如第一段所說,若要符合最新的HTML5網頁設計標准,表格內的文字大小與字型就必須使用css來設計,範例二就提供這樣的設計方式,除了可以像範例一這樣每個欄位不同的文字樣式,還可以一次設定整個表格的文字樣式,用起來效率非常好。

範例二、用css的font-size與font-family來修改表格文字大小與字型

<table border="1" style="font-size:18px;font-family:serif;" cellpadding="5"> 
<tr>
<td>這是表格預設文字樣式</td>
<td>< span style="font-size:13px;">這是13px的文字大小</span></td>
<td><span style="font-family:DFKai-sb">這是標楷體字型< /span></td> 
</tr> 
</table>

呈現結果

二在table標簽開頭就先加入了『style="font-size:18px;font-family:serif;"』這樣的語法,代表將整張表格內的所有文字大小都預設為18px,而且字型使用serif,這可是傳統HTML的font標簽沒辦法做到的高效率設計方式,接著我們在表格的三個欄位,分別使用預設文字樣式、修改大小為13px(font-size:13px;) 、字型改為標楷體(font-family:DFKai-sb;),可以清楚的看到,只要在表格中任何欄位或一段文字,用span標簽包起來,就可以特別為文字做不同的樣式設計。

與網頁設計設置字體完整代碼相關的知識