前端入門 —— HTML 基礎知識一勺燴

公司最近人手極度空缺休蟹，領導一聲令下，讓我和另一個 Android 小伙去支援 Java 組開發(fā)日矫。秉承著“一塊磚”的精神赂弓，我完全服從領導安排。做什么都是做哪轿，就怕自己停滯不前盈魁。羽哥也安慰我說：“技不壓身”。但趕鴨子上架做了一周之后窃诉，發(fā)現根本不行杨耙。這一周下來赤套，我連自己做了什么、怎么做的珊膜、原理流程都是什么一點都不知道容握。這樣不行，只會復制粘貼可不行车柠，況且大多數時候剔氏，從哪復制粘貼到哪我都不清楚。
于是下決心先入個門吧竹祷。我們過去主要就是改一些前端頁面谈跛，那我就先從前端知識開始吧。
HTML塑陵，就是你了感憾。就從你先開始！

HTML 是一種標記語言令花，它是用來描述網頁格式的阻桅。雖然它本身不能顯示在瀏覽器中，但經過瀏覽器的解釋和編譯彭则，在瀏覽器中就可以正確顯示 HTML 的格式鳍刷。

1 HTML 元素

HTML 文檔是由一個個元素拼湊而成的，元素的構成分為三部分：

  • 開始標簽（opening tag）
  • 元素內容
  • 結束標簽（closing tag）

1.1 元素語法

  • 以開始標簽起
  • 以結束標簽止
  • 元素內容即開始標簽與結束標簽中的內容
  • 某些 HTML 元素可具有空內容
  • 空元素在開始標簽中進行關閉
  • 大多數元素都具有屬性

1.2 元素實例及解析

下面看一個 HTML 實例：

<!DOCTYPE html>
<html>
?
<body>
<p>這是第一個段落俯抖。</p>
</body>
?
</html>

上面的實例用到了三個元素：

  • <p> 元素：
    ?<p> 元素定義了 HTML 文檔中的一個段落输瓜。

  • <body> 元素：
    ?HTML 文檔的主題。

  • <html> 元素：
    ?<html> 元素定義了整個 HTML 文檔芬萍。

然后尤揣，看一下在瀏覽器中顯示的效果：

GG，出現了中文亂碼的問題柬祠。這種問題的解決方法在網上一搜一大把北戏，我的解決方法是限定了一下編碼格式：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<body>
<p>這是第一個段落。</p>
</body>
?
</html>

重新運行一下：

解決漫蛔！

1.3 注意：

  • <!DOCTYPE> ：
    ?上面的元素解析中沒有提到 !DOCTYPE 嗜愈，因為它并不是元素的一部分，它只是一份聲明莽龟，因為網絡上有很多不同的文件蠕嫁，聲明正確的 HTML 版本，讓瀏覽器能夠正確顯示網頁毯盈。
    完整的網絡聲明類型：DOCTYPE 參考手冊

  • 別忘記結束元素標簽：
    ?雖然即便不寫結束標簽剃毒，大多數瀏覽器也能夠正確的顯示內容，但還是不要依賴這種寫法。

  • 建議使用小寫標簽：
    ?HTML 標簽對大小寫不敏感：<P> 等同于 <p>赘阀。但是萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫益缠，并且在未來 (X)HTML 版本中強制使用小寫。

2. HTML 屬性

屬性是 HTML 元素的附加信息基公，一般在元素的開始菜單中進行描述幅慌，并且屬性總是以名稱/鍵值對的形式出現。

2.1 屬性實例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 屬性</title>
</head>
?
<body>
<a >這是一個鏈接</a>
</body>
</html>

看代碼說話酌媒，上面代碼中定義了一個鏈接欠痴，HTML 中鏈接由 <a> 標簽定義，鏈接地址寫在 href 屬性中秒咨，其中
即為元素的屬性喇辽。
然后屬性始終在括號內，屬性值一般用雙引號標注雨席，單引號也可以菩咨。但是如果屬性值中有雙引號存在，那么屬性值就必須用單引號標注陡厘。
看一下瀏覽器中運行效果：

2.2 屬性參考手冊大全

HTML 標準屬性參考手冊

3. HTML 標題

標題是通過 <h1> - <h6> 標簽進行定義的抽米，<h1> 是最大的標題，<h6> 是最小的標題糙置。

3.1 標題實例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 標題</title>
</head>
?
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>

效果：

3.2 HTML 水平線

