大家好，今天小編來為大家解答如何編輯html網(wǎng)頁這個問題，怎么修改html頁面內(nèi)容很多人還不知道，現(xiàn)在讓我們一起來看看吧！
html怎么輸出
html可以通過以下幾種方式
1.console.log在瀏覽器控制臺下查看相關(guān)輸出結(jié)果,console.log("11111")
2.通過alert彈框形式，將要顯示的結(jié)果顯示在網(wǎng)頁上，比如alert("showresult")
3.通過html自帶的標簽，比如input輸入框，或者label，span標簽，將輸出的結(jié)果顯示在對應(yīng)的標簽上。
html網(wǎng)頁代碼完整示范
步驟/方式1
HTML網(wǎng)頁的代碼，我們開始使用時可以使用notepad來寫基本的代碼。
首先，點擊開始輸入notepad，然后打開文本輸入框，然后在里面輸入基本的HTML框架代碼
步驟/方式2
然后再填充head和body里面的內(nèi)容
步驟/方式3
然后點擊文件再點擊保存
步驟/方式4
在修改notepad文件的后綴為HTML，設(shè)置成可運行的網(wǎng)絡(luò)文件，然后點擊保存
步驟/方式5
這樣桌面上就生成了一個可運行的網(wǎng)頁HTML文件
步驟/方式6
然后雙擊運行，看到我們已經(jīng)成功的完成了HTML文件的運行
用html如何制作一個簡單的網(wǎng)頁代碼
1、首先，在計算機桌面上創(chuàng)建一個新文件夾，然后在該文件夾中創(chuàng)建一個新的文本文檔。
2、然后雙擊打開帶有記事本的文本文檔，如下圖所示，我們編寫一個簡單的html代碼。3、單擊“另存為”的功能選項，顯示默認保存為編碼為ANSI。4、我們將更改編碼和文件名，將其更改為如圖所示的圖像并保存。5、然后返回到新創(chuàng)建的文件夾，發(fā)現(xiàn)有一個額外的html文件。6、最后，使用瀏覽器打開html文件，效果如圖所示，簡單的網(wǎng)頁被成功編寫。HTML 是用什么編輯的
HTML編輯用微軟自帶的記事本或?qū)懽职寰涂梢跃帉懀肳PS或Word來編寫也可以，不過保存時請使用.htm或.html作為擴展名，這樣就方便瀏覽器認出直接解釋執(zhí)行了。
HTML其實是文本，它需要瀏覽器的解釋。
所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網(wǎng)頁，如：AMAYA（出品單位：萬維網(wǎng)聯(lián)盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。
怎樣在網(wǎng)頁中做出精彩的文字排版
字體排版絕不僅僅是使用字體那么簡單，它包括了關(guān)于文字”看上去會是怎么樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節(jié)的小事。一個好的文字排版會為你所寫的內(nèi)容定下情感基調(diào)，并且可以幫助讀者更好的理解其內(nèi)容和語境。
為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進一步的了解更多細節(jié)，可以點擊查看在每一章中的”擴展閱讀”去深入了解。
這本手冊將會在GitHub上開源，并且會持續(xù)更新一些最佳實踐的范例，希望你們喜歡！
字體排版設(shè)計視覺層次
視覺層次是一種理念，它意在傳達頁面中的元素應(yīng)該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關(guān)的內(nèi)容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用于文字排版中，它構(gòu)成了文字排版設(shè)計的理論基石。
請看下圖的”愛麗絲夢游仙境”的字體排版設(shè)計，它展現(xiàn)了一個清晰的視覺層次：
點擊這里查看網(wǎng)頁上的實際效果
視覺層次可以被分成以下4個部分：
字體大小&字體重量：設(shè)置字體大小和字體重量是兩種構(gòu)建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什么地方是最重要的，引導讀者的目光落到這里的內(nèi)容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目了然了。
定位：元素定位是另外的一種構(gòu)建視覺層次的方式，就像上圖中，文章的標題和作者信息通過置頂和居中表明了它們的重要性。
字體：通過使用有對比度的字體可以提高不同元素之間的辨識度，從而構(gòu)建視覺層次
顏色：為重要的文字設(shè)置不同的顏色也是一種非常簡單的構(gòu)建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。
擴展閱讀：
VisualHierarchy：HowWellDoesYourDesignCommunicate?
CreatingExcitingAndUnusualVisualHierarchies
字體排版中的格式塔原則
格式塔原則，或格式塔法則，是一種構(gòu)建感性認知的規(guī)律。當我們觀察這個世界的時候，我們通常會意識到，一個復雜的場景是由多個在某些背景之上的物體構(gòu)成的，而這些物體則是由更小的一些物體構(gòu)成的，依此循環(huán)下去。
在字體排版中我們需要理解的兩個很重要的格式塔原則就是”距離原則”和”相似原則”。.
距離原則
為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關(guān)聯(lián)的物體，反之，隔得比較遠的物體將會被看成屬于不同類別。
點擊此處查看原圖
在字體排版設(shè)計中，”距離”指的是通過設(shè)置行高、內(nèi)間距和外間距所制造出來的留白空間。在兩段不同的段落之間應(yīng)該留有明顯的并且易于區(qū)分的留白間隔，請看下面的例子：
注意啦，你覺得應(yīng)該把內(nèi)容相關(guān)的部分都擠到一個很小的空間中去嗎？當然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關(guān)系的段落之間額外的加上一些易于區(qū)分的留白就可以了
相似原則
格式塔的相似原則告訴大家，看起來很像的東西會被認為是一類的東西。舉個例子，如果所有可點擊的文字被設(shè)置為天藍色，那么讀者就會認為文章中所有天藍色的文字內(nèi)容都是可以點擊的。
在字體排版中，相似原則就意味著，擁有同樣功能的元素應(yīng)該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應(yīng)該看起來很像才對。例如，兩篇同為博客帖子的文章應(yīng)該看起來很像。而相反的，兩個功能不相同的元素也應(yīng)該看起來不像。
擴展閱讀：
GestaltTheoryinTypography&DesignPrinciples
Proximity，UniformConnectedness&GoodContinuation
字體選擇字體
選擇字體是一個具有創(chuàng)造性和情感的過程。不同的字體可以傳達不同的情感，你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。
首先為你的文字的正文挑選一個合適的字體，當你需要搭配不同字體的時候，記得要保持正文字體的不變，然后試著依據(jù)這個字體選擇和它相搭配的其他字體。
使用一些例如TypeTester和TypeCast這一類的工具會讓你進行字體選擇的時候輕松一些。
從他人處獲得靈感!FontsInUse提供了大量的優(yōu)秀的字體搭配范例。
有些字體本來就是為用作大標題而設(shè)計的，而有些字體天生就只適合那些小屏幕，你要依照每個字體的”天性”去使用它們。你可以在WebType上面找到對于不同字體而言合適的尺寸。此外TypeKit也標明了其上的字體是適合標題或者是正文。
為了達到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用woff2和woff也會支持大部分的現(xiàn)代瀏覽器。
你需要為每個列出來的格式提供一個相應(yīng)的字體文件。推薦使用Transfonter或者FontSquirrel’sWebFontGenerator，這樣你就可以在只有一個字體文件的情況下，將其轉(zhuǎn)換成不同的文件格式。
盡可能的壓縮你的字體文件。點擊這里查看更多信息。
將多個同源字體文件（細體、常規(guī)、半粗體、粗體等等）合并成一個font-family，盡量不要為每個字體都起一個新的font-family的名字。
或者，你也可以通過線上字體資源服務(wù)，如GoogleFonts或者Typekit引入你想要的字體。
擴展閱讀：
FurtherHardeningOfTheBulletproofSyntax
FontSquirrel：HowToUseTheGenerator
加載字體
在你引入的字體被渲染出來之前，他們需要先進行加載。下面是三種在加載的時候可能會發(fā)生的事情：
引入的字體沒有被識別出來，字體應(yīng)用了備用字體。
引入的字體雖然被識別出來但是沒有加載，他需要在下載完成之后才會被應(yīng)用。
引入的字體被成功識別并迅速應(yīng)用。
場景1只發(fā)生在你嘗試使用一個不存在的字體，或者聲明時候的src指向了一個壞鏈，這種情況可以并且應(yīng)該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時候發(fā)生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：
1.文檔樣式閃爍方案（FOUT）
FOUT是指網(wǎng)頁會在切換到合適的網(wǎng)頁字體之前，使用默認或者備選字體顯示文字。這種情況的出現(xiàn)是因為只有當HTML和CSS都被下載完成之后，字體請求才會發(fā)出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時間。FOUT算是對大部分的網(wǎng)頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，F(xiàn)OUT很難被用戶察覺出來。
2.不可見文本閃爍方案（FOIT）
很多年前，一些現(xiàn)代瀏覽器開始使用一種新的技術(shù)來處理字體加載的問題—FOIT.FOIT是指當瀏覽器檢測到字體正在加載的時候，隱藏應(yīng)用這段字體的文字，直到字體完全下載完才將其顯示出來。然而我們應(yīng)該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網(wǎng)絡(luò)速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現(xiàn)FOUT，最壞的情況可能會是這段文字將永遠看不到了。
3.白屏方案
即在字體加載完成之前，整個網(wǎng)頁都處于不可見的狀態(tài)，或者也可以采用顯示一個進度條.我們只推薦當FOUT嚴重影響用戶體驗的時候使用這種方法。我們通常在一個網(wǎng)頁需要大面積顯示一個特定的字體的時候使用該方法，否則，F(xiàn)OUT總會我們的第一選擇，因為”內(nèi)容至上”。白屏方案與FOIT很相似，但對于你來說，你擁有控制在什么時候給用戶展示你的內(nèi)容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中，不可見的文本有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在加載的信號。
不管你是打算使用FOUT方案或者白屏方案，我們都推薦您使用WebFontLoader這個JavaScript庫.WebFontLoader可以讓你對@font-face加以控制，而且你也為字體加載的體驗添加控制事件。
注意：有一個W3C字體加載API也會實現(xiàn)同樣的功能，但是它現(xiàn)在的支持不是很好_
異步地使用WebFontLoader很重要，只有這樣做才不會延誤頁面其他部位的渲染。
寫樣式的時候，讓你的備用字體盡可能近的靠近你的實際字體，這樣才能最大程度的減少FOUT造成的影響.點擊這里你將會看到一系列的備選字體.使用這個工具你將很容易的看到備選字體和你引入的字體的對比效果.
白屏方案
在這個例子里面，備選字體不需要和你引入的字體看起來很像，因為我們不會用到FOUT.依照你自己的喜好去選擇備選字體吧。
如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在用戶體驗上效果會更好一些，特別是當字體文件很大的時候。
擴展閱讀：
TypeStudy：ChoosingFallbackFonts
FOUT，F(xiàn)OIT，F(xiàn)OFT
WebFontOptimization
OpenType的特性
OpenType的特性可以被視為文字進行字體排版時的可選項，它們被用來加強文字的表現(xiàn)和易讀性。
p{font-kerning：normal;font-variant-ligatures：common-ligaturescontextual;-moz-font-feature-settings："kern"，"liga"，"clig"，"calt";-ms-font-feature-settings："kern"，"liga"，"clig"，"alt";-webkit-font-feature-settings："kern"，"liga"，"clig"，"calt";font-feature-settings："kern"，"liga"，"clig"，"calt";}
OpenType特性被放置于字體之中，這就意味著對于不同的字體，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。
使用font-feature-settings來激活OpenType特性.由于目前對于這個屬性的支持不好，我們需要在屬性之前加上前綴。
Kerningkern，ligaturesliga，contextualligaturesclig，和contextualalternativescalt這四種適用于所有字體中######(譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！)
WebStyleGuide相對大小
盡可能的使用相對大小。
html{font-size：100%}p{font-size：1em}@media(min-width：64em){html{font-size：112.5%;}}
font-size：100%與瀏覽器的字體大小設(shè)定保持一致而不是去覆寫它，根據(jù)大多數(shù)的瀏覽器的默認設(shè)置，這里也可以用1em代替表示16px.
通過改變html的font-size會影響到所有單位為em和rem的元素.如果是對于響應(yīng)式設(shè)計的網(wǎng)頁，這樣做還是比較實用的。
用戶的選擇也很重要，所有不要偏離font-size：100%和1em太遠.
對于font-size建議使用rem和em.
對于一些元素定位如margin，padding等等，建議使用rem，em，或者%。
對于媒體查詢中尺寸建議使用em.
對于一些大的標題字或者配有圖片的字，可以使用FitText來實現(xiàn)標題的縮放。盡量避免使用vw和vh因為現(xiàn)在的支持還不是很好，難于精確的配置，并且對于一些瀏覽器的字體和縮放設(shè)置并不適配。
擴展閱讀：
TypeStudy：SizingTheLegibleLetter
5UsefulCSSTricksforResponsiveDesign
REMvsEM–TheGreatDebate
PX，EMorREMMediaQueries?
容器
容器，或者稱為包裝，指的是用來包裹一個或者多個元素的HTML元素。它將元素分組，從而更好進行語義化、修飾以及布局。
html{box-sizing：border-box;}*，*：before，*：after{box-sizing：inherit;}.container{max-width：67rem;padding-left：1.5rem;padding-right：1.5rem;}
強烈建議使用box-sizing：border-box.點擊這里查看更多信息。
左/右內(nèi)間距與最大寬度聯(lián)合使用可以很容易地創(chuàng)建一個移動端友好的容器。
要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經(jīng)常移動才可以看清）。永遠記住，在進行網(wǎng)頁字體排版的時候，沒有一個適合所有字體、尺寸、行距和分辨率的鐵律，你需要自己來做決定。
擴展閱讀：
*{Box-sizing：Border-box}FTW
StackOverflow：IdealColumnWidthForParagraphsOnline
字體大小
使用縮放模塊可以幫助你決定在你的元素上面應(yīng)用怎樣的font-size.縮放模塊指的是依照其內(nèi)容安排的一系列比較合適的字體大小的數(shù)值。
縮放模塊的說明.點擊此處
我們可以在編寫CSS的一開始使用縮放模塊，將它作為一個參考。
值的注意的是，盡管不同的字體有著不同的大寫字母高度和x字母高度，可是大多數(shù)的模塊化縮放工具都沒有將這些考慮在內(nèi)。
在你的樣式表中，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中。
響應(yīng)式的縮放模塊
只使用單獨的一個縮放模塊方案并不一定適合所有分辨率的設(shè)備，為了解決這個問題，你可以依據(jù)用戶的設(shè)備的分辨率的不同提供不同的縮放方案
垂直距離
文字間的垂直距離是由line-height，margin，和padding構(gòu)建出來的.
line-height不應(yīng)該帶有單位。比較寬的容器里面文字的行高會大一些，而那些比較窄的容器里面行高相對來說小一些會比較合適。
為那些具有單方向的文本元素添加margin屬性，建議使用margin-bottom.
要遵循距離原則.
垂直節(jié)律
垂直節(jié)律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。
Imagesource建立垂直節(jié)律很簡單。首先，確定你使用的基礎(chǔ)垂直內(nèi)間距和基礎(chǔ)垂直外間距的數(shù)值。然后，為你的容器，文字性元素或者其他相關(guān)元素的單方向的外邊距（或者內(nèi)邊距）應(yīng)用這個數(shù)值。如果你需要制制造更大的間隔的話，應(yīng)用這個數(shù)值的倍數(shù)就好啦!
將基礎(chǔ)間距的數(shù)值設(shè)置成與行高相同的數(shù)值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統(tǒng)的印刷字體設(shè)計的那樣。然而，想要文字擁有垂直節(jié)律不一定需要按照上面的方法來做，只要你設(shè)置了一個基礎(chǔ)間距，并且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。
文字底部對齊基線網(wǎng)格
文字底部對齊基線是垂直節(jié)律的一個更為嚴格的實現(xiàn)。在網(wǎng)頁中，文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統(tǒng)印刷的時候，這個問題一般會通過讓文字對齊基線網(wǎng)格的底部得以解決。
我們也可以通過為較大的文字添加一個負的margin-top和一個較小的margin-bottom，不需要使用基線網(wǎng)格而解決這個問題。
圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網(wǎng)格并不是一個很容易的方式，所以強烈建議你使用一個字體排版基線庫例如Sassline或者MegaType.
注意，垂直節(jié)律只是一個建議，而且基線網(wǎng)格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規(guī)律，也不用在每個元素中都去追求像素級別的完美。
擴展閱讀：
WhyisVerticalRhythmanImportantTypographyPractice?
AligningtypetobaselinetherightwayusingSASS
IsWebTypographyCompletelyBroken?
Single-directionMarginDeclarations
顏色
顏色可以很大程度上的增加視覺辨識度，是字體排版中一個重要的組成部分。
不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用MaterialDesigncolors和FlatUIcolors中提供的顏色板進行顏色選擇.
不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。
遵循相似原則.
不建議使用純黑#000作為你的正文顏色，你可以選擇一個非常灰的顏色如#333.
有時候，使用透明顏色比使用淺色會更好一些，如果你深入的了解，可以點擊這里。
確保文字和背景有較大的對比度，你可以使用這個對比度檢測工具幫助你進行選擇.
####擴展閱讀：
MagicOfCSS：Color
GoogleStyle–Color
下劃線
在印刷品里，永遠都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很丑！PracticalTypography
一般的來說，在網(wǎng)頁中下劃線也會看起來并不美好！幸運的是，background-image就包含一個方法，它可以使得下劃線變得好看一點。下面是AdamSchwartz使用Sass實現(xiàn)的下劃線的例子：
SmartUnderline是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網(wǎng)站都遵循的規(guī)律，如果不這么做的話，可能會引起誤解。
好了，本文到此結(jié)束，如果可以幫助到大家，還望關(guān)注本站哦！
