01---HTML+CSS---基礎標籤

好大的汪汪發表於2018-01-17
HTMLCSS

頁面介紹：

網頁頁面：
文字
標籤（html標記）----給不同的文字打上不同的標記（單標籤/雙標籤）
css----修飾標記，美觀（排版）
html檔案----結構 + 樣式
<!DOCTYPE html>：是一個文件宣告，告訴瀏覽器，符合h5，可以使用h5的所有新標籤（新標籤增加瀏覽器可讀性）。
單標籤：不用寫閉合符號。
<html lang="zh-Hans">：代表地區語言。en/zh-hans/zh-cn......
<head></head>:頭部，可以放給瀏覽器看的東西。
<body></body>：網頁主體

HTML基礎標籤：

1、標題標籤:

標籤:<h1></h1>~<h6></h6>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

數字越大，字越小。h1一個頁面寫一個。

2、段落標籤

標籤對:<p></p>
<!-- p標籤  段落  文章每一段 分段了都可以用這個寫 -->
<p>不忘初心方得始終, 四座, 大西瓜</p>
<p>不忘初心方得始終, 四座, 大西瓜</p>
<p>不忘初心方得始終, 四座, 大西瓜</p>
<p>不忘初心方得始終, 四座, 大西瓜</p>
<p>不忘初心方得始終, 四座, 大西瓜, w</p>

3、斜體標籤

標籤對:<i></i>  <em></em>
<i>破釜沉舟</i>
<em>喵星人</em>

兩個效果一樣，em > i

4、加粗標籤

標籤對:<b></b>  <strong></strong>
<b>初心</b> <!-- 樣式強調 -->
<strong>大哈劉二</strong>

效果一樣，strong基本上不用了。

5、盒子（div）標籤

標籤對:<div></div>

<!-- div 一般盒子 分割頁面 -->
<!-- 標籤裡邊寫了 style屬性 行內樣式 寫在標籤裡邊的css樣式  border: 實線 -->
<div style="width: 100px;height: 50px;border: 1px solid red">湛瀘</div>
<div style="width: 100px;height: 50px;border: 1px solid red">溫柔的王</div>
<div style="width: 100px;height: 50px;border: 1px solid red">空空如也</div>
<div style="width: 100px;height: 50px;border: 1px solid red">巷子深</div>

px：畫素。

注意：快捷選擇：Ctrl+d 或者 按住Ctrl用滑鼠點選控制游標。

6、span標籤:

標籤對:<span></span>
<!-- 寫頁面的時候 最好不要單獨把文字暴露在 文件中 -->
<div>
    <span>金剛腿 鐵頭功</span>
    <p><span>鐵頭娃, 你是鐵頭</span></p>
</div>


<span>劉欣</span>


<p><span style="color: red">新浪</span>網新聞中心是<span style="color: red">新浪</span>網最重要的頻道之一,24小時滾動報導國內、國際及社會新聞。每日編髮新聞數以萬計。</p>
<!--
    網頁主題內容 都在這個地方編寫
 -->

通常用來組合使用。

7、換行標籤

<br>

8、a連線標籤

標籤對:<a></a>

頁面跳轉：

<a id="a">a標籤</a>
<a href="02 index.html">我跳了</a>
<!-- 別跳死了 注意加http -->
<a href="http://www.baidu.com" target="_blank" >我跳了</a><!-- blank：新開啟一個頁面 -->

錨點跳轉：

<a href="#haha">哈哈</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id="haha">哈哈哈</a>

9、img標籤01---HTML+CSS---基礎標籤:

標籤對:<img></img>
<!--
    alt作用 為了圖片不顯示的時候 描述圖片的資訊
    title作用 圖片顯示時也顯示資訊
-->
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=949354588,677085984&fm=27&gp=0.jpg" alt="學生卡嘀嘀嘀" title="開火車了上車了嗚嗚嗚~~" width="800">

只給width，高度就自適應。

若：圖片的大小有兩個：
假設圖片本身的大小：600/200
我需要它顯示的大小：300/100
答：寫原圖大小（是圖片的屬性），給搜尋引擎看的。

10、分割線

標籤對<hr>

特殊符號：

這裡寫圖片描述

補充標籤（有的地方已經廢棄）：

<marquee></marquee>
<marquee behavior="alternate" direction="up" style="width: 300px;height: 300px;border: 5px solid red">
    <marquee behavior="alternate" direction="left">
        小祺老師麼麼噠
    </marquee>
</marquee>

相關文章