I can 前端-01 HTML

今晚的月度會議，又被洗腦了一遍，也不能說是洗腦，是無情的揭露，目標是不是真的遙不可及，我們是不是還有學生綜合症。前端我是不是真的做不到獨當一面的高手，我是不是懶惰了，我爲什麼學英語，我週末都在做什麼，我爲什麼不願意加班，我爲什麼身材臃腫……這些種種，答案呼之欲出，不是做不到就是不願意付出，做啊，殺氣呢！?看到櫻桃的發言，我就想到一個詞，靈魂人物，這個公司我加入不到一個月，現狀是這麼的年輕，意味着我可以有更大的機會，我是不是該做點什麼，現狀既然是這樣，我一點點來改變，前端是我的痛，那我就學，那我就多做————-紀念2017-9-7晚月度會議

① 圖片

<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />

src 圖片路徑
alt 圖片沒有加載出來，圖片位置顯示alt文本

② 超鏈接

一般用法

<a href="http://www.w3school.com.cn" target="blank">W3School</a>

href 點擊後跳轉的URL
target 何處打開URL （blank-新打開一個頁面）
中間 鏈接顯示的名字

嵌套圖片

<a href="http://www.w3school.com.cn">
<img src="/i/eg_tulip.jpg"/></a>

錨

<a href="http://www.w3school.com.cn" name="first">A</a>
<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />
<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />
<a href="#first">B</a>

“錨”：點B，頁面回到A處
場景：頁面下拉長，側面使用可以找到幾個節點定位再幾個標題處
語法：a標籤的href=“#另一個a標籤的name”
***： 每種標籤都有name屬性

跳轉郵箱

href=”mailto:郵箱名”

③文本

標題

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

有h1-h6 6種，數字小，文字大

字體

<font size="5" face="arial" color="red">

size：字號
face：字體
color：顏色

字型

<b>這是粗體文本</b>
<strong>這是粗體文本</strong>

<b>這是斜體文本</b>
<em>這是斜體文本</em>

<u>下劃線</u>
<s>字間線</s>

段落

雙p標籤 段落

<p>這是段落，我的下面會空1行。</p>

單p標籤 空行

1
<p>
1

br標籤 換行

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

hr標籤 水平線

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

pre預定義格式

<pre>
我
 是
   少
     年
</pre>

轉義字符

空格

<p>空&nbsp 格</p> --注意空一格

雙引號

<p>空&quot 格</p> --注意空一格

④ 列表

有時候記不清，o是order，有序，或者記地正方圓纔有規則，o是圓的是，是有序的

無序列表：ul+li

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表：ol+li

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

自定義列表

<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

⑤ 表格

table（表格） tr （行） th（列） td（格）
rowspan （跨行） colspan （跨列）
cellspacing （單元格間距） cellpadding （單元格內間距）

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
<tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

⑥ 表單

結構
method表示以什麼形式發送，明文get或者加密post
action表示信息發送到哪裏

<form action="form_action.asp" method="get"></form>

文本框

<form method="post"><input type='text' /></form>

密碼框

<form method="post"><input type='password' /></form>

單選按鈕：type是radio，需要name一致纔會互斥

<form method="post">
<input type="radio" name="1" />
<input type="radio" name="1">
</form>

複選框

<form method="post">
<input type="checkbox" />
<input type="checkbox" />
</form>

下拉列表

<form method="post">
<select>
<option value="1">語文</option>
<option value="2">數學</option>
</select>
</form>

一般按鈕

<form method="post">
<input type="button" value="我是按鈕">
</form>

表單提交

<form method="post">
<input type="submit" value="點我提交">
</form>

⑦ 其他標籤

meta-寫圖片描述
1. 用來指定代碼使用的規範
2. keyword用來寫關鍵字，用來瀏覽器分類
3. description用來寫描述

marquee-滾動

這個就像走馬燈一樣，控制文字或者圖片從哪裏到哪裏，速度多少，記得小時候垃圾網站經常會彈出這樣的，不過現在很少見這樣的風格了，所以這個標籤也用的少了