Skip to content

week2.md

Jump to bottom
qwezxca123 edited this page Apr 4, 2021 · 33 revisions

第二週筆記

常用

<!DOCTYPE html>
<html>
<head>

<p style="color:red;">顏</p>

<p style="color:#fbabff;">色</p>

水平線
<hr>

跳<br>行

<p style="font-size:45px;">大</p>

<p style="font-size:150%;">小</p>

<p style="background-color:#abcdef;">背景色</p>

<p style="font-family:標楷體;">字體</p>

<p style="text-align:center;">置中</p>

<pre>
不  格
  式  化
</pre>

<b>粗</b>
<strong>體</strong>

<i>斜</i>
<em>體</em>

<mark>螢光筆</mark>

<del>刪除線</del>

<ins>底線</ins>

<sub>靠下</sub>

<sup>靠上</sup>

<bdo dir="rtl">西東的玩好</bdo><!--字反了過來(這不顯示)-->

<p style="border:2px solid #990099;">邊框</p>
<p style="border:2px dotted #999900;">點狀</p>
<p style="border:2px dashed #ffaa00;">虛線</p>

</html>

css默認設置

<style>
body {background-color:gray;}
h1 {font-size:66px;color:red;}
p {border:2px dashed #ffaa00;}
</style>
<h1>文字</h1>
<p>文字</p>

css連結檔案

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<h1>文字</h1>
<p>文字</p>

rel:表關聯檔案類型

文字結構

Margin
Border 邊框
Padding
Content 文字

Target

_self - 直接切換
_blank - 新分頁
_parent - 切換母視窗
_top - 最外層開新分頁

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

圖片

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

*兩種不同的大小給定方式
alt屬性:為找不到圖片連結時，顯示的說明

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

圖片連結

Tables 表格

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

tr:列
th:標頭
td:一般內容
font-family:字形
border-collapse:邊界坍塌
padding:內邊距
text-align:對齊(欲設置中)
border:邊線樣式

tr:nth-child(even) {
  background-color: #dddddd;}

*偶數列灰色

List 列表

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

*無序列表

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

*有序列表

區塊

<div style="border: 1px solid black">Hello World</div>

*獨立行

<span style="border: 1px solid black">Hello World</span>

*不換行

輸入物件

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">單選
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">網址
<input type="week">
Clone this wiki locally