国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

HTML基礎(chǔ)知識

2020-3-28    前端達(dá)人

HTML基礎(chǔ)知識

  1. HTML的歷史:HTML,XHTML
  2. HTML的全局屬性:全局標(biāo)準(zhǔn)屬性,全局事件屬性
  3. HTML的元素:

  4. a.png

  5. 點(diǎn)擊查看原圖

  1. 標(biāo)記語言,是一種將文本以及與文本相關(guān)的其他信息結(jié)合起來,展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。
  2. HTML,為超文本標(biāo)記語言。
  3. XHTML是可擴(kuò)展超文本標(biāo)記語言,是一種更純潔,更嚴(yán)格,更規(guī)范的html代碼。
  4. html文件由文件頭和文件體兩部分組成。
  5. 標(biāo)簽的分類:雙標(biāo)簽,單標(biāo)簽。

HTML的全局標(biāo)準(zhǔn)屬性
在HTML中,規(guī)定了8個全局標(biāo)準(zhǔn)屬性。

class用于定義元素的類名。
id用于指定元素的唯一id。
style用于指定元素的行內(nèi)樣式。
title用于指定元素的額外信息。
accesskey用于指定激活某個元素的快捷鍵。
支持accesskey屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab鍵下的次序。
支持tabindex屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中內(nèi)容的文本方向。
dir的屬性值只有l(wèi)tr和rtl兩種,分別是left to right和right to left。

lang用于指定元素內(nèi)容的語言。
HTML的全局事件屬性
Window窗口事件
onload,在頁面加載結(jié)束后觸發(fā)。
onunload,在用戶從頁面離開時觸發(fā),如單擊跳轉(zhuǎn),頁面重載,關(guān)閉瀏覽器窗口等。
Form表單事件
onblur,當(dāng)元素失去焦點(diǎn)時觸發(fā)。
onchange,在元素的元素值被改變時觸發(fā)。
onfocus,在元素獲得焦點(diǎn)時觸發(fā)。
onreset,當(dāng)表單中的重載按鈕被點(diǎn)擊時觸發(fā)。
onselect,在元素中文本被選中后觸發(fā)。
onsubmit,在提交表單時觸發(fā)。
Keyboard鍵盤事件
onkeydown,在用戶按下按鍵時觸發(fā)。
onkeypress,在用戶按下按鍵后,按著按鍵時觸發(fā)。
該屬性不會對所有按鍵生效,不生效按鍵如:alt,ctrl,shift,esc。

onkeyup,當(dāng)用戶釋放按鍵時觸發(fā)。
Mouse鼠標(biāo)事件
onclick,當(dāng)在元素上單擊鼠標(biāo)時觸發(fā)。
onblclick,當(dāng)在元素上雙擊鼠標(biāo)時觸發(fā)。
onmousedown,當(dāng)在元素上按下鼠標(biāo)按鈕時觸發(fā)。
onmousemove,當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)。
onmouseout,當(dāng)鼠標(biāo)指針移出元素時觸發(fā)。
onmouseover,當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)。
onmouseup,當(dāng)在元素上釋放鼠標(biāo)按鈕時觸發(fā)。
Media媒體事件
onabort,當(dāng)退出媒體播放器時觸發(fā)。
onwaiting,當(dāng)媒體已停止播放但打算繼續(xù)播放時觸發(fā)。
HTML元素

點(diǎn)擊查看原圖



  1. <!DOCTYPE>,聲明文檔類型。
  2. <html>,HTML元素真正的根元素。
  3. <head>,定義html文檔的文檔頭。


head中包含的元素

title,定義HTML文檔的標(biāo)題
base,為頁面上的所有鏈接規(guī)定默認(rèn)地址或者默認(rèn)目標(biāo)
link,用于定義文檔與外部資源之間的關(guān)系
meta,提供關(guān)于HTML的元數(shù)據(jù)
style,用于為HTML文檔定義樣式信息
script,用于定義客戶端腳本



  1. body,定義html文檔的文檔體。
  2. content-Type,用于設(shè)定網(wǎng)頁的字符集,便于瀏覽器解析與渲染頁面。

cache-control,用于告訴瀏覽器如何緩存某個響應(yīng)及緩存多長時間。

參數(shù):



no-cache,發(fā)送請求,與服務(wù)器確認(rèn)該資源是否被更改,如果沒有,則使用緩存



no-store,允許緩存,每次都要去服務(wù)器上下載完整的響應(yīng)



public,緩存所有響應(yīng)



private,只為單個用戶緩存



max-age,表示當(dāng)前請求開始,相應(yīng)響應(yīng)在多久內(nèi)能被緩存和重用,不去服務(wù)器重新請求,max-age=60表示響應(yīng)可以再緩存和重用60秒



<meta http-equiv=cache-control" content="no-cache">

1

expires,用于設(shè)定網(wǎng)頁的到期時間,過期后重新到服務(wù)器上重新傳輸。

refresh,網(wǎng)頁將在設(shè)定的時間內(nèi),自動刷新并轉(zhuǎn)向設(shè)定的網(wǎng)址

Set-Cookie,用于設(shè)置網(wǎng)頁過期。

無語義元素:<span>,<div>,<span>是內(nèi)聯(lián)標(biāo)簽,用在一行文本中,<div>是塊級標(biāo)簽。



div用于存放需要顯示的數(shù)據(jù),css用于指定如何顯示數(shù)據(jù)樣式,做到結(jié)構(gòu)與樣式相互分離。



查看div+css樣式HTML:點(diǎn)擊下方鏈接跳轉(zhuǎn),可查看源碼:



div-css.html



格式化元素

普通文本

<b>,定義粗體文本

<big>,定義大號字

<em>,定義著重文字

