HTML基礎(chǔ)總結(jié)

.h1-h6標(biāo)簽

都是標(biāo)題標(biāo)簽，定義一段話的標(biāo)題，h1最大，依次遞減，h6最小

標(biāo)題標(biāo)簽的作用：讓文本加粗顯示

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

用來顯示一段文本(圖片)，它會(huì)忽略源代碼中的排版

塊元素：獨(dú)占一行的元素，和相鄰的元素不能共享同一行,所有的塊元素都有align屬性,h1-h6和p元素都是塊元素

3. 格式標(biāo)簽：

b標(biāo)簽：加粗文本

del標(biāo)簽：包含的文本中間有條橫線

em標(biāo)簽：包裹的文本會(huì)顯示為斜體

i標(biāo)簽：包裹的文本會(huì)顯示為斜體

pre標(biāo)簽：顯示源代碼的排版

strong標(biāo)簽：和em作用一樣，都有強(qiáng)調(diào)的意思，如果要強(qiáng)調(diào)一段文字，建議使用strong標(biāo)簽

u標(biāo)簽：給文本添加下劃線

sup：定義上標(biāo)文本

sub:定義下標(biāo)文本

4. 圖片標(biāo)簽img，用來把圖片顯示在網(wǎng)頁(yè)上

必須屬性:1.src:圖片的路徑(可以用相對(duì)路徑或絕對(duì)路徑，不建議用絕對(duì)路徑)

alt:定義圖片無法顯示時(shí)的代替文本

相對(duì)路徑：以當(dāng)前文件所在的位置為參考路徑,定義出來的路徑叫相對(duì)路徑

絕對(duì)路徑：文件在硬盤上的物理路徑叫絕對(duì)路徑,

例如：

D:\work181129JAVA班\課件-web前端課件\web-day1\Code\web-day1\img\tly.jpg

可選屬性：

1.title：鼠標(biāo)放在圖片上時(shí)的提示文字,所有元素都有title屬性

2.width:定義圖片的寬度，默認(rèn)以像素px為單位，可以省略單位不寫

3.height:定義圖片的高度

br標(biāo)簽：換行標(biāo)簽，可以寫成<br>或者<br/>

hr標(biāo)簽：水平線標(biāo)簽，可以寫成<hr>或者<hr/>,屬性有：width(寬度),size(高度),color(顏色)

5. span:通常用于修飾文本，可以給它添加樣式，例如style="color: red;"

div:把文檔分割成若干個(gè)獨(dú)立的部分 ,塊級(jí)元素

6. ul定義無序列表，type屬性定義列表項(xiàng)目的標(biāo)記，默認(rèn)是disc

type="disc" 默認(rèn)黑色圓點(diǎn)

type="circle" 空心圓點(diǎn)

type="square" 方塊

ol定義有序列表，type屬性定義項(xiàng)目的標(biāo)記，默認(rèn)是數(shù)字

type="A"或"a":表示大寫字母或者小寫字母

type="I"或type="i"：表示羅馬大寫字母或羅馬小寫字母

7. border:定義表格的邊框?qū)傩?/p>

cellspacing:單元格之間的距離，設(shè)置為0則只有1條邊框了

cellpadding:單元格的內(nèi)容到邊框之間的距離

8. 表頭：表格中的第一行，用來顯示列標(biāo)題的，使用th定義表頭的每一列，把里面的內(nèi)容加粗居中顯示

通常，第一行是表頭行，從第二行開始就是數(shù)據(jù)行(顯示具體的數(shù)據(jù)),

使用td(table data cell )表示數(shù)據(jù)行每一列

表格的align="center"：讓表格整體居中顯示

tr(table row)的align="center"：讓行里面的內(nèi)容居中顯示

caption：定義表格的標(biāo)題，會(huì)相當(dāng)于表格居中

9. colspan:跨列，即在水平方向上合并單元格，值是要合并的單元格數(shù)目

rowspan:跨行，即在豎直方向上合并單元格，值是要合并的單元格數(shù)目

10. form:表單標(biāo)簽，用于創(chuàng)建一個(gè)表單，收集用戶輸入的數(shù)據(jù)，并提交給服務(wù)器程序

屬性:action:指定將表單的數(shù)據(jù)發(fā)送到哪個(gè)服務(wù)器程序

method:指定用哪種方式來提交數(shù)據(jù)，常用值有GET,POST，默認(rèn)值是get

表單域：又叫表單元素，作用是收集用戶輸入的數(shù)據(jù) ，并提交給服務(wù)器端程序

常用的表單域：1.input元素：它的type屬性有不同值，表現(xiàn)出不同形態(tài)

type="text":表示文本框，提供文本的輸入

type="radio":單選框(單選按鈕)，多個(gè)單選框的name值必須相同，如果name不同則不能互斥，提交時(shí)是提交value值

