整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          每個(gè)非網(wǎng)站開(kāi)發(fā)人員都應(yīng)該了解的21個(gè)HTML基礎(chǔ)知識(shí)

          .標(biāo)題

          標(biāo)題可能是最容易學(xué)習(xí)的代碼之一,并考慮到 它們對(duì)您的SEO至關(guān)重要,這是一件好事。共有六種不同類型,如下所示。要?jiǎng)?chuàng)建標(biāo)題,只需將文本包裝在所選的標(biāo)題標(biāo)簽中:

          2.段落

          沒(méi)有一段要詳細(xì)說(shuō)明該消息的標(biāo)題會(huì)是什么?要獲得類似于您現(xiàn)在正在閱讀的段落,只需將文本包裝在<p>標(biāo)記中,如下例所示,并且別忘了用</ p>標(biāo)記將其關(guān)閉!

          <p>嘿,我是一個(gè)段落!</ p>

          嘿,我是一段!

          3.鏈接

          如果不將您本已豐富的內(nèi)容鏈接到其他相關(guān)文章和網(wǎng)站文章,則入站營(yíng)銷就算什么。嘗試使用以下<a>代碼在段落中鏈接單詞或短語(yǔ):

          <a href="http://www.impactbnd.com">讓我們?cè)L問(wèn)IMPACT的真棒網(wǎng)站!</a>

          奇跡般地變成:讓我們?cè)L問(wèn)IMPACT的真棒網(wǎng)站!

          代碼語(yǔ)句的href部分指定了您要鏈接訪問(wèn)的目標(biāo)網(wǎng)站地址。

          4.圖片

          這很有趣。圖像使一切變得更好,它們使您的內(nèi)容對(duì)讀者更具吸引力。插入這樣的圖像:

          <img class =“ lazy” data-src =“ http://cdn2.hubspot.net/hubfs/145335/Cute-Puppy.jpg” alt =“ Cute-Puppy” style =“ width:500px; height:333px; “>

          image標(biāo)簽為空,因?yàn)樗鼉H包含屬性,因此不需要關(guān)閉。上面列出的屬性包括“ class =“ lazy” data-src“或圖像URL。我還包括了圖像替代文本(對(duì)于SEO而言很重要),以及一些樣式屬性(寬度和高度)。

          您可以根據(jù)需要自定義圖像。哦,對(duì)于你們那里所有的小狗愛(ài)好者-像我一樣-這是我上面編碼的實(shí)際圖像:

          5.換行

          換行符也是一個(gè)空元素,因此不需要將其關(guān)閉。換行符基本上是用<br>創(chuàng)建的兩行文本之間的有意空格。

          <p>在此句子下放置換行符。
          <br>
          在此句子上方放置換行符。</ p>

          在此句子下放置換行符

          在此句子上方放置換行符。

          轉(zhuǎn)換完上述HTML后,與使用<p>標(biāo)記分隔兩個(gè)段落相比,您可以說(shuō)第一行和第二行之間的空間較小。添加換行符有助于使句子位于同一段落的不同行中。

          6.大膽而堅(jiān)強(qiáng)

          為了使內(nèi)容醒目,有兩個(gè)有效的代碼元素。但是,我的開(kāi)發(fā)人員告訴我<strong>的使用量遠(yuǎn)超過(guò)<b>。不要忘記關(guān)閉<strong>標(biāo)簽!</ strong>

          <strong>將整個(gè)句子加粗!</ strong>
          或僅<strong>加粗</ strong>一個(gè)字!

          大膽的整句話!
          或只加粗一個(gè)字!

          7.斜體和強(qiáng)調(diào)

          斜體和強(qiáng)調(diào)文本與粗體和強(qiáng)文本相似。有兩個(gè)代碼元素,但一個(gè)元素比另一個(gè)元素使用更多。在這種情況下,<i>將起作用,但是<em>更常用。

          <em>這句話很漂亮</ em>

          這句話很漂亮。

          8.下劃線

          粗體,斜體,并加下劃線。這一個(gè)和其他兩個(gè)一樣容易。只需將要加下劃線的文本包裝在<u>標(biāo)記中,例如

          <u>看,我們可以加下劃線!</ u>

          看,我們可以強(qiáng)調(diào)!

          9.有序列表

          有序列表和無(wú)序列表之間有區(qū)別。有序列表包含數(shù)字,而無(wú)序列表包含項(xiàng)目符號(hào)。它們都遵循相同的結(jié)構(gòu),但是一個(gè)字母會(huì)發(fā)生變化。

          這是有序列表的代碼語(yǔ)句。<ol>是整個(gè)“有序列表”,而<li>是一個(gè)“列表項(xiàng)”。您可以根據(jù)需要包括任意數(shù)量的列表項(xiàng)。

          10.無(wú)序列表

          從一個(gè)有序列表切換到一個(gè)無(wú)序列表,只需要更改一個(gè)字母即可。

          11.上標(biāo)

          要在文本中插入上標(biāo)格式,請(qǐng)將要顯示為上標(biāo)的文本包裝在<sup>標(biāo)記中。</ sup>您將得到類似這樣的結(jié)果。

          商標(biāo)應(yīng)使用上標(biāo)<sup> TM </ sup>書(shū)寫(xiě)。

          商標(biāo)應(yīng)使用上標(biāo)TM書(shū)寫(xiě)。

          12.下標(biāo)

          如果您知道如何上標(biāo),那么您應(yīng)該知道如何下標(biāo)。只需使用<sub>標(biāo)記</ sub>即可獲得這樣的文本。

          有時(shí),引文用下標(biāo)寫(xiě)成。

          有時(shí),引文用下標(biāo)寫(xiě)成。

          13.水平線

          是否要拆分頁(yè)面或文章的各個(gè)部分?嘗試一條水平線!只需使用空元素(無(wú)需關(guān)閉它)<hr>。

          在我和句子2之間插入一條水平線。
          <hr>
          嗨,我是句子2。


          在我和句子2之間插入一條水平線。


          嗨,我的句子是2。

          14.標(biāo)記或突出顯示的文本

          我敢打賭,您不知道可以通過(guò)HTML代碼突出顯示文本,是嗎?太酷了,太容易了。將要在<mark>標(biāo)記</ mark>中突出顯示的文本換行,以便獲得酷炫的突出功能。

          僅突出顯示<mark>最重要的注釋</ mark>。

          僅突出顯示 最重要的注意事項(xiàng)。

          15.刪除(貫穿)文本

          如果您想在文本上顯示穿越效果(也許您創(chuàng)建了一個(gè)任務(wù)列表,并希望在執(zhí)行過(guò)程中對(duì)每個(gè)任務(wù)進(jìn)行劃線),則有相應(yīng)的代碼。嘗試使用<del>標(biāo)記刪除完整的句子甚至一個(gè)單詞。</ del>

          <del>喂狗。</ del>
          <del>寫(xiě)我的博客文章。</ del>
          做飯。

          喂狗。
          寫(xiě)我的博客文章。
          做晚飯。

          16.短期和長(zhǎng)期報(bào)價(jià)

          到目前為止,您可能想知道我如何將所有示例都放在文本框中。好吧,驚喜!也有一個(gè)代碼。它實(shí)際上稱為塊引用或長(zhǎng)引號(hào)。您可以在下面看到長(zhǎng)引號(hào)和短引號(hào)(普通引號(hào))之間的區(qū)別。

          <blockquote>與其余示例一樣,所有這些文本都將以blockquote出現(xiàn)。</ blockquote>
          <q>之所以引用這是因?yàn)槲沂谴舐曊f(shuō)出來(lái)。</ q>

          與其余示例一樣,所有這些文本都將以大括號(hào)顯示。
          我引用此內(nèi)容是因?yàn)槲乙舐曊f(shuō)出來(lái)。

          17.設(shè)置特定字體

          接下來(lái)的幾個(gè)會(huì)變得有些棘手,所以請(qǐng)嘗試和我在一起。現(xiàn)在,您知道如何創(chuàng)建標(biāo)題,段落和樣式化的文本,這對(duì)您知道可以使用元素“字體家族”輕松更改字體很有用。

          不要忘記所有小的細(xì)節(jié),例如等號(hào),引號(hào)和分號(hào)。查看以下示例。

          <h4 style =“ font-family:Georgia;”>我想將此標(biāo)題更改為Georgia字體。</ h4>

          <p style =“ font-family:Verdana;”>我想將此段落更改為Verdana字體。</ p>

          我想將此標(biāo)題更改為Georgia字體。

          我想將此段落更改為Verdana字體。

          18.設(shè)置特定的文本顏色

          該代碼使用與上一個(gè)示例相同的代碼類型,但是使用“顏色”代替使用字體家族。您可以嘗試使用實(shí)際的顏色(藍(lán)色,紅色,橙色等),也可以插入十六進(jìn)制顏色以自定義品牌的文字。

          <p style =“ color:blue;”>今天的天空真的是藍(lán)色。</ p>
          <p style =“ color:#ff471a;”>火是橘紅色的</ p>

          今天的天空真的很藍(lán)。

          火是橘紅色的。

          19.設(shè)置特定的文字大小

          同樣,此代碼使用相同的基本代碼邏輯,但使用元素“ font-size”。將字體大小設(shè)置為像素或px。

          <p style =“ font-size:36px;”>將此段落設(shè)置為36字體。</ p>
          <p style =“ font-size:12px;”>將此段落設(shè)置為12字體。</ p>

          使此段落大小為36字體。

          使此段落大小為12字體。

          20.設(shè)置特定的文本對(duì)齊方式

          左,居中,右或?qū)R。您如何看待您的文字?使用“文本對(duì)齊”以任何方式進(jìn)行設(shè)置。

          <p style =“ text = align:center;”>此段落應(yīng)居中。</ p>
          <p style =“ text-align:right;”>此段落應(yīng)右對(duì)齊。</ p>

          本段應(yīng)居中。

          本段應(yīng)右對(duì)齊。

          21.桌子

          我把最好的留在了最后!好吧,我不知道這是否是最好的,但我認(rèn)為這很酷。用于創(chuàng)建表的HTML代碼可能會(huì)變得非常復(fù)雜,但是如果您掌握了基本知識(shí),那么您應(yīng)該不會(huì)有太大的問(wèn)題。

          我將在下面顯示如何創(chuàng)建一個(gè)簡(jiǎn)單表。

          為了易于理解,<tr>代表表行,而<td>代表表數(shù)據(jù)。請(qǐng)記住,您可以更改字體,文本大小,文本顏色,文本對(duì)齊方式等。

          開(kāi)始編碼!

          您剛剛閱讀的21個(gè)代碼非常不錯(cuò),可以開(kāi)始練習(xí)來(lái)增強(qiáng)HTML技能。

          avaScript基礎(chǔ)概念

          JS的組成:

          1.ECMAScript:Js語(yǔ)法

          2.DOM:文檔對(duì)象模型 , 文檔:html文檔 ,操作html文檔 (操作html文檔的工具)

          3.BOM:瀏覽器對(duì)象模型 , 操作瀏覽器的工具

          JS的三種書(shū)寫(xiě)方式

          行內(nèi)式,內(nèi)嵌式,外部鏈接

          JavaScript輸入·輸出語(yǔ)句

          alert(msg) 瀏覽器彈出警告框

          consle.log(msg) 瀏覽器控制臺(tái)打印輸出信息

          prompt(info) 瀏覽器彈出輸入框 用戶可以輸入信息

          我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我:前端,即可免費(fèi)獲取。

          變量的概念

          通俗:變量是用于存放數(shù)據(jù)的容器。 我們通過(guò) 變量名 獲取數(shù)據(jù),甚至數(shù)據(jù)可以修改。

          變量理解:變化的量,變化的內(nèi)容,變化的數(shù)據(jù)

          變量存儲(chǔ)數(shù)據(jù)理解:程序運(yùn)行過(guò)程中的數(shù)據(jù)存儲(chǔ)在內(nèi)存中,但是內(nèi)存比較大,為了方便管理,所以將內(nèi)存分成一個(gè)一個(gè)的盒子(變量)來(lái)存儲(chǔ)

          變量的使用

          1.聲明變量 var 變量名;var age;(聲明一個(gè) 名稱為age 的變量)

          2.變量的賦值 var 變量名 = 值; var age = 18; 聲明變量age同時(shí)賦值為 18

          變量案例

          var myname = '旗木卡卡西'; // 字符串
          var address = '火影村';
          var age = 30; // 數(shù)字
          var email = 'kakaxi@itcast.cn';
          var gz = 2000;
          console.log(myname);
          console.log(address);
          console.log(age);
          console.log(email);
          console.log(‘gz’); // gz
          console.log(gz); // 2000
          

          注意:

          • 變量賦值時(shí),值如果是字符串需要添加’’,“”
          • 每行代碼結(jié)束,都需要添加;
          • 變量在使用時(shí),不能添加引號(hào) (定義,聲明變量的時(shí)候,沒(méi)有引號(hào),使用的時(shí)候自然也不能添加引號(hào))
            案例2:
          // 1. 用戶輸入姓名 存儲(chǔ)到一個(gè) myname的變量里面
          var myname = prompt('請(qǐng)輸入您的名字');
          // prompt 做的事情:
          // (1). 彈出輸入框 , 用戶輸入內(nèi)容:zs
          // (2). 將用戶輸入內(nèi)容返回 ,相當(dāng)于 :var myname = 'zs';
          // 2. 輸出這個(gè)用戶名
          alert(myname); // zs
          

          變量命名規(guī)范

          規(guī)則

          由字母(A-Za-z)、數(shù)字(0-9)、下劃線(_)、美元符號(hào)( $ )組成,如:usrAge, num01, _name ***

          嚴(yán)格區(qū)分大小寫(xiě)。var app; 和 var App; 是兩個(gè)變量

          不能 以數(shù)字開(kāi)頭。 18age 是錯(cuò)誤的

          不能 是關(guān)鍵字、保留字。例如:var、for、while

          變量名必須有意義。 MMD BBD nl → age

          遵守駝峰命名法。首字母小寫(xiě),后面單詞的首字母需要大寫(xiě)。 myFirstName

          推薦翻譯網(wǎng)站: 有道 愛(ài)詞霸

          變量案例-交換兩個(gè)變量

          // js 是編程語(yǔ)言有很強(qiáng)的邏輯性在里面: 實(shí)現(xiàn)這個(gè)要求的思路 先怎么做后怎么做 
          // 1. 我們需要一個(gè)臨時(shí)變量幫我們
          // 2. 把a(bǔ)pple1 給我們的臨時(shí)變量 temp 
          // 3. 把a(bǔ)pple2 里面的蘋(píng)果給 apple1 
          // 4. 把臨時(shí)變量里面的值 給 apple2 
          var temp; // 聲明了一個(gè)臨時(shí)變量為空
          var apple1 = '青蘋(píng)果';
          var apple2 = '紅蘋(píng)果';
          temp = apple1; // 把右邊給左邊
          apple1 = apple2;
          apple2 = temp;
          console.log(apple1);
          console.log(apple2);
          

          簡(jiǎn)單數(shù)據(jù)類型
          JavaScript 中的簡(jiǎn)單數(shù)據(jù)類型及其說(shuō)明如下:


          數(shù)字型范圍:JavaScript中數(shù)值的最大和最小值

          alert(Number.MAX_VALUE); // 1.7976931348623157e+308 (10的正308次方)
          alert(Number.MIN_VALUE); // 5e-324 5e-324 (10的負(fù)324次方)

          數(shù)字型三個(gè)特殊值

          alert(Infinity); // Infinity
          alert(-Infinity); // -Infinity
          alert(NaN); // NaN ***
          //課堂代碼:
          // 5. 無(wú)窮大
          console.log(Number.MAX_VALUE * 2); // Infinity 無(wú)窮大 
          // 6. 無(wú)窮小
          console.log(-Number.MAX_VALUE * 2); // -Infinity 無(wú)窮大
          // 7. 非數(shù)字
          console.log('pink老師' - 100); // NaN:字符串是無(wú)法與數(shù)字進(jìn)行運(yùn)算的,所以結(jié)果是一個(gè)非數(shù)字
        1. Infinity ,代表無(wú)窮大,大于任何數(shù)值
        2. -Infinity ,代表無(wú)窮小,小于任何數(shù)值
        3. NaN ,Not a number,代表一個(gè)非數(shù)值
        4. isNaN
          用來(lái)判斷一個(gè)變量是否為非數(shù)字的類型,返回 true 或者 false

          var usrAge = 21;
          var isOk = isNaN(userAge);
          console.log(isNum); // false ,21 不是一個(gè)非數(shù)字
          var usrName = "andy";
          console.log(isNaN(userName)); // true ,"andy"是一個(gè)非數(shù)字

          字符串型 String
          字符串型可以是引號(hào)中的任意文本,其語(yǔ)法為 雙引號(hào) “” 和 單引號(hào)’’

          var strMsg = "我愛(ài)北京天安門(mén)~"; // 使用雙引號(hào)表示字符串
          var strMsg2 = '我愛(ài)吃豬蹄~'; // 使用單引號(hào)表示字符串
          // 常見(jiàn)錯(cuò)誤
          var strMsg3 = 我愛(ài)大肘子; // 報(bào)錯(cuò),沒(méi)使用引號(hào),會(huì)被認(rèn)為是js代碼,但js沒(méi)有這些語(yǔ)法

          字符串引號(hào)嵌套
          JS 可以用單引號(hào)嵌套雙引號(hào) ,或者用雙引號(hào)嵌套單引號(hào) (外雙內(nèi)單,外單內(nèi)雙)

          var strMsg = '我是"高帥富"程序猿'; // 可以用''包含""
          var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含''
          // 常見(jiàn)錯(cuò)誤
          var badQuotes = 'What on earth?"; // 報(bào)錯(cuò),不能 單雙引號(hào)搭配

          字符串轉(zhuǎn)義符

          類似HTML里面的特殊字符,字符串中也有特殊字符,我們稱之為轉(zhuǎn)義符。

          轉(zhuǎn)義符都是 \ 開(kāi)頭的,常用的轉(zhuǎn)義符及其說(shuō)明如下:

          字符串長(zhǎng)度

          • 字符串是由若干字符組成的,這些字符的數(shù)量就是字符串的長(zhǎng)度
          • 通過(guò)字符串的 length 屬性可以獲取整個(gè)字符串的長(zhǎng)度
          var strMsg = "我是帥氣多金的程序猿!";
           alert(strMsg.length); // 顯示 11

          字符串拼接

          • 多個(gè)字符串之間可以使用 + 進(jìn)行拼接,其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
          • 拼接前會(huì)把與字符串相加的任何類型轉(zhuǎn)成字符串,再拼接成一個(gè)新的字符串
          //1.1 字符串 "相加"
          alert('hello' + ' ' + 'world'); // hello world
          //1.2 數(shù)值字符串 "相加"
          alert('100' + '100'); // 100100
          //1.3 數(shù)值字符串 + 數(shù)值
          alert('11' + 12); // 1112 
          //以上的字符串拼接都沒(méi)有意義,一般我們字符串會(huì)與變量進(jìn)行拼接
          

          原文鏈接:https://blog.csdn.net/H_eartbeat/article/details/103102782

          TML技術(shù)是網(wǎng)站建設(shè)必不可少的,今天小編就來(lái)分享一下HTML5的一部分基礎(chǔ)知識(shí)。

          一、 HTML5——重點(diǎn)文本:就是純字符

          超文本:在純字符中嵌入樣式、圖片、音頻、視頻、超鏈接等內(nèi)容

          Hyper Text Markup Language,超文本標(biāo)記語(yǔ)言,就是52個(gè)標(biāo)記嵌入在純文本中,實(shí)現(xiàn)超文本效果的語(yǔ)言。如:

          <marquee>hello</marquee>

          注意:作為一門(mén)計(jì)算機(jī)語(yǔ)言,HTML與Java、C、PHP不同,沒(méi)有循環(huán)、選擇等基本語(yǔ)言結(jié)構(gòu),只有純文本和52個(gè)標(biāo)簽。

          二、 HTML語(yǔ)法——重點(diǎn)

          (1)一篇HTML文檔就是一個(gè)文本文檔,其中包含 “純文本”+“標(biāo)簽”

          (2)HTML中的標(biāo)簽分為兩種:

          雙標(biāo)記標(biāo)簽: <標(biāo)簽名>......</標(biāo)簽名>

          單標(biāo)記標(biāo)簽: <標(biāo)簽名/> 單標(biāo)記標(biāo)簽中不能包含內(nèi)容

          (3)標(biāo)簽之間可以嵌套,但不能交叉

          (4)標(biāo)簽名不區(qū)分大小寫(xiě),但有個(gè)版本的HTML要求全小寫(xiě),推薦全用小寫(xiě)

          (5)標(biāo)簽可以聲明屬性,屬性有屬性名和屬性值,屬性值需要使用單引號(hào)或雙引號(hào)括起來(lái)

          (6)不同的標(biāo)簽具有不同的屬性,所有的標(biāo)簽都具備下列四個(gè)屬性:

          ·id:整個(gè)文檔每個(gè)標(biāo)簽可以聲明一個(gè)唯一的id號(hào)

          ·style:為元素指定CSS樣式

          ·class:指定元素所屬的類型

          ·title:指定標(biāo)簽的彈出式提示語(yǔ)

          三、HTML常用標(biāo)簽

          四、HTML文件的基本結(jié)構(gòu)

          (1)文檔類型聲明:HTML有不同的版本,如html1.0 html2.0 html3.0 html4.0(strict/transitional) xhtml(strict/transitional/frameset) html5,不同版本的HTML中可以使用標(biāo)簽的數(shù)量以及標(biāo)簽的屬性是不同的,且會(huì)影響到瀏覽器對(duì)CSS和Java的解釋執(zhí)行。

          (2)<html>

          <head>

          </head>

          <body>

          </body>

          </html>

          好了,以上就是網(wǎng)頁(yè)搭建中HTML基礎(chǔ)知識(shí)整理歸納,希望對(duì)剛?cè)腴T(mén)的網(wǎng)頁(yè)HTML新手有更大幫助,感謝大家的支持,后續(xù)會(huì)為大家分享更多關(guān)于網(wǎng)頁(yè)制作經(jīng)驗(yàn)和操作知識(shí)!


          主站蜘蛛池模板: av无码免费一区二区三区| 久久久久人妻一区精品| 一区高清大胆人体| 女女同性一区二区三区四区| 亚洲高清偷拍一区二区三区| 一区二区三区精密机械| 无码人妻一区二区三区在线 | 99精品国产一区二区三区2021| 国产韩国精品一区二区三区| 亚洲av无码一区二区三区在线播放| 国产婷婷色一区二区三区| 日本一区二区在线不卡| 风流老熟女一区二区三区| 日韩在线观看一区二区三区| 国产成人欧美一区二区三区| 亚洲欧洲无码一区二区三区| 91一区二区视频| 精品亚洲AV无码一区二区三区| 久久精品一区二区免费看| 久久久一区二区三区| 久久精品亚洲一区二区| 久久久精品人妻一区二区三区蜜桃| 国产免费一区二区三区在线观看| 亚洲日韩精品一区二区三区| 一夲道无码人妻精品一区二区| 制服丝袜一区二区三区| 无码人妻精品一区二区| 少妇无码一区二区三区| 国产精品视频分类一区| 国产成人精品一区二区A片带套| 无码喷水一区二区浪潮AV| 精品成人一区二区三区免费视频| 精品一区二区三区在线播放| 国产激情一区二区三区| 激情一区二区三区| 国产手机精品一区二区| 国产无人区一区二区三区| 红杏亚洲影院一区二区三区| 亚洲AV无码一区东京热久久| 精品黑人一区二区三区| 国产精品一区二区三区高清在线|