<i>,定義斜體字

<small>,定義小號字

<strong>,定義加重語氣

<sub>,定義下標(biāo)字

<sup>,定義上標(biāo)字

<ins>,定義插入字

<del>,定義刪除字

計算機(jī)輸出

<code>,定義計算機(jī)代碼

<kbd>,定義鍵盤輸出樣式

<samp>,定義計算機(jī)代碼樣本

<tt>,定義打字機(jī)輸入樣式

<pre>,定義預(yù)格式文本

術(shù)語

<abbr>,定義縮寫

<acronym>,定義首字母縮寫

<address>,定義地址

<bdo>,定義文字方向

<blockquote>定義長的引用

<q>,定義短的引用語

<cite>,定義引用,引證

<dfn>,定義一個概念,項目





圖像熱區(qū)鏈接

圖像熱區(qū)鏈接,是什么呢?當(dāng)你在看一些購物網(wǎng)頁的時候,一張圖片上,可以在不同的地方鏈接到不同的目標(biāo)位置,點(diǎn)擊不同的地方可以跳轉(zhuǎn)到不同的網(wǎng)頁,這也是做商城項目一般要用到的技術(shù)。



這個時候不是<a>標(biāo)簽元素了,而是<area>元素。



<area>元素的屬性有兩個shape,cords屬性。


<area>的坐標(biāo)系,原點(diǎn)為圖片的左上角,x軸正方向向右,y軸正方向向下

我畫個圖哈,反映<area>的坐標(biāo)系:

QQ截圖20200325235454.png

圖像熱區(qū)鏈接的使用,<map>標(biāo)簽定義一個image-map,可以含一個以上的熱區(qū)<area>,每個熱區(qū)都有獨(dú)立的鏈接。

要為<map>標(biāo)簽賦予name屬性。

將<img>標(biāo)簽的usemap屬性與<map>標(biāo)簽的name屬性相關(guān)聯(lián)。

為了證明我學(xué)會了,我寫一個html頁面。

map -> name="image_link"

img -> usemap="#image_link"
1
點(diǎn)擊跳轉(zhuǎn):imgmap.html

e-mail鏈接
e-mail鏈接主要是看到有很多官方網(wǎng)頁需要做的一個打開一封新的電子郵件。

點(diǎn)擊下方鏈接即可看到效果:

聯(lián)系我們

代碼:

<a href="mailto:xxxxxx@qq.com">聯(lián)系我們</a>



列表元素
整合列表html網(wǎng)頁,點(diǎn)擊跳轉(zhuǎn):ul-ol.html

無序列表,<ul>定義無序列表,<li>定義列表項。
<ul>的type屬性值:disc點(diǎn),square方塊,circle圓,none無.

有序列表,<ol>定義有序列表,<li>定義列表項。
<ol>的type屬性值:數(shù)字,大寫字母,大寫羅馬數(shù)字,小寫字母,小寫羅馬數(shù)字。

start屬性定義序號的開始位置。

定義列表<dl>,定義列表內(nèi)部可以有多個列表項標(biāo)題,每個列表項標(biāo)題用<dt>標(biāo)簽定義,列表項標(biāo)題內(nèi)部又可以有多個列表項描述,用<dd>標(biāo)簽定義。
表格
整合表格html網(wǎng)頁,點(diǎn)擊跳轉(zhuǎn):table.html

<table>定義表格
<caption>定義表格標(biāo)題
<tr>定義若干行
<td>定義若干單元格
<th>定義表頭
表格分頭部,主體,底部:<thead>,<tbody>,<tfoot>三個標(biāo)簽。

  1. <td>的兩個屬性:colspan用于定義單元格跨行,rowspan用于定義單元格跨列
  2. <tbody>,<thead>,<tfoot>標(biāo)簽通常用于對表格內(nèi)容進(jìn)行分組。
  3. 表單由<form>標(biāo)簽定義,action屬性定義了表單提交的地址,method屬性定義表單提交的方式。


<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden"> 




<textarea>元素

<textarea>標(biāo)簽具有name,cols,rows3個屬性。

  1. name用于提交參數(shù)
  2. value用于輸入文本內(nèi)容
  3. colsrows分別用于文本框的列數(shù)和行數(shù),寬度和高度。

效果:

自我評價:


代碼:

<form action="web" method="post">
 自我評價:<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>



frameset

  1. <frameset>定義一個框架集,用于組織多個窗口,每個框架存有獨(dú)立的html文檔
  2. <frameset>不能與<body>共同使用,除非有<noframe>元素
  3. <frame>用于定義<frameset>中一個特定的窗口??赵?code style="box-sizing:border-box;outline:0px;margin:0px;padding:2px 4px;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;overflow-wrap:break-word;"><frame/>

:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>frameset</title>
    </head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的瀏覽器無法處理框架,請更換瀏覽器打開</body>
    </noframes>
</html>
1




顯示結(jié)果 描述 實(shí)體名稱 實(shí)體編號
空格 &nbsp; &#160;
< 小于號 &lt; &#60;
> 大于號 &gt; &#62;
& 和號 &amp; &#38;
" 引號 &quot; &#34;
' 撇號 &apos; (IE不支持) &#39;
分(cent) &cent; &#162;
鎊(pound) &pound; &#163;
元(yen) &yen; &#165;
歐元(euro) &euro; &#8364;
§ 小節(jié) &sect; &#167;
© 版權(quán)(copyright) &copy; &#169;
® 注冊商標(biāo) &reg; &#174;
? 商標(biāo) &trade; &#8482;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;
————————————————
版權(quán)聲明:本文為CSDN博主「達(dá)達(dá)前端」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qq_36232611/article/details/105109467




日歷

鏈接

個人資料

存檔