<hr> 標簽可以在 HTML 中創(chuàng)建水平線云茸，可用于分割內容。
在代碼中使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 標題</title>
</head>
?
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
?
<body>
<p>hr 水平線：</p>
 <hr />
 <p>段落1</p>
 <hr />
 <p>段落2</p>
 <hr />
 <p>段落3</p>
</body>
</html>

運行效果：

3.3 HTML 注釋

HTML 中的注釋與 Java 有所不同谤饭，是這樣使用注釋的：
``

4. HTML 段落

HTML 可以將文檔分割成若干段落标捺，方便閱讀。

4.1 使用段落

段落是通過標簽 <p> 進行定義的揉抵，在之前的代碼中使用過亡容，就不演示了。

4.2 換行

如果你不想將一段長文在產生一個新段落的情況下進行換行冤今，就使用
標簽進行分割闺兢。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 段落</title>
</head>
?
<body>
<p>演示換<br>行效果</p>
</body>
</html>

效果：

4.3 注意：

在 HTML 代碼中不能通過添加額外的空格或換行來改變輸出的效果。
當顯示頁面時戏罢，瀏覽器會移除源代碼中多余的空格和空行屋谭。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是龟糕，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格戴而。

5. HTML 文本格式化

文本格式化部分沒有什么好說，直接看代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 文本格式化</title>
</head>
?
<body>
<b>文本加粗</b><br><br>
<i>文本斜體</i><br><br>
<code>電腦自動輸出</code><br><br>
<sup>上標</sup> 和 <sub>下標</sub>
</body>
</html>

效果：

代碼釋義很簡單翩蘸，就不講了。

5.2 HTML 文本化標簽

下面看一下常用的 HTML 文本化標簽：

5.3 HTML 計算機輸出標簽

5.4 HTML 引文淮逊、引用及標簽定義

6. HTML 鏈接

HTML 使用標簽 <a> 來實現超鏈接催首。超鏈接可以是一個字扶踊、一組詞甚至是一張圖片。

6.1 使用

上文中已經使用過鏈接郎任，這里就不具體展出了秧耗。只需要知道格式就可以：
<a href="url">*鏈接文本*</a>

6.2 target屬性

使用 target 屬性，可使被鏈接的文檔在何處被打開：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 鏈接</title>
</head>
?
<body>
<a  target="_blank">這是一個鏈接</a>
</body>
</html>

上面的代碼實現在新窗口中打開鏈接：

6.3 id 屬性

id 屬性可用于在一個 HTML 文檔中創(chuàng)建標記舶治。
具體實現：

  • 在HTML文檔中插入ID:
    <a id="tips">有用的提示部分</a>
  • 在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
    <a href="#tips">訪問有用的提示部分</a>
  • 或者分井，從另一個頁面創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
    <a >
    訪問有用的提示部分</a>

7. HTML 頭部

7.1 <head> 元素

head 元素包含了所有的頭部標簽元素收津。在 head 元素中你可以插入腳本（scripts）, 樣式文件（CSS）嘱吗，及各種meta信息葫笼。

7.2 <title> 元素

title 元素定義了不同文檔的標題咸产，包含瀏覽器工具欄的標題肌割、收藏夾的標題以及搜索結果頁面的標題税稼。

7.3 <base> 元素

base 元素定義了基本的鏈接地址肝匆，該標簽作為文檔中所有鏈接的默認目標懂讯。

7.4 <link> 元素

link 標簽定義了文檔與外部資源的關系坛悉，通常用于鏈接到樣式表伐厌。

7.5 <style> 元素

style 元素定義了文檔引用的樣式文件的地址，也可在 style 中直接定義樣式來渲染 HTML 文檔裸影。

7.6 <meta> 元素

meta 元素描述了文檔中的一些基本的元數據挣轨。這些元數據不顯示在瀏覽器頁面上，但會被瀏覽器解析轩猩。META 元素通常用于指定網頁的描述卷扮，關鍵詞，文件的最后修改時間界轩，作者画饥，和其他元數據。

7.7 <script> 元素

通常用于加載 script 文件浊猾。

8. HTML 圖像

8.1 圖像標簽和源屬性

圖像由 <img> 標簽定義抖甘，<img> 是空標簽，即沒有閉合標簽葫慎。然后要在頁面上顯示圖像衔彻，還要使用源屬性——src，即圖像的 url 地址偷办。
定義圖像的代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 鏈接</title>
</head>
?
<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