type="checkbox":復(fù)選框，當(dāng)name相同時(shí)，可以提交多個(gè)值(value屬性的值)

type="file"":文件域，讓用戶選擇本地文件上傳到服務(wù)器

type="hidden":隱藏域，對(duì)用戶不可見的元素，可以有默認(rèn)值并且能提交給服務(wù)器(在javaEE開發(fā)中會(huì)大量使用隱藏域)

2. select元素：表示下拉列表，又叫下拉框，在下拉列表中用option元素定義待選擇的選項(xiàng)，默認(rèn)第1個(gè)選項(xiàng)被選中，

設(shè)置某個(gè)option被選中：在option元素上添加selected="selected"或者selected

設(shè)置下拉列表為多選下拉列表：在select元素上加multiple屬性

關(guān)于選中元素的設(shè)置：

1)設(shè)置單選框或復(fù)選框被選中的屬性是checked

2)設(shè)置下拉列表的某個(gè)選項(xiàng)被選中的屬性是selected

11. body標(biāo)簽：

1.background：定義網(wǎng)頁(yè)的背景圖片，如果背景圖片很小，會(huì)自動(dòng)在水平和豎直方向上平鋪展示

2.bgcolor:定義網(wǎng)頁(yè)的背景顏色

12. textarea:文本域，又叫多行文本框,cols是文本區(qū)內(nèi)的寬度,rows:行數(shù)

placeholder：用來設(shè)置單行文本框(不是textarea)里的默認(rèn)提示文字，當(dāng)輸入了新的內(nèi)容后，該提示文字就消失了

label：本身沒有什么效果，當(dāng)結(jié)合單選按鈕或復(fù)選框使用時(shí)，如果label的for屬性和按鈕的id相同，則點(diǎn)擊

label后就相當(dāng)于點(diǎn)擊了按鈕，會(huì)將單選框或復(fù)選框選中

表單按鈕：

1.提交按鈕： <input type="submit">，提交按鈕作用是將表單數(shù)據(jù)發(fā)送到action指定的服務(wù)器上

2.重置按鈕： <input type="reset">，作用是將表單中數(shù)據(jù)清空

3.普通按鈕：<input type="button">，普通按鈕在沒有添加js代碼情況下，是不能提交表單的

13. frameset:框架集，用于將整個(gè)瀏覽器窗口劃分成多個(gè)小窗口，每個(gè)小窗口稱為一個(gè)frame，每個(gè)小窗口(frame)都可以,加載一個(gè)獨(dú)立的html文檔

使用frameset的cols或rows屬性定義如何分割整個(gè)大窗口，

cols:定義水平方向上分割的各個(gè)frame的百分比,

rows：定義豎直方向上分割的各個(gè)frame的百分比,

noresize:不能調(diào)整frame的寬或高 frameborder="0":去掉frame的邊框

*代表剩余百分比，會(huì)自動(dòng)計(jì)算

使用frame來定義每個(gè)小窗口，src指frame所加載的網(wǎng)頁(yè)的相對(duì)路徑

14. iframe:能夠包含其它文檔(網(wǎng)頁(yè))的內(nèi)聯(lián)框架，內(nèi)聯(lián)就是行內(nèi)，因?yàn)樗芎拖噜彽脑毓蚕硗恍?/p>

src:要加載的文檔的路徑 width:寬度，height:高度

frameborder:邊框，0或no代表無邊框

15. 將超鏈接所跳轉(zhuǎn)的頁(yè)面顯示在iframe的技巧:

1)給iframe元素添加一個(gè)name屬性,例如

2)超鏈接添加屬性target，值應(yīng)該是iframe元素的name

16. 實(shí)體集

來的產(chǎn)品經(jīng)理，想做一個(gè)和qq或者微信聊天一樣的，上下拖動(dòng)動(dòng)態(tài)改變文本內(nèi)容框和編輯器布局的需求。其實(shí)一開始是一頭霧水的，但是通過萬能的mdn，以及充滿智慧的我，最終還是完成了這個(gè)需求。其中最核心的還是ResizeObserver這個(gè)第一次用的類，所以會(huì)在這里做一些記錄。

ResizeObserver初識(shí)
ResizeObserver實(shí)戰(zhàn)

ResizeObserver初識(shí)

ResizeObserver interface可以報(bào)告元素content或者border box，或者svg元素box大小的變化。
ResizeObserver.disconnect() 取消觀察某個(gè)observer的所有observed目標(biāo)元素。
ResizeObserver.observe() 初始化觀察一個(gè)指定元素。
ResizeObserver.observe() 取消觀察一個(gè)指定元素。
new ResizeObserver(callback) callback的入?yún)╡ntries和observer。

