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

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

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

          HTML基礎(chǔ)篇筆記

          、系統(tǒng)結(jié)構(gòu):

          ① B/S架構(gòu):Browser/Server(瀏覽器/服務(wù)器的交互形式。)

          • Browser支持的語言:HTML、CSS、JavaScript;S是服務(wù)器端Server支持的語言有:C、C++、Java等
          • B/S架構(gòu)系統(tǒng)有什么優(yōu)點(diǎn)和缺點(diǎn)? 優(yōu)點(diǎn):升級(jí)方便,只升級(jí)服務(wù)器代碼即可,維護(hù)成本低。缺點(diǎn):速度慢、體驗(yàn)不好、界面不炫酷
          • 企業(yè)大部分使用B/S架構(gòu)
          • B/S架構(gòu)的系統(tǒng)代表有:京東、百度、天貓等

          ② C/S架構(gòu):Client/Server(客戶端/服務(wù)器的交互形式。)

          • C/S架構(gòu)的優(yōu)點(diǎn)和缺點(diǎn)?
          • 優(yōu)點(diǎn):速度快、體驗(yàn)好、界面炫酷(娛樂性多數(shù)是C/S架構(gòu))
          • 缺點(diǎn):升級(jí)麻煩、維護(hù)成本較高。
          • C/S架構(gòu)的系統(tǒng)代表有:QQ、微信、支付寶等

          2、 HTML概述

          ① 什么是HTML?② 怎么開發(fā)HTML?③ 怎么運(yùn)行HTML?

          • ① HTML:Hyper Text Markup Language(超文本標(biāo)記語言)

          ?由大量的標(biāo)簽組成,每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。

          ?超文本:圖片、聲音、視頻等

          • ② HTML開發(fā)使用普通的文本編輯器就行,創(chuàng)建擴(kuò)展名是.html或.htm

          ?編輯器有:HBuilder、vscode等

          ③ 直接采用瀏覽器打開HTML文件就能運(yùn)行

          ④ HTML是誰制定的?

          • ④ W3C:世界萬維網(wǎng)聯(lián)盟

          ?W3C制定了HTML的規(guī)范:每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼

          ?HTML規(guī)范目前最高的版本是:HTML5.0,簡(jiǎn)稱H5

          ?我們現(xiàn)在主要學(xué)的HTML4.0(基本用法)

          • 為了方便中國(guó)Web前端程序員開發(fā),提供了大量幫助文檔。為開發(fā)提供方便。

          ?w3school:先出現(xiàn)的,和W3C無關(guān)

          ?w3cschool:后出現(xiàn)的,和W3C無關(guān)

          ?W3C制定了很多規(guī)范:HTML/XML/http協(xié)議/https協(xié)議……

          3、 第一個(gè)HTML

          4、基本標(biāo)簽

          • p:段落標(biāo)記
          • h1~h6:標(biāo)題字,與word的標(biāo)題字相同
          • br:換行標(biāo)記(獨(dú)目標(biāo)記)
          • hr:橫線(獨(dú)目標(biāo)記)
          • color:橫線顏色
          • width:橫線寬度(可以px和%)
          • pre:預(yù)留格式
          • del:刪除字
          • ins:插入字(有下劃線)
          • b:粗體字
          • i:斜體字
          • sup:上標(biāo)
          • sub:下標(biāo)
          • font:字體標(biāo)簽
          • color:字體顏色
          • size:字體大小(1~7)

          頁面效果圖:

          5、實(shí)體符號(hào):為了避免和標(biāo)簽沖突,所以需要使用實(shí)體符號(hào)

          • <:<
          • >:>
          • 空格:
          • 注:html中按多個(gè)空格鍵,在網(wǎng)頁中只顯示一個(gè)空格

          6、HTML表格

          • table:表格
          • tr:行
          • td:列
          • th:列(比td加粗居中)
          • 合并行:rowspan(一個(gè)格占兩個(gè)位置)
          • 注:row合并的時(shí)候,刪除下面的單元格
          • 合并列:colspan(一個(gè)格占兩個(gè)位置)
          • 注:col合并的時(shí)候,刪除哪個(gè)沒有要求

          7、thead、tbody、tfoot標(biāo)簽

          • thead、tbody、tfoot不是必須的,便于后期JS編寫。

          8、body的背景顏色和背景圖片

          • bgcolor:背景色
          • background:背景圖片
          • 背景圖片在背景色的上面

          9、img標(biāo)簽

          • src:圖片的路徑
          • 只設(shè)置width,height會(huì)等比例縮放
          • 只設(shè)置height,不起作用
          • title:鼠標(biāo)懸停時(shí)顯示的信息
          • alt:設(shè)置圖片加載失敗時(shí)顯示的提示信息

          10、 超鏈接或熱鏈接

          • href:hot references 熱引用;
          • 后面一定是一個(gè)資源的地址。
          • 后面的路徑可以是絕對(duì)路徑也可以是相對(duì)路徑,可以是網(wǎng)絡(luò)某個(gè)資源的路徑。
          • target:
          • _blank:新窗口
          • _self:當(dāng)前窗口(默認(rèn))
          • _top:頂級(jí)窗口
          • _parent:父級(jí)窗口

          超鏈接的作用:

          通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。

          11、request與response的概念

          • request:瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)(請(qǐng)求)
          • B --》S
          • response:服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)(響應(yīng))
          • S--》B

          12、列表

          • 有序列表:ol
          • type:1、A、a、I、i
          • 無序列表:ul
          • type:circle(○)、square(□)、disc(●)

          13、表單(重點(diǎn))

          • action:寫提交的URL地址
          • method:默認(rèn)get;還有post
          • 表單有什么用?
          • 答:收集用戶的信息。表單展現(xiàn)之后,用戶填寫表單,點(diǎn)擊提交。 (submit)
          • 怎么畫一個(gè)表單?
          • 答:用form標(biāo)簽
          • 一個(gè)網(wǎng)頁可以有多個(gè)表單form
          • 表單最終是需要提交數(shù)據(jù)給服務(wù)器的,form標(biāo)簽有一個(gè)action屬性,這個(gè)屬性用來指定服務(wù)器地址。
          • action屬性用來指定數(shù)據(jù)提交給哪個(gè)服務(wù)器
          • action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請(qǐng)求(request)
          • http://192.168.111.3:8080/oa/save 這是請(qǐng)求路徑,
          • 表單提交數(shù)據(jù)最終提交給192.168.111.3機(jī)器上的8080端口對(duì)應(yīng)的軟件。
          • input中的type取值:
          • radio:?jiǎn)芜x控件
          • checkbox:多選控件
          • submit:提交控件
          • reset:重置控件
          • button:普通控件
          • text:文本控件
          • password:密碼控
          • file:文件控件
          • 上傳文件專用
          • hidden:隱藏域
          • 網(wǎng)頁上看不到,但是表單提交的時(shí)候數(shù)據(jù)會(huì)自動(dòng)提交給服務(wù)器。
          • input中的value屬性用來指定按鈕上顯示的文本信息。
          • 超鏈接a與表單form的區(qū)別?
          • 答:表達(dá)form可以收集信息,而超鏈接a無法收集信息。
          • 表單提交里面的按鈕input中屬性必須定義name,不然提交不了。
          • 表單是以什么格式提交數(shù)據(jù)給服務(wù)器的?
          • 格式:action?name=value&name=value&name=value..
          • HTTP協(xié)議規(guī)定的,必須以這種格式提交給服務(wù)器
          • java中String split('&');
          • 重點(diǎn)強(qiáng)調(diào):表單項(xiàng)寫了name屬性的,一律會(huì)提交給服務(wù)器。不想提交就不要寫name屬性。
          • 文本框和密碼框的value不需要程序員指定,用戶輸入什么value就是什么。
          • 當(dāng)name沒有寫的時(shí)候,該項(xiàng)不會(huì)提交給服務(wù)器
          • 但是當(dāng)value沒有寫的時(shí)候,value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是:String s = "";

          效果圖:

          地址欄提交的信息:

          ?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性;&position=ln&myFile=&myHidden=

          14、表單的說明:

          • ① 用戶手動(dòng)輸入的文本框,都不需要給value賦值
          • ② textarea沒有value屬性
          • ③ radio、checkbox默認(rèn)選項(xiàng)需要使用,checked="checked"(簡(jiǎn)寫:checked)
          • ④ select中的option屬性:? selected="selected" 為默認(rèn)選中 ?size:顯示條目數(shù)量
          • multiple="multiple" 支持多選(select的屬性)
          • ⑤ input的屬性
          • readonly和disabled:
          • 都是只讀不能修改
          • 數(shù)據(jù)不會(huì)提交
          • maxlength:設(shè)置文本框中輸入的字符數(shù)量。

          15、HTML中的結(jié)點(diǎn)

          • 在HTML文檔中,任何元素(結(jié)點(diǎn))都有id屬性,id屬性是該節(jié)點(diǎn)的唯一標(biāo)識(shí)。所以在同一個(gè)HTML文檔中id值不能重復(fù)。
          • 注意:表單提交數(shù)據(jù)的時(shí)候,只和name有關(guān)系,和id無關(guān)
          • id有什么作用?
          • javascript語言:可以對(duì)HTML文檔中的任何節(jié)點(diǎn)進(jìn)行增刪改操作。
          • 獲取節(jié)點(diǎn)時(shí),通常通過id來獲取節(jié)點(diǎn)
          • HTML文檔是一棵樹,樹上有很多節(jié)點(diǎn),每一個(gè)節(jié)點(diǎn)都有唯一的id(DOM樹)

          16、div和span

          • div和span有什么用?
          • div和span都可以稱為圖層。
          • 有什么用?
          • 圖層的作用為了保證頁面可以靈活的布局。
          • div和span是可以定位的,只要定下div的左上角的x軸和y軸坐標(biāo)即可。
          • div和span的區(qū)別?
          • di獨(dú)占一行
          • span不會(huì)獨(dú)占一行

          TML標(biāo)簽:

          基本標(biāo)簽:

          <html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽

          <head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title

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

          <body></body> 文檔的主體 包含頁面的內(nèi)容

          <h1>-<h6> HTML提供6個(gè)等級(jí)的頁面標(biāo)題 有大到小

          <p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行

          <br/>單標(biāo)簽 換行標(biāo)簽 (break打斷)

          格式化標(biāo)簽:

          加粗 <strong></strong>or<b></b>

          斜線 <em></em>or<i></i>

          刪除線 <del></del>or<s></s>

          下劃線 <ins></ins>or<u></u>

          div和span標(biāo)簽:

          沒有語義 屬于一種盒子 來裝內(nèi)容

          <div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子

          <span></span>意為跨度,跨距 一行可以哦有多個(gè) 小盒子

          圖像標(biāo)簽:

          <img src="圖像路徑(url)"/> 定義頁面中的圖像

          圖像標(biāo)簽包含多個(gè)屬性

          src 圖片路徑 必須屬性

          alt 文本 替換文本 圖像不能顯示的文字

          title 文本 鼠標(biāo)放到圖像上顯示文字

          width 像素 寬度

          height 高度

          border 邊框

          相對(duì)路徑和絕對(duì)路徑

          相對(duì)路徑:以引用文件所在位置為參考基礎(chǔ),而建立出的目錄路徑

          分類:下級(jí)路徑/ 上級(jí)路徑../

          絕對(duì)路徑:是指目錄下的絕對(duì)位置,如硬盤中的路徑或網(wǎng)路地址

          超鏈接標(biāo)簽:

          <a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>

          href用于指定鏈接目標(biāo)的url地址(必須屬性)

          target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式

          錨點(diǎn)鏈接:可以快速到頁面某個(gè)位置

          在鏈接文本中的href屬性中,設(shè)置屬性值為#名字的形式,如<a href="#two">目標(biāo)</a>

          找到目標(biāo)位置標(biāo)簽,里面添加一個(gè)id屬性 = 名字,如:<h3 id="two">目標(biāo)</h3>

          注釋:

          <!-- 注釋語句 --> 快捷鍵CTRL + /

          特殊字符:

          HTML 原代碼

          顯示結(jié)果

          描述

          <

          <

          小于號(hào)或顯示標(biāo)記

          >

          >

          大于號(hào)或顯示標(biāo)記

          &

          &

          可用于顯示其它特殊字符

          "

          引號(hào)

          ?

          ?

          已注冊(cè)

          ?

          ?

          版權(quán)

          ?

          ?

          商標(biāo)



          半個(gè)空白位



          一個(gè)空白位



          不斷行的空白

          表格標(biāo)簽:

          <table></table> 是用于定義表格的標(biāo)簽

          <tr></tr> 標(biāo)簽用于定義表格中的行,必須嵌套在<table></table>標(biāo)簽中

          <tb></tb> 用于定義表格的單元格,必須嵌套在<tr></tr>標(biāo)簽中

          <td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容

          表頭單元格標(biāo)簽:

          <th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。

          表格屬性:

          align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
          border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框

          cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白,默認(rèn)1像素

          cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素

          with 像素值or百分比 規(guī)定表格的寬度

          合并單元表格方式:

          跨行合并:rowspan="合并單元格的個(gè)數(shù)"

          跨列合并:colspan="合并單元格的個(gè)數(shù)"

          列表標(biāo)簽:

          <ul>標(biāo)簽表示無序列表 里面只能包含li

          <ol>有序標(biāo)簽 里面只能包含li

          <li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽

          <dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用

          表單標(biāo)簽:

          標(biāo)簽

          描述

          <form>

          定義供用戶輸入的表單

          <input>

          定義輸入域

          <textarea>

          定義文本域 (一個(gè)多行的輸入控件)

          <label>

          定義了 <input> 元素的標(biāo)簽,一般為輸入標(biāo)題

          <fieldset>

          定義了一組相關(guān)的表單元素,并使用外框包含起來

          <legend>

          定義了 <fieldset> 元素的標(biāo)題

          <select>

          定義了下拉選項(xiàng)列表

          <optgroup>

          定義選項(xiàng)組

          <option>

          定義下拉列表中的選項(xiàng)

          <button>

          定義一個(gè)點(diǎn)擊按鈕

          <datalist>

          New

          指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表

          <keygen>

          New

          定義了表單的密鑰對(duì)生成器字段

          <output>

          New

          定義一個(gè)計(jì)算結(jié)果

          <input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式

          <input type="value">

          <input type="屬性值" />

          屬性值:

          button

          定義可點(diǎn)擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動(dòng)腳本)。

          checkbox

          定義復(fù)選框。

          file

          定義輸入字段和 "瀏覽"按鈕,供文件上傳。

          hidden

          定義隱藏的輸入字段。

          image

          定義圖像形式的提交按鈕。

          password

          定義密碼字段。該字段中的字符被掩碼。

          radio

          定義單選按鈕。

          reset

          定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。

          submit

          定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。

          text

          定義單行的輸入字段,用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。

          <label>標(biāo)簽

          <label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)。 label是標(biāo)注的意思

          label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

          <label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同


          詳情可參考

          https://www.runoob.com/ 菜鳥教程

          https://www.w3school.com.cn/ w3c

          .標(biāo)題標(biāo)簽:<h1> </h1>

          2.段落標(biāo)簽:<p> </p>


          3.水平線標(biāo)簽:<hr/>


          4.換行標(biāo)簽:<br/>


          5.div span標(biāo)簽:兩者無語義,相當(dāng)于一個(gè)盒子,用來布局。兩者區(qū)別:<div></div>會(huì)自動(dòng)換行。


          6.文本格式化標(biāo)簽:<b> </b> <strong> </strong> 粗體


          <i> </i> <em> </em> 斜體


          <s> </s> <del> </del> 加刪除線


          <u> </u> <ins> </ins> 加下劃線


          7.標(biāo)簽屬性:<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2">內(nèi)容</標(biāo)簽名>


          8.圖像標(biāo)簽:<img />


          屬性 屬性值


          src 路徑


          alt 文本(圖片不顯示時(shí)顯示的文本)


          title 鼠標(biāo)經(jīng)過時(shí)的懸浮文本


          width 寬度


          height 高度


          border 邊框?qū)挾?/p>


          9.鏈接標(biāo)簽:<a href="目標(biāo)" target="窗口彈出方式"> </a>


          瞄點(diǎn)定位:<a herf="#id名"> </a> <h3 id="文本"> </h3>


          target="-self"本窗口彈出


          target="-blank"打開新窗口彈出


          class與id區(qū)別:class不唯一,id唯一


          10.base標(biāo)簽:<base target="-blank">


          此標(biāo)簽必須放在<head> </head>里


          11.常見特殊字符:&nbsp 空格


          &lt 小于號(hào)


          &gt 大于號(hào)


          &copy 版權(quán)


          12.注釋標(biāo)簽:<!--注釋的文本 -->


          13.路徑:


          相對(duì)路徑:同一級(jí) <img src="文件名" />


          下一級(jí)<img src="下一級(jí)文件名/文件名">


          上一級(jí)<img src="../文件名"/>(上兩級(jí)../../,依次類推)


          絕對(duì)路徑:"D:wen\word"或"http://www.baidu.com"


          14.列表


          無序列表:<ul>


          <li>列表項(xiàng)1</li>


          <li>列表項(xiàng)2</li>


          ......


          </ul>(ul里不可放其他標(biāo)簽,li里可以放其他標(biāo)簽,后者同理)


          有序列表:<ol>


          <li> </li>


          <li> </li>


          ......


          </ol>


          自定義列表:術(shù)語,名詞的解釋描述


          <dl>


          <dt>名詞1</dt>


          <dd>解釋1</dd>


          <dt>名詞2</dt>


          <dd>解釋2</dd>


          ......


          </dl>


          主站蜘蛛池模板: 丝袜美腿一区二区三区| 国产亚洲3p无码一区二区| 一区二区三区伦理高清| 精品久久久久一区二区三区| 国产AⅤ精品一区二区三区久久| 丰满人妻一区二区三区免费视频 | 久久久久人妻一区精品色| 在线日产精品一区| 夜精品a一区二区三区| 国产一区二区视频在线观看| 亚洲AV本道一区二区三区四区| 亚洲爆乳精品无码一区二区| 高清一区二区三区| 精品一区二区三区四区在线播放| 国产一区二区好的精华液 | 人妻无码视频一区二区三区| 亚洲Av无码国产一区二区| 国产成人无码精品一区在线观看| 日韩精品中文字幕无码一区 | 国产午夜精品一区二区三区漫画| 老熟妇仑乱一区二区视頻| 国产伦精品一区二区三区视频小说 | 99精品一区二区免费视频| 精品在线一区二区三区| 精品无码一区二区三区爱欲| 国产伦精品一区二区三区视频小说| 亚洲天堂一区二区| 精品免费AV一区二区三区| 自拍日韩亚洲一区在线| 中文字幕永久一区二区三区在线观看 | 亚洲乱码日产一区三区| 国模大胆一区二区三区| 无码aⅴ精品一区二区三区浪潮| 国产免费私拍一区二区三区| 精品无码一区二区三区电影| 内射女校花一区二区三区| 日韩精品一区二区三区中文3d| 日韩精品一区二区三区色欲AV | 美女毛片一区二区三区四区| 香蕉一区二区三区观| 国产suv精品一区二区6|