效果：

顯示成功艰额！

8.2 alt 屬性

alt 屬性用來為圖像定義一串可替換的文本。在瀏覽器無法載入圖像時椒涯，替換文本屬性告訴讀者她們失去的信息柄沮。此時，瀏覽器將顯示這個替代性的文本而不是圖像。
使用也十分簡單祖搓，就在 img 元素中添加即可：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 鏈接</title>
</head>
?
<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

8.3 高度與寬度

可以看到狱意，剛才顯示的圖像太大了，那么這里就可以通過設置圖像的寬高來進行限定拯欧。
height（高度） 與 width（寬度）屬性用于設置圖像的高度與寬度详囤。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 鏈接</title>
</head>
?
<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

效果：

9. HTML 表格

表格由 <table> 標簽來定義，每個表格均有若干行（由 <tr> 標簽定義）镐作，每行又被分為若干格（由 <td> 標簽定義）藏姐。
先看一個表格實例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>
?
<body>
<table>
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

9.1 邊框

表格的邊框由 border 屬性定義：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>
?
<body>
<table border="1">
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

9.2 表頭

表頭由 <th> 標簽定義：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>
?
<body>
<table border="1">
 <tr>
       <th>表頭1</th>
       <th>表頭2</th>
   </tr>
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

關于表格就介紹這么多，更多樣式的還是要在項目中活學活用该贾。下面是表格標簽：

10. HTML 列表

HTML 列表分為有序列表和無序列表羔杨。

10.1 無序列表

無序列表使用 <ul> 標簽進行描述，每個列表項始于 <li> 標簽靶庙，使用小黑點進行標記问畅。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>
?
<body>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
</ul>
</body>
</html>

效果：

10.2 有序列表

有序列表使用 <ol> 標簽進行描述，每個列表項始于 <li> 標簽六荒，使用數字進行標記护姆。
在上面的代碼中添加有序列表：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>
?
<body>
<p>無序列表</p>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
</ul>
</body>
?
<br><br>
?
<body>
<p>有序列表</p>
<ol>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
</ol>
</body>
</html>

效果：

10.3 自定義列表

除此之外，HTML 還支持自定義列表掏击。
自定義列表不僅僅是一列項目卵皂，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始砚亭。每個自定義列表項以 <dt> 開始灯变。每個自定義列表項的定義以 <dd> 開始。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>
?
<body>
<p>無序列表</p>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
</ul>
</body>
?
<br><br>
?
<body>
<p>有序列表</p>
<ol>
<li>香蕉</li>
<li>蘋果</li>
<li>橘子</li>
</ol>
</body>
?
<br><br>
?
<body>
<p>自定義列表</p>
<dl>
<dt>香蕉</dt>
<dd>- 芭蕉科芭蕉屬植物捅膘，又指其果實添祸。</dd>
<dt>蘋果</dt>
<dd>- 美國的一家高科技公司。</dd>
<dt>橘子</dt>
<dd>- 是蕓香科柑桔屬的一種水果寻仗。</dd>
</dl>
</body>
</html>

效果：

11. HTML 區(qū)塊

大多數 HTML 元素都被定義為塊級元素和內聯元素刃泌。

11.1 區(qū)塊元素

塊級元素在瀏覽器中顯示時，會以新行開始和結束署尤。
實例: <h1>, <p>, <ul>, <table>

  • <div> 元素
    <div> 元素就是塊級元素耙替。它沒有特定的含義，只是將 HTML 各元素組合起來曹体。<div> 元素另一個用途是替代 <table> 進行表格布局俗扇，<table> 元素只顯示表格化數據使用。

11.2 內聯數據

內聯數據顯示時通常不會以新行開始箕别。
實例: <b>, <td>, <a>, <img>

  • <span> 元素
    <span> 是內聯元素铜幽，它也沒有任何特定含義滞谢，可用作文本的容器。另外除抛，與 css 一同使用時爹凹，<span> 元素可用于為一些文本設置文本屬性。

12. HTML 表單

表單使用 <form> 標簽來設置镶殷，表單元素允許用戶在表單中輸入數據，如文本域微酬、下拉列表绘趋、單選/復選框等。
多數情況下被用到的表單標簽是輸入標簽 <input>颗管，輸入類型由 type 類型屬性定義陷遮，大多數被用到的輸入類型如下。

12.1 文本域

