本土新冠疫情

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>

末有福利

前端開發，入門簡單，有一臺可以運行多款瀏覽器的電腦，能聯網查詢資料即可。深入的部分，需要更多的理論知識、肯鉆研的精神。前端開發，需要入門了解的屈指可數，主要就是如下幾個大方面：

背景知識

軟件安裝

文本編輯器

vscode(推薦使用，功能強大)
Sublime Text
NodePad++

瀏覽器

Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

構建工具

Webpack
Gulp

Web standards

Web standards ，主要定義瀏覽器端，功能接口標準的，標準的具體實現，由不同的瀏覽器廠商完成。

當下使用的web技術

主流瀏覽器

Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

協議

協議，主要用于通信。前后端不是獨立的，彼此通過協議，互換信息，web系統才能運行正常

http
https
socket

HTML, CSS, and JavaScript

開發工具

各瀏覽的DevTool,便于調試
Linters插件
Minify工具
CDN等
測試工具
js庫和前端框架（站點構建的更快、更高效）

服務端語言

Python, NodeJS, Deno, Go, Rust

面臨的挑戰

瀏覽器兼容

Web standards，各實現廠商不同，支持力度不同，瀏覽器兼容問題自然存在

響應式設計

廠商的不同，展示場景的不同，意味著不能全篇一律敲定，需要動態變化展示內容

性能

天下站點，只有快，才能留住用戶

易用性

站點的訪問人群不同，要具備普適性，都能輕松使用。

國際化

國際語言眾多，需要盡可能的多支持

安全性

用戶隱私數據保護

HTML

html基礎概念

html元素

當然，也有例外，不是這種格式的

# Empty elements， or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
復制代碼

html元素嵌套

<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>
復制代碼

html文檔結構

不管多少連續的空白，瀏覽器都會解析會一個空格

<!DOCTYPE html> # 定義解析格式
<html> # 文檔的root 
  <head> #定義源數據地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文檔的可見內容部分
    <p>This is my page</p>
  </body>
</html>
復制代碼

元數據等請移步參考

html特殊字符

<, >,",' and &, 這是html自身使用的，如果用戶需要展示，那么需要轉義

html注釋

<!-- 
 <p>I am!</p> 
-->
復制代碼

html 多媒體

image

普通的圖片

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>
復制代碼

audio

單一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>
復制代碼

video

單一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>
復制代碼

svg

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

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>
復制代碼

html table

樣式指定

<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小時內與您取得聯系。

整合營銷服務商