entries是一個(gè)數(shù)組，它由所有的ResizeObserverEntry object組成。通過for (let entry of entries) {}的方式，entry代表一個(gè)ResizeObserver object，一個(gè)entry由contentRect和target組成。

在resize相關(guān)實(shí)踐中，entry的contentRect對(duì)象是最最重要的。

{target: div, contentRect: DOMRectReadOnly}
contentRect: DOMRectReadOnly
bottom: 312.3125
height: 292.3125
left: 20
right: 626
top: 20
width: 606
x: 20
y: 20
__proto__: DOMRectReadOnly
target: div
__proto__: ResizeObserverEntry

ResizeObserver實(shí)戰(zhàn)

Make element resizable

元素應(yīng)用resize css屬性。
元素ResizeObserver化。

<div class="main" :style="{minHeight: dynamicMainHeight}">
      <chatView></chatView>
</div>

.main {
    resize: vertical;
    overflow: auto;
}

 observeChatView() {
    if (window.ResizeObserver) {
      const viewElem = document.querySelector('.main');
      const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          if (!this.initialHeight) {
            this.initialHeight = entry.contentRect.height;
          }
          if (this.initialHeight) {
            const deltaHeight = this.initialHeight - entry.contentRect.height;
            this.$bus.$emit('rerenderViewAndEditor', deltaHeight);
          }
        }
      });
      resizeObserver.observe(viewElem);
    } else {
      this.$Message.warning('不支持ResizeObserver');
    }
  },
},

動(dòng)態(tài)計(jì)算的editor組件

<div
  class="rich-text-editor"
  contenteditable
  data-placeholder="按下Enter發(fā)送消息，按下Shift+Enter換行"
  :style="{height: dynamicHeight}"
></div>

computed: {
  dynamicHeight() {
    return `${defaultEditorHeight + this.deltaHeight}px`;
  },
},
this.$bus.$on('rerenderViewAndEditor', (deltaHeight) => {
    this.deltaHeight = deltaHeight;
});

動(dòng)態(tài)計(jì)算的view組件

自動(dòng)跳到最新一條消息的chatView組件需要減去deltaHeight，從而增大scrollHeight的高度。

this.$bus.$on('rerenderViewAndEditor', (deltaHeight) => {
  this.visiableHeight = document.body.clientHeight - deltaHeight;
  this.deltaHeight = deltaHeight;
});

scrollToBottom() {
  this.$nextTick(() => {
    this.scrollTop = this.scrollHeight - this.deltaHeight;
  });
},

最終效果

參考資料

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html

努力成為優(yōu)秀的前端工程師！

期待和大家交流，共同進(jìn)步
微信公眾號(hào)：大大大前端 / excellent_developers

努力成為優(yōu)秀前端工程師！

.什么是框架

框架將瀏覽器劃分成不同的部分，每一部分加載不同的網(wǎng)頁(yè)，實(shí)現(xiàn)在同一瀏覽器窗口中加載多個(gè)頁(yè)面的效果

2.frameset 劃分框架標(biāo)簽

1）語法格式

<frameset>....</frameset>

2）屬性

1.cols：使用“像素?cái)?shù)”和%分割左右窗口，“*”表示剩余部分；如果使用“*”,“*”表示框架平均分成2個(gè)；如果使用“*”,“*”,“*”表示框架平均分成3個(gè)。

2.rows：使用“像素?cái)?shù)”和%分割上下窗口，“*”表示剩余部分。

3.frameborder：指定是否顯示邊框，0不顯示，1顯示。

4.border：設(shè)置邊框的大小，默認(rèn)值5像素。

3）frame 子窗口標(biāo)簽

1.定義

frame 標(biāo)記是一個(gè)單標(biāo)記，該標(biāo)記必須放在 frameset 中使用，在 frameset 中設(shè)置了幾個(gè)窗口，就必須對(duì)應(yīng)使用幾個(gè) frame 框架，而且還必須使用 src 屬性指定一個(gè)網(wǎng)頁(yè)。

2.屬性

src：加載網(wǎng)頁(yè)文件的URL地址
name：框架名稱，是鏈接標(biāo)記的target所要參數(shù)
noresize：表示不能調(diào)整框架大小，沒有設(shè)置時(shí)就可以調(diào)整
scrolling：是否需要滾動(dòng)條：auto（根據(jù)需要自動(dòng)出現(xiàn)）、yes（有）、no（無）
frameborder：是否需要邊框：1（顯示邊框）0（不顯示邊框）

3.舉例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>文檔標(biāo)題</title>  </head>  <frameset cols="*,*" frameborder="0">    <frame src="https://www.taobao.com" noresize>    <frame src="https://www.baidu.com" noresize>  </frameset></html>

在線咨詢

上一篇：HTML5 – 支持WORD上傳的富文本編輯器
下一篇：typeof和instanceof的區(qū)分和實(shí)現(xiàn)原理

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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