文本域通過<input type="text"> 標簽來設定垦江，當用戶要在表單中鍵入字母帽馋、數字等內容時，就會用到文本域比吭。
<input type="text", name="first_name">

12.2 密碼

密碼字段通過標簽<input type="password"> 來定義:
<input type="password", name="pwd">

12.3 單選按鈕

單選按鈕通過 <input type="radio"> 來設置：
<input type="radio" name="sex" value="是">是

12.4 復選按鈕

復選按鈕通過 <input type="checkbox"> 來設置：
<input type="checkbox" name="vehicle" value="評論">評論<br>

12.5 按鈕

按鈕通過 <input type="button"> 來設置：
<input type="button" value="登陸">

綜合以上表單輸入類型绽族，來看一下最終在瀏覽器上的實現效果：

13. HTML iframe

Iframe 標記，又叫浮動幀標記衩藤，你可以用它將一個 HTML 文檔嵌入在另一個 HTML 中顯示吧慢。

13.1 使用

iframe 語法為：
<iframe src="URL"></iframe>

看一下使用方法，我們以之前顯示圖像的 HTML 文檔為例赏表，將他顯示在 iframe 文檔中：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>
?
<body>
<iframe src="C:\Users\Wang-gk\Desktop\臨時\HTML HTML5 codes\圖像.html"></iframe>
</body>
</html>

效果：

13.2 寬高設置

可以看到检诗，上面顯示的 HTML 文檔顯示的不全，那么也可以像設置圖像寬高一樣瓢剿，設置其寬高：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>
?
<body>
<iframe src="C:\Users\Wang-gk\Desktop\臨時\HTML HTML5 codes\圖像.html"
  width="600" height="400"></iframe>
</body>
</html>

效果：

這次顯示效果好多了逢慌。

13.3 移除邊框

如果你嫌顯示邊框很丑，那么你可以移除它间狂。

frameborder="0"

效果：

13.4 顯示目標鏈接

iframe 也可以顯示一個目標鏈接的頁面攻泼，但鏈接的屬性必須使用 iframe 的屬性。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>
?
<body>
<iframe src="C:\Users\Wang-gk\Desktop\臨時\HTML HTML5 codes\圖像.html"
  width="600" height="400" frameborder="0" name="iframe_id"></iframe>
?
<p><a  target="iframe_id">百度一下</a></p>
</body>
</html>

上面代碼結合了這幾個 iframe 的示例前标，通過代碼可以看出坠韩，點擊百度一下
鏈接，會在 iframe 上面顯示百度頁面炼列≈桓椋看一下效果：

14. HTML 腳本

腳本可以使 HTML 頁面具有更強的動態(tài)性和交互性。

14.1 <script> 標簽

<script> 標簽用于定義客戶端腳本俭尖，比如 JavaScript氢惋。
<script> 元素既可包含腳本語句洞翩，也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用于圖片操作焰望、表單驗證以及內容動態(tài)更新骚亿。

14.2 <noscript> 標簽

<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時熊赖，或瀏覽器不支持客戶端腳本時来屠。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時震鹉，才會顯示 <noscript> 元素中的內容俱笛。

15. HTML 字符實體

html 中的預留字符必須被替換為字符實體，一些在鍵盤上找不到的字符也可以用字符實體來替換传趾。
在 HTML 中迎膜，某些實體是預留的，例如小于號（<） 和大于號（>）浆兰，這是因為瀏覽器會誤認為它們是標簽磕仅。
HTML 中常用字符實體還有不間斷空格（&nbsp），因為瀏覽器總是將多個空格刪除簸呈，只留一個榕订，所以如果想留下多個空格，就必須使用字符實體（&nbsp）蝶棋。
更多 HTML 字符實體卸亮，請查看HTML 實體參考手冊。

16. 總結

