前端復習 html(一)

# 前端復習 html（一）

HTML基礎

HTML: 制作網頁

純文本協議: 只保存內容不保存樣式

**HTML概述:**

1 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。

2<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

3在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。

4HTML5 不基于 SGML，所以不需要引用 DTD。

**常用的 DOCTYPE 聲明**

HTML5 : !DOCTYPE html

HTML 4.01 Strict : !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

XHTML 1.0 Strict : !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

> 現在開發直接使用HTML5文檔聲明即可

**HTML標簽**

1:聲明是一個html文檔，所有的標簽都寫在它內部

2:此元素可告知瀏覽器其自身是一個 HTML 文檔。

3:<html> 與 </html> 標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。

Meta標簽

meta標簽概述

META標簽是HTML標記HEAD區的一個關鍵標簽

它位于HTML文檔的<head>和<title>之間

它提供的信息雖然用戶不可見，但卻是文檔的最基本的元信息。

字符

是各種文字和符號的總稱，包括各國家文字、標點符號、圖形符號、數字等

字符集

字符集(Character set)是多個字符的集合，字符集種類較多，每個字符集包含的字符個數不同

常用字符集

ASCII字符集

是基于羅馬字母表的一套電腦編碼系統。

它主要用于顯示現代英語和其他西歐語言。

圖示

GB2312字符集

GB2312是中國國家標準的簡體中文字符集。它所收錄的漢字已經覆蓋99.75%的使用頻率，

基本滿足了漢字的計算機處理需要。在中國大陸和新加坡獲廣泛使用。

GB18030字符集

GB 18030的全稱是GB18030-2000《信息交換用漢字編碼字符集基本集的擴充》，

是我國政府于2000年3月17日發布的新的漢字編碼國家標準，2001年8月31日后在中國市場上

發布的軟件必須符合本標準。

Unicode

支持現今世界各種不同語言的書面文本的交換、處理及顯示。

UTF-8 編碼

UTF-8是Unicode的其中一個使用方式。

支持現今世界各種不同語言的書面文本的交換、處理及顯示。

開發中我們使用的都是UTF-8編碼

為什么要設置字符編碼

告訴瀏覽器到哪一個字符集庫當中找對應的字符進行顯示

比如現在網頁當中寫的是中文.如果你指定的ASCII字符集

瀏覽器就會到ASCII字符集庫當中找對應的漢字進行顯示.

但是ASCII字符集庫中只有英語和其他西歐語言。

沒有漢字,就會在網頁當中顯示亂碼!

開發中我們都是使用UTF-8的字符集庫,因為它里面幾乎包含了全世界所有國家的字符,

所以到它當中肯定能找到對應的內容進行正確的顯示!

基礎標簽

<title>定義文檔的標題。

瀏覽器標簽顯示的標簽

```html

<!DOCTYPE html>

<head>

</head>

<body>

網頁內容

</body>

</html>

```

<h1> 到 <h6>定義標題

<body>

</body>

```

<p>定義段落。

<hr>定義水平線。

```html

<hr>我是水平線

```

<br>定義簡單的換行。

```html

<br>我是換行

```

定義注釋。

```html

