HTML基礎學習筆記

時間 2019-11-05

標籤 html 基礎學習筆記欄目 HTML 简体版

原文原文鏈接

一、頁面

一、文件結構

<html>......</html>html

<head>......</head>面試

<body>.......</body>ide

<HTML>
<HEAD>
     <title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
  <h1>正文</h1>
</BODY>
</HTML>

二、語言字符集信息

基本上全部的網站的網頁都有，如今通常都是UTF-8,和GBK2312
佈局

三、背景色彩和文字色彩

<body bgcolor=# text=# link=# alink=# vlink=#>字體

bgcolor --- 背景色彩網站
text --- 非可連接文字的色彩ui
link --- 可連接文字的色彩url
alink --- 正被點擊的可連接文字的色彩spa
vlink --- 已經點擊(訪問)過的可連接文字的色彩

（顏色RGB16進制）

背景圖象 <body background="image-URL">

四、頁面空白(試了貌似無論用)

頁面左邊的空白 <body leftmargin=#>

頁面上方的空白(天頭) <body topmargin=#> #=margin amount

五、鏈接

<a href="#"></a> 有下劃線的鏈接

< name="#"></a>無下劃線不像連接

默認的是在原來的窗口打開

target="Window_Name" (打開一個新的窗口屬性)

下面百度是在新窗口打開

<a href="  target="Window_Name">百度</a>

六、標尺線

<hr>

標尺線的高度：<hr size=#>

例如：<hr size=10>

標尺線的寬度：<hr width=#>

例如：<hr width=50><hr width=50%>

標尺線的位置：<hr align=#> #=left, right

例如：<hr width=50% align=left> <hr width=50% align=right>

標尺線的顏色：<hr color=#>

例如：<hr color=#000000 >

<!doctype html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Document</title>
 </head>
 <body  bgcolor=#ff0033 text=#00ff99 link=#000099 alink=#330099  vlink=##66cc33>
  <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<a href="http://www.baidu.com">百度</a><br/>
<a name="http://www.baidu.com">百度1</a>
<hr>
<hr size=20>
<hr width=50>
<hr width=50%>
<hr width=50%>
<hr width=50%>
<hr noshade>
<hr color=#000000 >
 </body>
</html>

二、字體

一、標題字體

字體由大到小

<hn></hn>這些標記顯示黑體字，自動插入空行

二、字體大小

<font size=#>....</font>#=1,2,3,4,5,6,7

三、物理字體

加粗：<b>....</b>

斜體：<i>.....</i>

下劃線：<u>....</u>

打字機文本：<tt>...</tt>

上標註：<sup></sup>

下標註：<sub></sub>

刪除文本定義: <s></s> <strike></strike>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <b>加粗</b><hr>
  <i>斜體</i><hr/>
  <u>下劃線</u><hr/>
  <tt>打字機文本</tt><hr/>
  <sup>上標註</sup><hr>
  <sub>下標註</sub><hr>
  <s>可定義刪除文本</s><hr>
  <strike>可定義刪除文本</strike><hr>
 </body>
</html>

四、邏輯字體

強調字體傾斜：<em></em>

強調字體加粗：<strong></strong>

用於表示計算機源代碼或者其餘機器能夠閱讀的文本內容:<code></code>

短語標籤:<samp></samp>

鍵盤文本：<kbd></kdd>

變量的名稱<var></var>

對特殊術語或短語的定義<dfn></dfn>

註釋做用：<cite><cite>

小型文本：<small></small>

大字號:<big></big>

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <b>加粗</b><hr>
  <i>斜體</i><hr/>
  <u>下劃線</u><hr/>
  <tt>打字機文本</tt><hr/>
  <sup>上標註</sup><hr>
  <sub>下標註</sub><hr>
  <s>可定義刪除文本</s><hr>
  <strike>可定義刪除文本</strike><hr>
  <h1>邏輯字體</h1>
  <em>強調字體傾斜</em><hr>
  <strong>強調字體加粗</strong><hr>
  <code>用於表示計算機源代碼或者其餘機器能夠閱讀的文本內容</code><hr>
  <samp>短語標籤</samp><hr>
  <kdd>鍵盤文本</kdd><hr>
  <var>變量的名稱</var><hr>
  <dfn>對特殊術語或短語的定義</dfn><hr>
  <cite>註釋做用</cite><hr>
  <small>小型文本</small><hr>
  <big>大字號</big>
 </body>
</html>

物理風格直接指定字體的「樣式」（如粗、斜、下劃線）；

邏輯風格則是指定文本的「做用」（如示例文字、縮小文字）。

就像去餐館吃飯，點菜的時候，A告訴炒菜的師傅「炒得多一點」，這是物理風格，直接指定樣式；B告訴炒菜的師傅「炒得辣一點」，這是邏輯風格，指定做用。

五、字體顏色

六、客戶端字體

七、字符實體

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

三、文字佈局

一、行的控制

空行:<p>

換行：<br>

不換行<nobr>

二、文字的對齊

<hn align=#>...</hn> ( <h1><h2>......)
<p align=#>...</p> #=left, center, right

三、文字的分區顯示

<div align=#>...</div> #=left, center, right

四、列表

無序列表：<ul><li>.........</ul>

有序類表:<ol><li>..........</ol>

定義列表：<dl><dt>......<dd>.....</dl>

定製表中的標記：<li type=#> #=disk,circle,square

定製有序列表表中的序號:<li type=#> #=A,a,I,i,1

五、預格式化文本

六、塊引用:

七、閃爍

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<h1>中間</h1>
<div>你們愚人節快樂</div>
<div>你們愚人節快樂</div>
<div>你們愚人節快樂</div>
<blink>塊引用</blink>
<div>
Her Song:
<blockquote>
When I was young, I listened to the radio 
waiting for my favorite songs....
</blockquote>
</div>
<h1>定製列表元素</h1>
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
<h1>定製列表</h1
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
<h1>有序列表</h1>
<ol>
<li>Today
<li>Tommorow
</ol>
<h1>無序列表</h1
<ul>
<li>Today
<li>Tommorow
</ul>
 </body>
</html>

四、圖像

一、插入圖像基本語法：

<img src=# alt=#>src對應圖片的地址,alt圖片的提示內容

二、圖像和文字的對齊

<img align=#>#=top,middle,bottom 分別爲上、中、下

三、邊框

<img border=# > #=value

五、表格

一、基本語法：

<table>...</table> - 定義表格
<tr> - 定義錶行
<th> - 定義表頭
<td> - 定義表元(表格的具體數據)

默認的不帶邊框，

帶邊框的表格：<table border>

二、跨多行，多列的表元

跨多列的表元 <th colspan=#>

跨多行的表元 <th rowspan=#>

三、表格尺寸設置

邊框尺寸設置：<table border=#>

表格自己尺寸設置：<table border width=# height=#>

表元間隙設置:<table border cellspacing=#>

表元內部空白設置:<table border cellpadding=#>

四、表格內文字的對齊和佈局

<th align=#> #=left, center, right

五、表格在頁面的對齊

<table align=#>#=left right center

六、表格標題

七、表格色彩

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>HTML</title>
 </head>
 <body>
  <table border>
   <caption >標題</caption>
  <tr>    
  <th bgcolor=ffaa00>HTML</th>
  <th bgcolor=#3300cc>MySql</th>
  <th rowspan=2 >Css</th>
  </tr>
  <tr bgcolor=#ffffff><td>A</td><td>B</td>  
  </tr>
  </table>
 </body>
</html>