HTML 的基礎知識大致上已經捋了一遍了玩裙，當然兼贸，肯定不能全部都涉及到，一個是時間短吃溅，再一個是即便都看全溶诞，我也不能全記住。我只把大致的語法和控件以及用法記住就好了决侈，更多的知識還是要活學活用螺垢。
這整個過程下來，讓我對 HTML 有了更加具象的理解赖歌。之前一直聽說 HTML 簡單枉圃，學了以后發(fā)現，確實是不難庐冯，但用好它還是要下一番功夫的孽亲。HTML 的功能我感覺和 Markdown 語法類似，實現的效果也都差不多展父。是返劲，我肯定我說的這句話在以后會被打臉玲昧，因為我才接觸前端多點的知識啊。但我現在這是看到的冰山一角篮绿，所以我只能對這一角進行描述孵延，等有天我把冰山的全貌都摸透，回過頭來再嘲笑現在的自己吧~
這一整個學習過程是在菜鳥教程上進行的亲配，整個步驟和許多釋義都是按照上面的理解進行記錄的尘应。但里面的各個例子都是我自己手敲了一遍。學的過程中吼虎，發(fā)現了鼎鼎有名的前端學習網站 W3school菩收，兩個教程的學習步驟和知識講解都差不多，但有的地方 W3school 確實比菜鳥教程上面講得細鲸睛。但當時已經跟著菜鳥學了大半了，就沒照著 W3school 上學坡贺。打算下一步學習 H5官辈、CSS 和 Js 時，參照著 W3school 上面進行學習遍坟。
就到這吧拳亿。

17. 參考

http://www.runoob.com/

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市愿伴，隨后出現的幾起案子肺魁，更是在濱河造成了極大的恐慌，老刑警劉巖隔节，帶你破解...
    沈念sama閱讀 206,723評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鹅经，死亡現場離奇詭異，居然都是意外死亡怎诫，警方通過查閱死者的電腦和手機瘾晃，發(fā)現死者居然都...
    沈念sama閱讀 88,485評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來幻妓，“玉大人蹦误，你說我怎么就攤上這事∪饨颍” “怎么了强胰？”我有些...
    開封第一講書人閱讀 152,998評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長妹沙。 經常有香客問我偶洋，道長，這世上最難降的妖魔是什么初烘？ 我笑而不...
    開封第一講書人閱讀 55,323評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任涡真，我火速辦了婚禮分俯，結果婚禮上，老公的妹妹穿的比我還像新娘哆料。我一直安慰自己缸剪，他們只是感情好，可當我...
    茶點故事閱讀 64,355評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布东亦。 她就那樣靜靜地躺著杏节，像睡著了一般。 火紅的嫁衣襯著肌膚如雪典阵。 梳的紋絲不亂的頭發(fā)上奋渔，一...
    開封第一講書人閱讀 49,079評論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機與錄音壮啊，去河邊找鬼嫉鲸。 笑死，一個胖子當著我的面吹牛歹啼，可吹牛的內容都是我干的玄渗。 我是一名探鬼主播，決...
    沈念sama閱讀 38,389評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼狸眼，長吁一口氣：“原來是場噩夢啊……” “哼藤树！你這毒婦竟也來了？” 一聲冷哼從身側響起拓萌，我...
    開封第一講書人閱讀 37,019評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤岁钓，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后微王，有當地人在樹林里發(fā)現了一具尸體屡限，經...
    沈念sama閱讀 43,519評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年炕倘，在試婚紗的時候發(fā)現自己被綠了囚霸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,100評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡激才，死狀恐怖拓型，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情瘸恼，我是刑警寧澤劣挫，帶...
    沈念sama閱讀 33,738評論 4贊 324
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站东帅，受9級特大地震影響压固，放射性物質發(fā)生泄漏。R本人自食惡果不足惜靠闭，卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一帐我、第九天 我趴在偏房一處隱蔽的房頂上張望坎炼。 院中可真熱鬧，春花似錦拦键、人聲如沸谣光。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0贊 19
  • 一樁弒父案芬为，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽萄金。三九已至，卻和暖如春媚朦，著一層夾襖步出監(jiān)牢的瞬間氧敢，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工询张， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孙乖，地道東北人。 一個月前我還...
    沈念sama閱讀 45,547評論 2贊 354
  • 代替公主和親
    正文 我出身青樓份氧，卻偏偏與公主長得像的圆，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子半火，可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2贊 345

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1贊 92
  • HTML標簽解釋大全 一季俩、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,225評論 1贊 41
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具（例如配置管理钮糖，服務發(fā)現，斷路器酌住，智...
    卡卡羅2017閱讀 134,600評論 18贊 139
  • ?投資200元 一輪本金?利息260元 ?投資300元 一輪本金?利息390元 ?投資400元 一輪本金?利息52...
    共享時代閱讀 538評論 0贊 0
  • 三國里，蜀漢是個特殊的存在都哭。劉備從一個織席販履的小卒完成了繼位大統(tǒng)的事業(yè)秩伞，個中艱辛，也許只有劉備本人才說得清楚欺矫。前...
    高冷男孩會逗比閱讀 517評論 0贊 2