-->

2016-12-13

html 整理


html 整理

使用 CSS

<head> 底下加入

 <style>
 body {background-color: powderblue;}
 h1   {color: blue;}
 p    {color: red;}
 </style>

使用外部連結檔案

使用 CSS,在<head>底下,輸入

  <link rel="stylesheet" href="styles.css">

可參考 –> HTML Styles - CSS

使用 Javascript,不需再<head>底下,任何地方都可以加入

  <script src="myScript.js"></script>

使用 Javascript

<script>
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

我是註解

html 裡可用的註解是

   <!-- 我是註解 -->

Javascript 裡可用的註解是

// 一行註解

/*     
 *  我是多行註解
 */

屬性設定

正常設定:

<p title="I'm a tooltip">

CSS設定:

<tagname style=" property:value; ">
<h1 style=" color:blue; ">This is a heading</h1>
<p style=" color:red; ">This is a paragraph.</p>
<img src=" pic_mountain.jpg " alt=" MountainView " style=" width:304px;    
height:228px; ">

注意:有分號 ; 結尾


內文常用

<p> 我是段落 </p>
<strong> 我是粗體 </strong>
<em> 強調重點 emphasized </em>
<mark> 黃底重點 </mark> 
<kbd> 鍵盤符號 keyboard </kbd>
<pre><code> 依照自己的喜好來編排 </code></pre>
<br> 換行 唯一可以單獨存在的標籤符號
<span style="color:red" >改顏色 Important </span>

上標,下標,加入註解

The HTML element defines superscripted text.

The HTML element defines <sup>superscripted</sup> text.

The HTML element defines subscripted text.

The HTML element defines <sub>subscripted</sub> text.

顏色設定

顏色設定最好是用顏色名稱來設定,例如 blue , white , yellow
可以一看就知道是什麼顏色,假如用 rgb(255,0,0) 或 #FF00FF
不知道是什麼顏色,增加自己的困擾。

參考顏色名稱設定:-> Color Names


定義自己的格式

可用 class 屬性來設定

.error {
    color: red;
}

<p class="error">I am different</p>

html 元素參考

參考資料 所有元素列表

所有元素都一定有的屬性( Global Attributes )
accesskey , class , dir , id , lang , style , tabindex , title

沒有留言: