ttps://i.snssdk.com/feoffline/amos_basic/html/main/index.html?amos_id=6987161637471911966&group_id=7036230004384058911&style_id=30014&is_full_screen=1&share_token=FE58CDFA-8A3A-423D-A99E-F5849E2D0AE0&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_ios&utm_campaign=client_share 關注本土新冠疫情 -
<html>
<head>
標題 ---此處放置標題、導航、登錄等內容
<!此處放置標題、導航、登錄等內容--->
</head>
<body>
<!此處放置頁面主要內容--->
<! :空格
<: 小于號
>: 大于號
": 引號--->
<p>第一段 世界大勢,合久必分,分久必合。</p>
<hr/> <!表示單行橫線顯示--->
<br/> <!表示換行--->
<h1> hello world, html is easy</h1>
<h2> hello world, html is easy</h2>
<h3> hello world, html is easy</h3>
<h4> hello world, html is easy</h4>
<h5> hello world, html is easy</h5>
<h6> hello world, html is easy</h6>
<p>普通字體</p>
<b>粗體</b> <i>斜體</i> <del>本文字已被刪除,請忽略</del>
<p> hello world</p> <!段落標記--->
<a href="http://www.baidu.com" target="_self"> 點擊進入百度</a>
<br/>
<img src="http://mysite.com/mypic.png" alt="網站作者照片">
<h3> 普通無邊框表格:</h3>
<table>
<tr>
<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
</tr>
</table>
<h3>帶表頭,有邊框,有跨列單元:</h3>
<table border="1">
<tr>
<th>head1</th> <th>head2</th> <th>head3</th>
</tr>
<tr>
<td>row 1 cell 1</td> <td>row 1 cell 2</td> <td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td> <td>row 2 cell 2</td> <td>row 2 cell 3</td>
</tr>
</table>
<h3>三種列表的表達方式:</h3>
<table cellpadding="2" cellspacing="2">
<tr>
<td>
<ul><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ul>
</td>
<td>
<ol><li>python</li> <li>c++</li> <li>java</li> <li>golang</li></ol>
</td>
</tr>
</table>
<dl>
<dt>CPU</dt><dd>處理器</dd>
<dt>MEM</dt><dd>內存</dd>
</dl>
<body bgcolor="#FF0000">
<body bgcolor="RGB(255,0,0)">
<body bgcolor="RED">
<p>視頻</p>
<object
classid="clsid:d27sfsfstqwetsasasdfsdfs"
codebase="http://fpdownload.macromedia.com/pub/shckwave/cabs/flash/swflash.cab">
<embed src="flashfile.swf" width="300" height="200"></embed>
</object>
<br/>
<p>音頻</p>
<audio controls="crontrols">
<source src="sample_song.mp3" type="audio/mp3" />
</audio>
<br/>
<p>視頻</p>
<video controls="controls"/>
<source src="sample_video.mp4" type="video/mp4">
</video>
<p>html表單---文本輸入</p>
<table>
<tr>
<td>用戶名:</td>
<td><input type="text" name="name"></td>
<td>密碼:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
</tr>
</table>
<table>
<tr>
<td>性別:</td>
<td>用戶名:</td>
<td>男性<input type="radio" checked='checked' name="sex" value="male" /></td>
<td>女性<input type="radio" checked='checked' value="female" /></td>
</tr>
<tr>
<tdcolspan="4"> <textarea name="comment" rows="5" cols="60"> </textarea></td>
</tr>
</table>
</body>
</html>
末有福利
前端開發,入門簡單,有一臺可以運行多款瀏覽器的電腦,能聯網查詢資料即可。深入的部分,需要更多的理論知識、肯鉆研的精神。 前端開發,需要入門了解的屈指可數,主要就是如下幾個大方面:
Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
Git GitHub
Web standards ,主要定義瀏覽器端,功能接口標準的,標準的具體實現,由不同的瀏覽器廠商完成。
Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge
協議,主要用于通信。前后端不是獨立的,彼此通過協議,互換信息,web系統才能運行正常
Python, NodeJS, Deno, Go, Rust
Web standards,各實現廠商不同,支持力度不同,瀏覽器兼容問題自然存在
廠商的不同,展示場景的不同,意味著不能全篇一律敲定,需要動態變化展示內容
天下站點,只有快,才能留住用戶
站點的訪問人群不同,要具備普適性, 都能輕松使用。
國際語言眾多,需要盡可能的多支持
用戶隱私數據保護
當然,也有例外,不是這種格式的
# Empty elements, or (void elements.)
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
復制代碼
<p>My cat is <strong>very</strong> grumpy.</p>
復制代碼
塊元素,獨占一行;行內元素,按先后順序,排列 這些與css的display不同,不影響元素能包含哪些元素,能被哪些元素包含
其中,也存在一種特殊的屬性:Boolean attributes
<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
復制代碼
另外,也會存在一些特殊的寫法。推薦都是key="value"形式
<a href=https://www.mozilla.org/>favorite website</a>
復制代碼
不管多少連續的空白,瀏覽器都會解析會一個空格
<!DOCTYPE html> # 定義解析格式
<html> # 文檔的root
<head> #定義源數據地方
<meta charset="utf-8">
<title>My test page</title>
</head>
<body> # 文檔的可見內容部分
<p>This is my page</p>
</body>
</html>
復制代碼
元數據等請移步參考
<, >,",' and &, 這是html自身使用的,如果用戶需要展示,那么需要轉義
<!--
<p>I am!</p>
-->
復制代碼
alt描述圖片
# 推薦添加alt,而不是text子元素節點添加
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
復制代碼
caption添加標題
<figure>
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
復制代碼
根據展示設備尺寸的不同,加載不同的圖片
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
復制代碼
設備尺寸相同,但是分辨率不同
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy">
復制代碼
利用picture,不同設選擇加載不同的圖片
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
復制代碼
picture+svg
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
復制代碼
單一url 瀏覽器廠商,針對音頻的支持格式不是不同的,譬如: MP3, MP4 and WebM
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
復制代碼
瀏覽器適配問題
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
復制代碼
單一url 瀏覽器廠商,針對視頻的支持格式不是不同的
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
復制代碼
瀏覽器適配問題
<video controls width="400" height="400"
autoplay loop muted preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
復制代碼
image引用svg
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87"
width="100" />
復制代碼
html引用svg
<svg width="300" height="200">
<rect width="100%" height="100%" fill="green" />
</svg>
復制代碼
iframe等中引用svg
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
復制代碼
canvas與svg不同,canvas基于像素,svg基于矢量圖
#html
<canvas id="my-canvas" width="600" height="400"></canvas>
復制代碼
iframe, embed and object
iframe
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Glossary">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>
復制代碼
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
復制代碼
col 一次指定即可
<table>
<colgroup>
<col> # 定義在colgroup中,與th個數對應
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
復制代碼
全部設置
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
復制代碼
如果你現在也想學習前端開發技術,在學習前端的過程當中有遇見任何關于學習方法,學習路線,學習效率等方面的問題,你都可以申請加入我的Q群:前114中6649后671,里面有許多前端學習資料 大廠面試真題免費獲取,希望能夠對你們有所幫助。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。