html tag

由 datahunter 在一, 06/07/2015 - 22:00 發表

最後更新: 2015-05-18

定義 .htm 檔是 HTML Version 5

<!DOCTYPE html>
<html>
  ...
</html>

HTML <head> tag

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">

    <meta name="description" content="testing page">
    <meta name="keywords" content="test, header">
</head>

Auto refresh

<html>
 <head>
  <meta http-equiv="refresh" content="3; url=http://www.somewhere.com/" />
 </head>
</html>

span

The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

i.e.

<span style="color:blue">blue</span>

textarea

<textarea rows="10" cols="80" style="width: 300px; height: 150px; overflow-y: scroll; resize: none;">
這裡的是 Default 內容
</textarea>

Default 大小

html input box disable history

Useful HTML Character

non-breaking space  

x ×

Image data URIs

# data:[<mime type>][;charset=<charset>][;base64],<encoded data>

i.e.

button

<button type="button">Click Me!</button>

type:

button
reset
submit

# value <- initial value

<button name="myinput" type="submit" value="test">test</button>

# disabled

<button type="button" disabled>Click Me!</button>

# Refresh

<input type=button value="Refresh" onClick="window.location.reload()">

# html button onclick go to page

<1>

<button onclick="location.href='http://www.example.com'"></button>

<2>

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

# form

<form action="form.php" method="get" id="form1">
  Name: <input type="text" name="name"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

* method="post"

input - autofocus

<form action="/test">
  test: <input type="text" name="test" autofocus><br>
  ...........
</form>

select

<select name="type_list" form="formID">
  <option value="0">A</option>
  <option value="1" selected="selected">B</option>
  <option value="2">C</option>
</select>

* Split html forms

<form id="formID" action="action" method="post">
    Text: <input type="submit" value="some_id" name="some_name" />
</form>

fieldset

* Group related elements in a form:

<form>
  <fieldset>
    <legend>Info:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
  </fieldset>
</form>

<legend>

a caption for the "fieldset" element

Attribute:

disabled # <fieldset disabled>

form=id # the <form> element its related to.

name # which is submitted with the form data

Button

# button 的 style

<button type="button"
    style="
      background-color:yellow;
      margin-left:auto;
      margin-right:auto;
      display:block;
      margin-top:22%;
      margin-bottom:0%">
mybuttonname</button>

# 把 button 放中間

<div style="text-align: center;">
   <input type="button" value="button">
</div>

# hidden value

<input type="hidden" name="id" value="1">

# mobile keypal

<input type="tel">

label

<label for="male">Male</label>

The <label> tag defines a label for an <input> element.

* A label can be bound to an element either by using the "for" attribute

Table

Tag

<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
<th>...</th>
<tr>...</tr>
<td>...</td>

th 與 td 的分別

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Code:

<table id=t1>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
  </tr>
</table>

Default 的 table 是沒有框的, 如果要有框, 在 HTML5 的標準下, 那要用 css 去實現

# 外框

table {
  border: 1px solid black;
}

# 整個 table 有框

table, th, td {
    border: 1px solid black;
}

# 單線框

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

# 個 table 有多闊

  width:100%;

# padding

th, td {
    padding: 15px;
}

align

left
center
right

The align attribute of <table> is not supported in HTML5. Use CSS instead.

CSS syntax: <table style="float:center">

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Table 內的水平線

<1>

<tr><td colspan="3"><hr size="1"/></td></tr>

<2>

<tr><td colspan="3" style="border-bottom: 1px solid #000;"></td></tr>

rowspan

<td rowspan="2">content</td>

colspan

<td colspan="2">content</td>

Encode Character

&lt;          # <
&gt;          # >
&amp;         # &
&quot;        # "

瀏覽次數： 1903

夢想家