```

基本樣式

可以的標簽當中添加一些基本的樣式

這些樣式可以修改字體的大小,顏色,讓文字更加豐富起來

礎準備

我使用的是Hbuilder編輯器，在hbuilder中創建一個HTML文件。

在hbuilder中運行HTML文件

效果

HTML文檔結構

<!DOCTYPE html>
<html>
	<head>
		<!--網頁的頭部 -->
	</head>
	<body>
		<!--網頁內容 -->
	</body>
</html>

<!-- -->   用于注釋代碼

HTML常用標簽

基礎標簽

html 最外層的元素
head 網頁的頭部
title 網頁的標題
body 網頁內容

文本格式化

i/em 斜體
strong 加粗
q 引用
blockquote 長引用
code 元素定義編程代碼示例

<i>武漢，加油！</i>
<em>湖北,加油！</em>

<strong>武漢，加油！</strong>

<q>HX是輕量編輯器和強大IDE的完美結合體。敏捷的性能，清爽的界面，強大的功能和于一身。</q>

<blockquote>
  HX是輕量編輯器和強大IDE的完美結合體。敏捷的性能，清爽的界面，強大的功能和于一身。
</blockquote>

<code>var a=1 </code>

實驗效果

標題段落

h1-h6 表示標題數字越大字體越小
p 段落標簽
hr 水平分割線
br 換行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用標題和段落</title>
	</head>
	<body>
		
		<!-- 標題-->
		<h1>武漢加油！</h1>
		<h2>武漢加油！</h2>
		<h3>武漢加油！</h3>
		
		<h4>武漢加油！</h4>
		<h5>武漢加油！</h5>
		<h6>武漢加油！</h6>
		
		<!--段落標簽-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>
	
	    <hr > <!--水平分割線-->
		<p>武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！武漢加油！</p>

<!-- 換行符-->
武漢加油！武漢加油！武漢加油！武漢加油！
<br>武漢加油！武漢加油！武漢加油！
        
	</body>
</html>

塊元素

div 盒子
span 功能和div類似，span可以用來裝一小段文字和div的區別就是在一行內顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ </i>
		
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		<div style="background-color: aqua;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</div>
		
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
		<span style="background-color: blue;">
			武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！ 武漢加油！
		</span>
	</body>
</html>

最終效果

圖片

img
img標簽必須加上 src屬性才能把圖像展示出來
alt屬性：當圖片沒有辦法顯示的時候用來提示用戶的文字
title屬性：當鼠標移動到圖片的時候，用來提示用戶的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圖片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="風景圖" title="測試圖片" >
	</body>
</html>

鏈接

a標簽超鏈接
href屬性：超鏈接的地址
target屬性：_blank 表示新建一個瀏覽器標簽頁來顯示超鏈接的內容，不會覆蓋原來的網頁_parentsearchtop

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>

列表

ol 有序列表
ul 無序列表
li 列表項
type 定義類型
disc 實體圓點
circle 空心圓
square 實體方形
a 小寫字母（有序）
A 大寫字母（有序）
默認數字（有序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 無序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>

表格

tablecaption 表格標題
th 表頭
tr 行
td 單元格

近也面試了幾家公司，我也來說說里面的一些經歷和感悟。

面試時求職者和HR如何當好各自的角色

創業公司最大的特點大家都知道，資金較為短缺，目標較為遠大，員工需要保持高度熱情，我以前也在創業公司呆過，自己也創過業，所以對這類公司還是很有體會的。曾經在一家創業公司里面就有類似每天早上按時打雞血，老總隔三差五畫大餅的事情。我其實挺尊重創業者的，因為任何牛逼的公司也都有過創業時期，但是說實話我對畫餅真的還是挺反感的(吃太多所以反胃也正常)。前兩天聽錘子手機老總羅永浩早期的演講才知道這個叫“毛氏管理法”。利用的思想就像老毛招兵一樣，雖然我們很窮，但是我們有遠大的理想，等仗打勝了，大家都是國家的主人，到時候就要什么有什么了(至于有什么，現在還不知道，因為還沒有勝利，勝利了就知道了，總之少不了你的)。(至于能不能像老毛一樣取得革命勝利，這個就不好說了。)

這樣說也許有人會覺得不妥，因為沒有最牛的技術，只有最牛的使用者。但是又有“公欲善其事，必先得其器“，任者見任，智者見智吧，可是說實話博主實在是不能忍受如今還用ASP這種低效率，后端和HTML都揉在一起寫的動態網頁技術。所以當時我就對面試官司說，這就好比你讓我用箭還是用槍去打獵的時候我肯定優先選擇用槍(盡管我從來沒用過，但是我知道槍的準確性高，射程遠)。

話說到一家公司任職，有一個開明的領導是很重要的，保守的領導會也會有個保守的思想，這跟軟件行業的不斷更新是相違背的，因此你可以想像上面那種還在用asp開發程序是多么痛苦，當然如果能有5W的月薪，這種痛苦還是可以試著克服一下，畢竟我們也不是那么矯情的人。但是往往這種在技術上保守而在金錢上放得開的領導少之又少，所以還是選個綜合都比較開明的領導來得實際。

面試了幾家公司，有些有筆試，有些有機試，有些都沒有，有些都有。對于有筆試的，我一般視情況而定有兩種做法，第一種，如果筆試普通比較簡單，但是題量大，需要很多時間(40分鐘以上)，一般這種我會直接告訴接待說我不愿意做，因為太簡單(沒錯，這種姿態是比較高，目的也是這樣，就是讓面試官覺得你略顯囂張，從而跳過這一步，以一個高的起點進入面試環節。不過得慎用)。第二種，題量小同時又比較有意義的(這種很主觀，需要自己判斷)，還是可以做一下。

至于機試，我認為完全沒有必要。特別是寫SQL，原因是我認為簡單的SQL沒必要寫，有深度的SQL，一時半會也很難將其寫漂亮，尤其是你作為一個面試者的時候。同樣的道理，你也很難在面試那么短的時間類做一個比較顯示你水平的DEMO。

我想不到，面試技術職位也能碰上這個問題，我認為這么感性的問題就不要問技術宅了，況且我相信大多數人壓根就沒有想過這么深奧的問題。除非你想得到諸如”我太過追求完美“、“我太過執著”這樣逼格十足的答案。當然我的答案是這樣的：

我怎么會知道，我知道我就改了，我要是知道又不改，我不是相當于告訴你我頑固不化么。

總結：

不管是面試官還是面試者其實要想當好各自的角色都很有學問，就像“ 面試官 + 求職者=貓 + 老鼠? 這篇文章及評論一樣，可謂“公說公有理，婆說婆有理”，愿我們能找到其中的平衡，最終實現“程序猿不再為難程序猿”。

在線咨詢

上一篇：怎樣下載主流視頻網站的視頻并確保mp4格式？
下一篇：VBA爬蟲輕松搞定網頁數據提取

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端復習 html(一)

礎準備

HTML文檔結構

HTML常用標簽

您的項目需求