整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁前端設計-03Html基礎-Html內容組成框架

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          一、學習html學的是什么?

          1.1學標簽

          我要什么內容,就用什么標簽 在去思考使用標簽的什么屬性

          比方說:文字就用文字標簽,HelloWorld 6號字 顏色變成紅色

          <html>   
          
           <head>   
          
          <title></title> 
          
          </head>      
          
          <body>   
          
              <font size="6" color="red" >HelloWorld  </font>    //這個就是文字標簽   屬性尺寸是6,顏色是紅色
          
          </body>       
          
          </html>  

          二、編寫格式

          1、每個網頁頁面都是一個單獨的文件,頁面的后綴是XXXX.html 或者 XXXX.htm

          2、編譯器/解釋器就是瀏覽器,瀏覽器會一行行編譯,不會像C 或者PLC等還需要再次編譯。

          3、用記事本做演示,需要把后綴名改成.html ,如果后綴名被隱藏了,需要在文件菜單-查看-選項-查看-把隱藏已知文件類型的拓展名去掉

          <html>    //html開始
          
          <head>    //頭標簽開始
          
          <title></title>
          
          </head>    //頭標簽結束
          
          <body> //身體標簽開始
          
          HelloWorld   //主體內容
          
          </body>   //身體標簽結束
          
          </html>   //html結束


          三、常用標簽及其屬性:

          3.1 文本修飾

          font 行內標簽 (沒有換行效果)

          size 字體的大小,最大值是7

          color 顏色值

          顏色的第一種表示形式:顏色單詞 red green blue

          顏色的第二種表示形式: 顏色的RGB 如:rgb(0,0,255) 第一個0表示R紅色的份數,第二個表示G綠色的份數 ,第三個0表示B藍色的份數

          顏色的第三種表示形式:十六進制表示,把顏色這個寫成#0000ff ,就是第一個紅綠藍十六進制,

          face 字體族 黑體 楷體 宋體 華文彩云等 但必須是瀏覽器支持的字體

          節我們來講字體樣式,之前我們學習 HTML 的時候學過一些用于字體加粗、傾斜的標簽,但是使用標簽來實現的效果肯定沒有我們通過 CSS 中的樣式來的方便。

          接下來我們會給大家介紹下面這幾個屬性的使用:

          通過學習上述這幾個 CSS 屬性,我們可以實現給 HTML 中的文字設置字體、大小、風格、傾斜、加粗等。

          font-family

          font-family 屬性用于設置一個元素的字體,字體就是像宋體、楷體等。

          通過 font-family 屬性,可以同時聲明多種字體,字體之間使用逗號分隔。根據字體的調用原則,會優先調用第一種字體,如果沒有找到,則會嘗試調用下一個字體,如果都找不到則調用默認字體。

          示例:

          例如為下面這個 <p> 標簽中的文本設置字體:

          <p>Hello,俠課島</p>
          

          可以使用標簽選擇器,然后在 font-family 屬性中設置:

          p{
              font-family:'Times New Roman','sans-serif', 宋體, 楷體;
          }
          

          在聲明字體時,我們應該分別聲明英文字體和中文字體,且英文字體的聲明應該在中文字體之前。因為絕大部分中文字體里包含英文字母,但是不是很好看,而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文,就一定要記得先聲明英文字體。先聲明的會先調用。

          常用英文字體:Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。

          常用中文字體:宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。

          font-size

          font-size 屬性用于設置字體的大小,常用的單位為 px,即像素。

          px 是 Pixel 的縮寫,是可以在數字顯示設備上顯示和表示的數字圖像或圖形的最小單位。像素是數字圖形中的基本邏輯單元,像素也稱為圖像元素。

          示例:

          例如我們來看下面這段代碼(其他HTML結構代碼沒有展示出來):

          <body>
              <h1>斷句</h1>
              <p>近水樓臺先得月,向陽花木易為春。</p>
          </body>    
          

          在瀏覽器中的演示效果為:

          然后此時,我們通過 font-size 來將其中的 <h1> 標簽中的字體設置為 14px,<p> 標簽中的字體設置為 20px:

          h1{
              font-size: 14px;
          }
          p{
              font-size: 20px;
          }
          

          在瀏覽器中演示效果就變為了下圖所示:

          很明顯,通過 CSS 中的 font-size 屬性可以設置任意標簽中的字體大小。

          font-style

          font-style 設置字體的風格,可以將字體設置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。

          此屬的常用屬性值如下所示:

          示例:

          將下面三個 <p> 中的內容設置為不同的字體風格,可以使用類選擇器:

          <body>
              <p class="normal">將字體設置為標準的字體樣式</p>
              <p class="italic">將字體設置為斜體的字體樣式</p>
              <p class="oblique">將字體設置為傾斜的字體樣式</p>
          </body>
          

          CSS 樣式代碼:

          .normal {
              font-style:normal;
          }
          .italic {
              font-style:italic;
          }
          .oblique {
              font-style:oblique;
          }
          

          在瀏覽器中演示效果如下所示:

          font-weight

          font-weight 屬性用于設置顯示元素的文本中所用的字體加粗。

          此屬性的常用屬性值如下所示:

          示例:

          將下面的 <p> 標簽的粗細分別設置為 normal、bold、700、900:

          <p class="w1">將字體設置為:normal</p>
          <p class="w2">將字體設置為:bold</p>
          <p class="w3">將字體設置為:700</p>
          <p class="w4">將字體設置為:900</p>
          

          CSS 樣式代碼:

          .w1 {
              font-weight: normal;
          }
          .w2 {
              font-weight: bold;
          }
          .w3 {
              font-weight: 700;
          }
          .w4 {
              font-weight: 900;
          }
          

          在瀏覽器中演示效果:

          font

          font 屬性用于在一個聲明中設置所有的字體屬性,各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。

          如果我們使用 font 屬性來設置字體樣式,設置順序分別是:font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不設置其中的某個值,未設置的屬性會使用其默認值。

          示例:

          <p class="p1">草長鶯飛二月天,拂堤楊柳醉春煙。</p>
          <p class="p2">留連戲蝶時時舞,自在嬌鶯恰恰啼。</p>
          

          CSS 樣式代碼:

          .p1{
              font: italic bold 20px 'sans-serif', 楷體;
          }
          .p2{
              font: bold 14px 'Arial', 宋體;
          }
          

          在瀏覽器中演示效果:

          注意,在使用 font 屬性時,font-size 和 font-family 的值是必需的,如果沒有設置這兩個屬性值,則不會生效。

          總結

          本節學習的幾個屬性值都是 CSS 中最基本的屬性,特別是 font-size 屬性,我們會經常用到。一般瀏覽器會有一個默認的字體大小,例如 16px,而編寫頁面時如果我們希望大部分頁面內容正文字體大小為 12px 或 14px,就會在 <body> 標簽上設置,這樣就不用一個個標簽去設置。

          費可商用字體,一直是設計師心中永遠的痛(尤其是中文字體),今天,我們帶大家來看一波免費可商用字體。

          01.思源黑體

          下載地址:https://github.com/adobe-fonts/source-han-sans/(或后臺直接回復關鍵詞“思源黑體”)

          思源黑體(英語:Source Han Sans)是Adobe與Google所領導開發的開源字體家族,1.001及更早版本以Apache 2.0許可證授權,而1.002及更新版本則使用SIL開源字體授權,屬于無襯線黑體。思源黑體于2014年7月16日首次發布,支持繁體中文、簡體中文、日文及韓文,并且有七種字體粗細(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy)。公開之時為當時涵蓋字符數量最多的字體,44,666個字符分屬于65,535個字形中,此為OpenType字體技術的極限。就版權而言,思源黑體不得不說是業界良心,可以免費商用,甚至于可以修改。

          02.思源宋體

          下載地址:https://github.com/googlei18n/noto-cjk

          思源宋體是 Adobe Type 發布的最新泛 CJK 字體,它是對應于思源黑體的宋體字體;他們發布這兩種字體是為了響應統一設計的需求,以服務于東亞 15 億人口。思源宋體支持四種不同的東亞語言(簡體中文、繁體中文、日語和朝鮮語),7 種粗細類型中的每一種都有 65,535 個字形,可共同呈現一致的視覺美感。該字體還包含多個西方字形,支持拉丁語、希臘語和西里爾文腳本,這些字形均來源于 Source Serif。

          03.思源柔黑體(源柔ゴシック)

          下載地址:http://jikasei.me/font/genjyuu/

          這個字體是基于思源黑體修改而成的,作者是日本的自家製フォント工房。

          同樣的它提供了三種不同圓角程度的版本,以及七種不同粗細的版本。

          04.花園明朝體

          下載地址:http://fonts.jp/hanazono/

          花園明朝 (Hanazono) 是一款免費字體,為 GlyphWiki 所開發,字形數量共 45090 + 47186 個,幾乎收錄了所有漢字字形。缺點是字形以日本字形為準,有一些字不符合中文書寫規范(不論是大陸規范還是港臺規范)。

          05.王漢宗系列字型

          下載地址:網上到處有,搜索下就有

          王漢宗自由字型由研發天蠶字庫的臺灣中原大學數學系王漢宗教授先分別在2000年和2004年先后捐出十套WCL系列字型和32套新字型,全部以GNU GPL許可分發。

          2005年,臺灣著名字型廠商文鼎科技認為王漢宗字型與文鼎的字型極度相似,一些自由軟件網站決定在問題明了前先移除字型下載以避免法律問題。 然而云端字型服務公司 justfont 則不認為存在授權問題,在提供字型列表中可見到 17 個王漢宗自由字型。文鼎公司覺得王漢宗有許多套字型是 copy 自文鼎字型。但是如果說是完全抄襲,也會有爭議,因為雖然骨架相同,但描繪點并不一樣,法律上頂多只能算是「疑似」抄襲。

          另外就「隸書」、「仿宋」、等字型來說,文鼎公司也并非獨創,有許多字型公司的同名字型幾乎長得其實一模一樣。這么一來其實很難說誰抄誰。不過,為了避免爭議,我們在此還是列出文鼎公司主張侵權的王漢宗字型供大家參考:王漢宗中仿宋、王漢宗中仿宋簡體、王漢宗隸書體、王漢宗中明體、 王漢宗粗明體、王漢宗特明體、王漢宗細圓體、王漢宗特圓體、王漢宗迭圓體、王漢宗勘亭流、王漢宗綜藝體、王漢宗中行書、王漢宗綜藝體雙空陰、王漢宗粗楷體簡體。文鼎公司主張以上王漢宗字型侵權,使用前請斟酌。其他部分的王漢宗字體則無爭議。

          06.文泉驛系列字體

          下載地址:http://wenq.org/wqy2/index.cgi

          文泉驛是一個開源漢字字體項目,由旅美學者房騫騫(FangQ)于2004年10月創建,集中力量解決GNU/Linux高質量中文字體匱乏的狀況。

          目前,文泉驛已經開發并發布了第一個完整覆蓋GB18030漢字(包含27000多個漢字)的多規格點陣漢字字庫,第一個覆蓋GBK字符集的開源矢量字庫(文泉驛正黑),并提供了目前包含字符數目最多的開源字體——GNU Unifont——中絕大多數中日韓文相關的符號。

          這些字庫已經逐漸成為主流Linux/Unix發行版中文桌面的首選中文字體。目前Ubuntu、Fedora、Slackware、Magic Linux、CDLinux使用文泉驛作為默認中文字體,Debian、Gentoo、Mandriva、ArchLinux、Frugalware則提供了官方源支持,而FreeBSD則在其ports中有提供。

          目前有

          清晰銳利的傳統中文界面:文泉驛點陣宋體

          柔和圓潤的現代中文界面:文泉驛正黑

          柔和與清晰的智能組合:文泉驛點陣正黑

          兼顧中英文對齊的等寬開源字體:文泉驛等寬正黑

          很小很強大的高質量矢量字體:文泉驛微米黑

          經典的等寬點陣中文字體:文泉驛Unibit

          07.站酷字體

          下載地址:http://www.zcool.com.cn/special/zcoolfonts/#firstPage

          站酷高端黑

          2014年圣誕,站酷網發布了一款完全免費的中文字體“站酷高端黑”,2015年1月13日,在收集了設計師網友的意見后,站酷高端黑修訂版發布。這款制作歷時八個月的字體由站酷網字體設計師胡曉波、劉兵克發起,參與漢字百人舞100位字體設計師共同完成。全部字形以眾包的形式由分散在全國的79名設計師分別完成,包含6763個漢字、數字和英文字母。

          站酷快樂體

          站酷快樂體由字體設計師劉兵克及150位字體設計的朋友制作而成。這套風格輕松活潑的字體也是積站酷高端黑后,第二套由酷友集體創作完成,供所有人永久免費使用(可商用)的工藝字體。

          站酷快樂體是一例風格輕松和簡單的字體,無論是筆畫結構,還是筆畫粗細,都很靈活,設計難度并不是很大。考慮到我們每個人的設計水平會有些許差別,選擇設計這樣的字體,成功率和準確率都會高很多,字與字之間的協調性統一性也更容易實現。

          站酷酷黑體

          由胡曉波發起,字游工作室成員進行基礎字形設計。胡曉波設計班十名學員共同設計完成。字形筆畫粗獷有力,用寬扁型的字面構建出厚重的字體形態,筆畫細節上的修飾既增強了字體的設計感,又讓字體多了一些小小的精致感,中宮的飽滿使得文字之間的排版組合非常醒目好看。包含3500個常用字,52個英文字母,10個阿拉伯數字。

          ZCOOL Addict Italic

          插播一個英文字體,[ZCOOL Addict Italic]站酷意大利體是由大貓Addict設計,站酷冠名的首款公益西文字庫, 是可免費商用的西文字,2016年5月發布第一版。字數:52個字母,10個數字,24個符號。使用范圍:免費授權全社會使用(包括商用)。

          08.方正字庫

          下載地址:https://www.foundertype.com/index.php/FindFont/index.html

          不多說,方正有四款字體可以免費商用,但是需要書面授權,四個字體分別是:方正黑體、方正書宋、方正仿宋、方正楷體。

          09.文鼎字體

          下載地址:http://www.arphic.com.tw/zh-tw/support/index#download

          以前文鼎字體有很多免費可商用的,現在也只有五個了:文鼎細上海宋繁體、文鼎中楷繁體、文鼎報宋簡體、文鼎簡中楷簡體,文鼎PL明體U20-L。

          10.瀨戶字體

          下載地址:https://www.dropbox.com/s/vj2yg2p5uf699fy/SetoFont.TTF?dl=0

          瀨戶字體,是一款偏可愛風的字體,支持簡體中文、繁體中文、日文,包含CJK常用漢字、平片假名、JIS第一至四級,共30000余字。

          11.全字庫說文解字

          下載地址:http://www.cns11643.gov.tw/AIDB/download.do?name=%E5%AD%97%E5%9E%8B%E4%B8%8B%E8%BC%89

          《說文解字》是中國第一部系統地分析漢字字形和考究字源的字書。許慎著,成于安帝建光元年(121年)。原書十四篇,敘目一篇,正文以小篆為主,收9353字,又古文、籀文等異體同文1163字,解釋十三萬余字。

          目前采用的版本為藝文印書館所出版之《說文解字注》,系由南唐徐鉉所校定,清代段玉裁注之版本(世稱大徐本)并參考黎明文化事業公司之《說文解字注》,及南唐徐鍇所撰之《說文解字系傳》

          由于說文解字原文與現行之Unicode編碼并無一完整的對應,因此無法將所有的字形收錄于本字型文件內以致于會有部份字碼無法顯示出正確字形的情形發生!(目前收錄于本字型文件內的字數共計有6721個字)

          估計沒人會用,淡淡的憂傷!

          12.Droid Sans Fallback

          Droid Sans Fallback 是當年 Google 為推出 Android 設備時,委托臺灣華康科技(威鋒數位)為東亞各國字符設計的一款字體,承襲了 DFHeiW5-A 的設計風格,但是同時有些字形的間架結構不是很完美。之后文泉驛開始以 Droid Sans Fallback 為藍本設計出了文泉驛微米黑,可以說Droid Sans Fallback 和文泉驛微米黑有著濃厚的血緣關系。

          下載這個,意義不大,直接用文泉驛微米黑就OK了

          13.龐門正道標題體

          下載地址:http://www.zcool.com.cn/work/ZMjA0MDg0MDA=.html

          這個字體是由龐門正道以及字游空間創意工作室聯合制作的。

          14.華康字體(僅阿里平臺)

          下載地址:http://www.dynacw.com.cn/news/news_detail.aspx?s=7

          這個啥也不說了,搭不上話了。

          我大致確定是免費可商用的大概就這些了,能力有限,歡迎補充,(如有錯,請指出),另外,附上一些我不大確定的字體,據說是免費可商用的,但是我確定不了,慎重。

          這些字體是在開源系統linux中找的,畢竟做開源的他們比我們更懂字體和法律!

          香港參考宋體

          臺灣教育部標準字體

          臺大中文字體

          草檀齋毛澤東字體

          書體坊免費字體

          戰國楚簡帛文字字體


          主站蜘蛛池模板: 亚洲av无码一区二区乱子伦as| 免费人人潮人人爽一区二区| 亚洲午夜日韩高清一区| 国产一区韩国女主播| 久久婷婷色综合一区二区| 色欲综合一区二区三区| 丰满爆乳一区二区三区| 国产乱人伦精品一区二区在线观看 | 中文字幕一区视频| 在线免费视频一区二区| 精品黑人一区二区三区| 国产一区视频在线| 久久婷婷久久一区二区三区| 久久99精品免费一区二区| 日韩熟女精品一区二区三区 | 免费在线观看一区| 国产成人精品一区二区三在线观看| 中文字幕乱码人妻一区二区三区| 亚洲国产老鸭窝一区二区三区 | 亚洲熟妇av一区| 日韩精品乱码AV一区二区| 日韩亚洲AV无码一区二区不卡 | 海角国精产品一区一区三区糖心 | 精品福利一区二区三区免费视频| 日韩人妻无码一区二区三区99| 亚洲国产成人一区二区精品区| 国产视频一区二区在线播放| 国产在线一区二区| 精品黑人一区二区三区| 国产一区二区不卡老阿姨| 日韩精品国产一区| 亚洲片一区二区三区| 丰满少妇内射一区| 精品无码一区二区三区爱欲| 亚洲综合一区无码精品| 国产在线步兵一区二区三区| 成人免费av一区二区三区| 久久无码人妻一区二区三区午夜| 亚洲av乱码一区二区三区| 无码丰满熟妇一区二区| 一区二区三区免费精品视频|