整合營銷服務(wù)商

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

          免費咨詢熱線:

          html基本操作,看了這些你就能做簡易網(wǎng)頁?

          .HTML基本標(biāo)簽

          HTML(HyperTextMark-upLanguage)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是WWW的描述語言。

          HTML文檔的結(jié)構(gòu)

          • HTML標(biāo)簽由標(biāo)簽、屬性、內(nèi)容組成,屬性與內(nèi)容可選。
          • 包含內(nèi)容的標(biāo)簽以<…>開始,</…>結(jié)束,不包含內(nèi)容的標(biāo)簽可以是如下格式:<…/>
          • 屬性的值盡量用雙引號或單引號修飾
          • 標(biāo)簽中的內(nèi)容可以是其他的標(biāo)簽,稱為原標(biāo)簽的子標(biāo)簽,子標(biāo)簽必須在父標(biāo)簽結(jié)束之前結(jié)束

          2.頁面背景色或背景圖像

          • <body background="back_image.GIF" >

          Hello World!

          </body>

          (網(wǎng)頁背景圖像)

          • <body bgcolor="#FFCCFF">

          Hello World!

          </body>

          (網(wǎng)頁背景色彩)

          3.文本相關(guān)標(biāo)簽

          • 字體、字號:

          標(biāo)題標(biāo)簽<h1>-<h6>,<font>標(biāo)簽。

          • 行的控制

          段落標(biāo)簽<p>,換行標(biāo)簽<br>。

          • 標(biāo)題標(biāo)簽

          <h#> ... </h#>,#=1, 2, 3, 4, 5, 6 (說明:<h1>到<h6>字體大小依次遞減)

          <sub>下標(biāo)文字,<sup>上標(biāo)文字,<del>刪除線。

          段落標(biāo)簽<p>,換行標(biāo)簽<br>。

          • 內(nèi)容分隔<HR>標(biāo)簽

          <HR> 標(biāo)簽用于在頁面上繪制水平線。

          • 圖像標(biāo)簽

          圖像的基本語法:<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >

          • 頁面鏈接<A>標(biāo)簽

          要鏈接到同一目錄 (C:\HTML) 下的頁面,可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

          鏈接到本頁面:

          • 圖像鏈接

          <a href=“http://www.it.com”>

          <img src=“images/adv_2.jpg” border=“0” width="300"height="150">

          </a>

          • 滾動<marquee>標(biāo)簽

          <marquee scrolldelay=“100” direction=“up”>

          滾動文字或圖像

          </marquee>

          說明:scrolldelay:表示滾動延遲時間,默認(rèn)值為90;direction:表示滾動的方向,默認(rèn)為從右向左。

          2.HTML/CSS基礎(chǔ)

          目標(biāo):掌握列表的用法

          使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格

          使用表格相關(guān)標(biāo)簽實現(xiàn)跨行、跨列的復(fù)雜表格

          會使用表單的基本結(jié)構(gòu)制作表單頁面

          會使用各種表單元素實現(xiàn)注冊頁面

          能理解post和get兩種提交方式的區(qū)別

          • 無序列表標(biāo)簽<ul>用于頁面中沒有順序的列舉項。

          格式: <ul type=“”>

          type屬性設(shè)置標(biāo)號的類型,值可以取:

          1 disc :實心圓點

          2 circle :空心圓點

          3 square :實心方塊

          無序列表

          • 有序列表<ol>用于說明頁面中的某些成分,需要按特定的順序排列。有序列表的每項都有連續(xù)的編號。

          格式:<ol type=“” start=“”>

          type設(shè)置標(biāo)號的類型,值可以取:

          1 1:顯示數(shù)字

          2 A:顯示大寫字母

          3 a:顯示小寫字母

          4 I:顯示大寫羅馬數(shù)字

          5 i:顯示小寫羅馬數(shù)字

          有序列表

          • 嵌套列表:一個列表作為另一個列表的一部分,即多層列表。

          嵌套列表

          • 表格<table>應(yīng)用場合

          門戶網(wǎng)站應(yīng)用表格

          • 表格的基本語法

          <table>...</ table >定義表格

          • 如何創(chuàng)建表格

          創(chuàng)建表格

          表格表現(xiàn)

          • 表頭與標(biāo)題

          域名數(shù)量報表的創(chuàng)建

          域名數(shù)量報表

          • 什么是跨行跨列的表格

          1.跨多列的表格

          2.跨多行的表格

          3.如何創(chuàng)建跨行跨列的表格

          • 表格的尺寸和邊框

          品牌商城表的創(chuàng)建

          width用來設(shè)置表格的寬度;height用來設(shè)置表格的高度;border用來設(shè)置表格邊框尺寸大小;bordercolor用來設(shè)置表格邊框顏色。

          品牌商城表

          背景:background屬性用來設(shè)置表格的背景圖片;bgcolor屬性用來設(shè)置表格、行、列的背景色。

          對其方式:align屬性用來設(shè)置表格、行、列的對齊方式。

          • 文本框基本語法

          <input type=“text” value="張三" size="20">

          文本框的建設(shè)

          文本框

          • 密碼框基本語法

          <input type=“password” value=“123456” size=“22”>

          密碼框的建設(shè)

          密碼框,22個字符寬度

          • 單選按鈕基本語法

          <input type="radio" value="男" checked="checked">

          單選按鈕的建設(shè)

          單選按鈕框

          • 復(fù)選框基本語法

          <input type=“checkbox” name="cb2" value="talk">

          • 列表框基本語法

          • 多行文本框基本語法

          <textarea name=“textarea” cols=“40” rows=“6”>內(nèi)容</textarea>

          • 按鈕基本語法

          <input type="reset" name=“reset" value=" 重填 ">

          其他表單元素:<input type=“hidden”/>表單隱藏域

          <input type=“image”/>表單圖片按鈕

          <input type=“file”/>文件瀏覽

          • <label>標(biāo)簽

          <label>標(biāo)簽可以綁定某個表單元素,用于擴展可以相應(yīng)點擊等事件的區(qū)域

          如:當(dāng)點擊復(fù)選框右邊的提示文字時,該復(fù)選框也可被選中。


          內(nèi)容有限,關(guān)于css,div和網(wǎng)頁布局的部分就下次在和大家分享吧!

          TML,即超文本標(biāo)記語言Hyper Text Markup Language


          在HTML中最重要的概念就是標(biāo)簽,或者說每一個你寫的語句都是一個標(biāo)簽。


          通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。


          以下是HTML基本(常用)標(biāo)簽:


          <html></html> 定義 HTML

          <head></head> 頭

          <meta> 元信息

          <title></title> 標(biāo)題

          <link> 鏈接外部資源

          <style></style> 樣式(CSS部分內(nèi)容)

          <body></body> 頁面主體

          <h></h> 標(biāo)題(h1~h6)

          <b></b> 加粗

          <strong></strong> 加粗(兩者效果相同)

          <i></i> 斜體

          <em></em> 斜體(效果相同)

          <u></u> 下劃線

          <del></del> 刪除線

          <ul></ul> 無序列表

          <ol></ol> 有序列表

          <li></li> 列表每一行

          <a></a> 超鏈接(href內(nèi)容為跳轉(zhuǎn)地址)

          <font> 字體

          <sub> 下標(biāo)

          <sup> 上標(biāo)

          <br> 換行

          <p> 段落

          <img> 圖像(src內(nèi)容為資源地址,本地或網(wǎng)絡(luò)都可以)

          <hr> 分割線

          <table></table> 定義表格

          <th></th> 表頭

          <tr></tr> 一行數(shù)據(jù)

          <td></td> 一格數(shù)據(jù)

          <form></form> form表單

          <frame> 框架

          (后兩個初學(xué)用不到,以后會常用)

          高興鐵鐵們能來看html網(wǎng)頁設(shè)計第二期~~~~撒花~~~~~

          哎呀呀~實在是抱歉備注標(biāo)簽我記錯了QAQ

          <!--內(nèi)容打這里-->這個才是備注標(biāo)簽不是//

          首先我們先來學(xué)習(xí)上節(jié)課留下的劇透,分別是:

          1.標(biāo)題標(biāo)簽h1~h6

          有人就說了標(biāo)題標(biāo)簽上次劇透不就只有h1標(biāo)簽嗎?

          嘿嘿,其實他還有兄弟姐妹啦~

          看圖,代碼是從上往下從左往右執(zhí)行的請記住這個順序哦~

          還有,左邊是代碼右邊是網(wǎng)頁上面的效果哦~


          源代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>頁面標(biāo)題</title>

          </head>

          <body>

          <!--標(biāo)題標(biāo)簽是h1~h6-->

          <h1>1</h1><!--最大-->

          <h2>2</h2>

          <h3>3</h3>

          <h4>4</h4>

          <h5>5</h5>

          <h6>6</h6><!--最小-->

          </body>

          </html>

          如圖所示,h1標(biāo)簽是最大的,h6標(biāo)簽是最小的

          是不是很簡單呀,現(xiàn)在已經(jīng)學(xué)會了一個知識點了哦~


          2.段落標(biāo)簽 p標(biāo)簽

          源代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <!--千萬要記住內(nèi)容是寫在標(biāo)簽里面的哦~-->

          <!--段落標(biāo)簽是獨占一條的哦-->

          <p>第一條p標(biāo)簽</p>

          <p>第二條p標(biāo)簽</p>

          <p>第三條p標(biāo)簽</p>

          </body>

          </html>

          3.鏈接標(biāo)簽 a標(biāo)簽

          鏈接標(biāo)簽是什么?顧名思義就是一個鏈接看代碼:

          <a href="https://www.baidu.com">百度</a>

          href是什么東西啊?是a標(biāo)簽的屬性啦~里面用來輸入你需要跳轉(zhuǎn)到的網(wǎng)頁的鏈接

          屬性里面的東西是不會出現(xiàn)在網(wǎng)頁上面的出現(xiàn)的只有在a標(biāo)簽里面的內(nèi)容哦

          當(dāng)我點擊百度這兩個字后就給我跳轉(zhuǎn)到了我們href屬性里面的https://www.baidu.com

          當(dāng)然我們也可以跳轉(zhuǎn)到我們自己制作的網(wǎng)頁上面但要求是同一個項目下面的網(wǎng)頁

          是不是很有趣~

          看視頻:

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

          視頻中我們點擊鏈接后就跳轉(zhuǎn)到了山這個網(wǎng)頁出現(xiàn)了一張山的圖片,是不是有點小意思~


          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          </head>

          <body>

          <a href="new_file3.html">跳轉(zhuǎn)到山的網(wǎng)頁</a><!--只有同一個項目下面的網(wǎng)頁才能相互跳轉(zhuǎn)-->

          </body>

          </html>


          4.圖像標(biāo)簽 img標(biāo)簽

          圖像標(biāo)簽標(biāo)簽如其意,就是用來上傳圖像的一個標(biāo)簽~~

          我們這里介紹一下img的兩個屬性:

          <img src="img/OIP-C.jpg" alt="山"/>

          src就是用來放圖片的地址的,他會根據(jù)地址去找圖片然后把圖片放到網(wǎng)頁上面。

          alt有什么用啊就是當(dāng)圖片顯示失敗的時候就會顯示alt里面的文字

          看視頻:

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

          我們把圖片的地址破壞后,就會顯示一個圖片錯誤的圖標(biāo)和alt里面的內(nèi)容

          怎么拖圖片到img文件下,老師~~~我不知道

          看視頻

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

          嘿嘿就直接把文件拖進來就ok了是不是很簡單~

          okk,好快啊怎么一下就學(xué)完了今天的知識點~~~

          嘻嘻今天可是有作業(yè)的~

          請根據(jù)下面的網(wǎng)頁仿寫一下:

          完成后作業(yè)發(fā)再評論區(qū)哦,有什么不懂的可以留言包回答的。

          加油呀,每天學(xué)一點爭取做出屬于自己的一個網(wǎng)頁~

          上一期


          主站蜘蛛池模板: 国产亚洲情侣一区二区无码AV | 国产乱码精品一区二区三| 亚洲欧美日韩一区二区三区在线| 亲子乱av一区区三区40岁| 天堂va视频一区二区| 美女福利视频一区二区| 国产成人无码一区二区在线观看 | 日本韩国一区二区三区| 中文字幕久久亚洲一区| 无码人妻精品一区二区三区久久| 99久久精品国产一区二区成人| 亚洲av无码一区二区三区四区| 国产av夜夜欢一区二区三区| 国产在线精品一区二区夜色| 亚洲av无一区二区三区| 本免费AV无码专区一区| 日韩国产精品无码一区二区三区 | 日本一区二区三区中文字幕| 午夜福利一区二区三区在线观看 | 成人区人妻精品一区二区不卡网站| 亚洲国产精品一区二区久久| 风间由美在线亚洲一区| 亚洲中文字幕无码一区| 成人在线观看一区| 国产一区二区电影在线观看| 成人免费视频一区| 国产suv精品一区二区33| 爆乳无码AV一区二区三区| 日本在线视频一区| 日韩一区二区在线观看视频 | 午夜视频久久久久一区| 91精品一区二区综合在线| 国产91一区二区在线播放不卡 | 丝袜美腿高跟呻吟高潮一区| 成人免费观看一区二区| 久久se精品一区精品二区| 人妻精品无码一区二区三区 | 亚洲一区二区在线免费观看| 一区二区三区免费视频观看| 亚洲高清一区二区三区电影 | 精品人体无码一区二区三区|