學習筆記-HTML-2.6

来源:https://www.cnblogs.com/zhouchengzhi/archive/2018/02/13/8447620.html
-Advertisement-
Play Games

HTML-學習筆記 HTML基礎 1.什麼是HTML？ HTML是“HyperText Mark-up Language（超文本標記語言）”的縮寫。 超（Hyper）是相對於線性（linear）來說的。在很久以前，那時電腦程式還是線形運行的：當電腦程式執行完一個動作以後，轉向下一行，這行結束後， ...


HTML-學習筆記

 

HTML基礎

1.什麼是HTML？

HTML是“HyperText Mark-up Language（超文本標記語言）”的縮寫。

超（Hyper）是相對於線性（linear）來說的。在很久以前，那時電腦程式還是線形運行的：當電腦程式執行完一個動作以後，轉向下一行，這行結束後，繼續下移，依次類推。但HTML則不同，你可以在任何時候跳轉到任何地方。比方說，你在瀏覽A.net之前，不必先去瀏覽b.com。強調功能強大,在一個文本中不僅可以看文字,還可以看圖片,flash,超鏈接等.

文本（Text）意味著它是自解釋的（self-explanatory）。

標記（Markup）指的是你怎麼處理文本。對文本作標記的方式，跟你在文本編輯程式里將文本加粗、或者將一行話設為標題或列表項目類似。

語言（Language）。HTML就是一種語言，它使用了許多英文單詞。

總的來說，超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編製者只能通過顯示效果來分析出錯原因和出錯部位。但需要註意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

 

 

2.HTML的書寫格式是什麼樣的？

<html>

<head>               --------頭部提供關於網頁的信息

<title>title here</title>   --------提供關於網頁的信息

</head>               --------頭部

<body>               --------主幹

main content            --------提供網頁的具體內容

</body>               --------主幹

</html>

 

 

3.HTML 基本標簽和屬性

<h1>……</h1>

<h2>……</h2>

…..

<h6>…….</h6>    -----標題

<p></p>       -----段落

<br/>         -----換行

<font ></font>       -----字元屬性

<b></b>        -----加粗

<i></i>       -----斜體

<hr size="" >         -----白框

<img src="" height="" width="" >         -----添加圖片

<a href="" >……</a>:         -----添加超鏈接

<a href="mailto:[email protected]">給zs發電子郵件</a>         -----超鏈接發送郵件

<center>…….</center>           -----插入居中欄位

_blank   指定鏈接的文檔被載入到一個新的空白視窗中。這個視窗沒有命名。

_parent  指定鏈接的文檔被載入到包含該鏈接的文檔的直接父文件中。

_top    指定將鏈接的文檔載入到topwindo中w.

_self    指定鏈接的文檔被載入到鏈接被單擊的視窗(活動視窗)。

 

註：

1.HTML基本元素不區分大小寫。

2.HTML重點:標簽,元素,屬性。

3.文件中常見的“<!--  -->”是對相對段落的註釋，html和xml文件都是用這種做註釋。

  

 

HTML基本元素

1.標題

示例：

<HTML>

<HEAD>

<TITLE>標題內容</TITLE>

</HEAD>

<BODY>

<H1>標題一</H1>

<H2> 標題2 </H2>

<H3> 標題3 </H3>

<H4> 標題4 </H4>

<H5> 標題5 </H5>

<H6> 標題6 </H6>

</BODY>

</HTML>

註：

H1 到 H6 標簽是六種用於指定不同級別的不同字型大小大小的標題

HTML預設只有六種標題,並預設所有字體都在一行,除非用特定換行符號

 

 

2.換行符

只要在文本中放入<BR> 標簽，就會強制換行

 

示例：

<HTML>                

<HEAD>

<TITLE>詩詞學習</TITLE>

</HEAD>

<BODY>

<BR>第一行<BR>第二行

<P>第一段</P>

<P>第二段</P>

</BODY>

</HTML>

註：

段落比換行中間的間距更大

 

 

3.字元格式化標簽

 

示例：

 

<HTML>

<HEAD>    --頭部開始

<TITLE>學習 HTML</TITLE>  --標題部分

</HEAD>    --頭部結束

<BODY>  --軀幹部分開始

<P>  --段落

<B> 這很有趣</B>  --B加粗

<BR>  

<BR>  --換兩行

<I> 足球是最令人喜愛的運動之一。</I>  I--斜體

<BR>

<BR>  --換兩行

<U> 信息技術是發展的關鍵。</U>  --下劃線

<BR>

<BR>  --換兩行

水的分子式是 H <SUB>2</SUB> O。  --小寫 出現在右下方

<BR>

<BR>  --換兩行

3 <SUP>2</SUP>  等於 9。  --sup 乘方(n次冪)符號

<BR>

<BR>  --換兩行

</P>  --段落結束

</BODY>  --軀幹部分結束

</HTML>

 

 

 

4.列表

4.1  列表的屬性

<LI TYPE = I>     ----列表序號種類為羅馬字母，從I開始

<LI TYPE = i>     ----列表序號種類為羅馬字母，從i開始

<LI TYPE = A>     ----列表序號種類為大寫字母，從A開始

<LI TYPE = a>     ----列表序號種類為小寫字母，從a開始

 

<OL start="5">    ----列表從5開始
<LI>
<LI>

<OL>

 示例：

 

 

 

4.2  有序列表

<html>

<head>

<title>   aaa  </title> 

</head>

<BODY>

<H1>星期中的每一天</H1>                        

<OL>

<LI>星期日

<LI>星期一

<LI>星期二

<LI>星期三

<LI>星期四

<LI>星期五

<LI>星期六

</OL>

</BODY>

</html>

示例：

註：

LI可以自主編輯序號，預設為數字編號

 

 

2.使用水平線

示例：

<HTML>

<HEAD>

<TITLE>動物世界</TITLE>

</HEAD>

<BODY>

<H3>標題黨 </H3>

<HR noshade size = 5 align = center width =50%>

<HR size = 15 align=left width = 80%>

<HR>

<P>一個新段

</BODY>

</HTML>

 

註：

<hr>   標簽在HTML頁面中創建一條水平線。 水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。

Align   對齊方式

Width   占瀏覽器的百分比 

Size    尺寸(寬) 可以用% 也可以用數值像素點(px)

Noshade  實心框

 

 

5.使用字體和屬性

示例：

<HTML>

<HEAD>

<TITLE>動物世界</TITLE>

</HEAD>

<BODY>

<H1>瞭解有關動物的更多信息</H1>

<P><FONT SIZE = 5 COLOR = BLUE FACE = Arial>斑馬的特性</FONT>

<P>沒有任何兩匹斑馬<FONT COLOR = RED SIZE = 3>的斑紋是完全一樣

的，</FONT>因此每匹斑馬都是獨一無二的

</BODY>

</HTML>

註： 

<FONT> 元素及其相關屬性（如 SIZE、COLOR 和FACE）可用於控制網頁上文本的顯示

<FONT SIZE = 5 COLOR = BLUE FACE = Arial>

可以為字體指定的大小範圍為從 1 到 7

可以按名稱或十六進位值 指定顏色

 

 

6.插入圖像

 

<IMG> 標簽用於在 HTML 文檔中插入圖像。<IMG> 標簽的兩個常用屬性是 SRC 和 ALIGN。

 

SRC 屬性用於指定要插入的圖像位置。

 

ALIGN 屬性用於指定圖像相對於文本的對齊方式。

 

示例：

例1：

<html>
<body>

 

<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" title="鬱金香"/>

 

</body>
</html>

 

----圖片名“鬱金香”

    ----alt="上海鮮花港-鬱金香"

 

 

註： 

src  為部署文件的路徑,可以是網路上的,也可以是本機上的

align 圖片的位置,有三種left,right,center

alt  規定圖像無法顯示時的替代文本

title 規定圖片的名稱

 

 

7.插入字元

 

 

 

 

 

 

8.1普通超鏈接

示例:

<HTML>
<HEAD>
<A HREF = "C:\html\Doc3.htm" > 超鏈接
</BODY>
</HTML>

 

 

8.2發送郵件超鏈接

示例：

<HTML>

<HEAD>

<TITLE>mail to </TITLE>

</HEAD>

<BODY>

<H3>mail to zhangsan</H3>

<BR>

<A HREF="mailto:[email protected]">請將您的疑問發送至

zhangsan</A>

</BODY>

</HTML>

 

 

9.表格

9.1 表格的對齊方式

示例：

<BODY>

<TABLE border=2 align=center>     ----align預設居中

<CAPTION align=top>學員檔案信息</CAPTION>   ----題頭

<TR>    ----創建橫排表格

<TH>姓名</TH>

<TH align="center">性別</TH>

<TH align="right">分數</TH>

</TR>

<TR>

<TD>Robert</TD>

<TD align="center">M</TD>

<TD align="right">80</TD>

</TR>

<TD>Mary</TD>
<TD align="center">F</TD>
<TD align="right">18</TD>
</TR>

</TABLE>

</BODY>

</HTML>

註：

表格的寬度預設以縱向表格內最長的字元為準

表格內字元預設左對齊

<TH>　　指列頭，預設加粗

<TD>  指創建的表格內是普通字元

 

 

9.2 表格跨列

示例：

<BODY>

<TABLE BORDER = 2 ALIGN = CENTER>     ------border 表格邊框的粗細

<CAPTION>創建表格 </CAPTION>

<TH COLSPAN = 3>第一學期</TH>    -----表示跨三列

<TH COLSPAN = 3>第二學期</TH>

<TR>

<TD>數學</TD>

<TD>科學</TD>

<TD>英語</TD>

<TD>數學</TD>

<TD>科學</TD>

<TD>英語</TD>

<TR>

<TD>98</TD>

<TD>95</TD>

<TD>80</TD>

<TD>95</TD>

<TD>87</TD>

<TD>88</TD>

</table>

</body>

 

 

9.3 表格跨行

示例：

<TABLE BORDER = 1, align = center>

<CAPTION><b>創建表格<b></CAPTION>

<TR>

<TH></TH>

<TH></TH>

<TH>螺母</TH>

<TH>螺栓</TH>

<TH>錘子</TH>

<TR>

<TD ROWSPAN = 3>第一季度</TD>    ------跨行合併

<TD>一月</TD>

<TD>2500</TD>

<TD>1000</TD>

<TD>1240</TD>

<TR>

<TD>二月</TD>

<TD>3000</TD>

<TD>2500</TD>

<TD>4000</TD>

<TR>

<TD>三月<TD>

<TD>3200</TD>
<TD>1000</TD>
<TD>2400</TD

 

 

9.4 表格背景

示例：

<BODY>

<TABLE border=0 align=center width=50%>       -----無邊框  居中  瀏覽器50%寬度

<CAPTION align=top>學員檔案信息</CAPTION>         -----caption 表名  頂端對齊

<TR bgcolor="#00FFFF">     ---行的背景色="十六進位定義顏色"

<TH align="left">姓名</TH>

<TH align="center">性別</TH>

<TH align="right">分數</TH>

</TR>

<TR bgcolor="#FFFF00">

<TD>Robert</TD>

<TD align="center">M</TD>

<TD align="right">80</TD>

</TR>

<TR bgcolor="#FFFF00">

<TD>Mary</TD>

<TD align="center">F</TD>

<TD align="right">18</TD>

</TR>

</TABLE>

 

註：

表格的背景色 <TABLE bgcolor=顏色值>

行的背景色 <TR bgcolor=顏色值>

列的背景色 <TD bgcolor=顏色值>

 

 

10.表單

10.1

<FORM action=“http://www.sohu.com” method=“post”>

ACTION 指定提交後由伺服器上哪個處理程式處理    ACTION = “URL”

METHOD指定向伺服器提交的方法:一般為post或get方法,post方法比較安全

 

10.2 表單輸入元素

文本框、按鈕、單選按鈕、覆選框等都是輸入元素 。

<INPUT type=“?” name=“?” size=”?”

value=“?” maxlength=“?” checked=“?”>

 

Type此屬性制定元素的類型.元素類型可以有多種選擇:TEXT、PASSWORD、CHECKBOX(覆選框)、RADIO(單選框)、SUBMIT(提交按鈕)、RESET(重置按鈕)、FILE(上傳按鈕)、HIDDEN(隱藏) 和 BUTTON(按鈕)。預設選擇為 TEXT。

Name 此屬性指定控制項的名稱。例如，如果表單中有幾個文本框，則可以用名稱 TEXT1、TEXT2 或選擇的任何名稱來標識它們。

    Name 屬性的作用域是在 FORM 元素內。

Value 此屬性是可選屬性，它指定控制項的初始值。但是，如果 TYPE 為RADIO，則必須指定一個值。

Size 此屬性指定控制項的初始寬度。如果 TYPE 為 TEXT 或 PASSWORD，則控制項的大小以字元為單位。對於其他輸入類型，寬度以像素為單位。

Maxlength此屬性用於指定可在 TEXT 或 PASSWORD 元素中輸入的最大字元數。

Checked此屬性是 Boolean 屬性，指定按鈕是否是打開的。當輸入類型為 RADIO 或 CHECKBOX 時，使用此屬性。

 

詳解

10.2.1 Button

<INPUT name="button1" type="submit" value="提交">

<INPUT name="button2" type="reset" value="重置">

<INPUT name="button3" type="button" value="普通按鈕">

 

 

 

10.2.2 Text

身份證號<input type="Text" name="PID" value="" size="20" maxlength="18">

 

 

密 碼： <INPUT type=password value="" name="pass" size=15>

 

 

<TEXTAREA name="textarea" clos="20" rows="5" >請填寫您的工作經歷 </TEXTAREA>

 

註：clos,row是第一時間可見的文本框的屬性,不是限制

 

 

 

10.2.3 單選按鈕和覆選框

 

性別：<INPUT TYPE=radio NAME="sex" VALUE="male">男性

<INPUT TYPE=radio NAME="sex"  VALUE="male">女性

 

 

你喜歡以下哪些明星：

<br>

<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子

<input type="Checkbox" name="id2" value="Leon">鄭秀文

<input type="Checkbox" name="id3" value="BonJovi" checked>BonJovi

 

 

註：

Radio:name相同的單選框同時只能勾選一個

Checkbox: 可同時選擇多個,標註了checked的預設勾選

 

 

-----

思考：

<BODY bgColor="#ccccff" Text="#000099">

<FORM ACTION="http://www.com.cn" METHOD="POST">

<B><H2 align="left">2004 年歐錦賽</H2></B>

<P><B>預測“最佳球員”</B></P><P>

<INPUT TYPE="RADIO" NAME="myradio“ VALUE="0">Ronaldo

<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">Beckham

<INPUT TYPE="RADIO" NAME="myradio" VALUE="2">Zidane

</P><P><B>預測大賽亞軍</B></P><P>

<INPUT NAME="mybox2" TYPE="CHECKBOX" VALUE="0">巴西

<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="1">法國

<INPUT NAME="mybox3" TYPE="CHECKBOX" VALUE="2">阿根廷

<BR></P><P><B>預測誰將成為 2004 年歐錦賽冠軍？</B></P><P>

<INPUT NAME="text1“ TYPE="TEXT" SIZE="30"

MAXLENGTH="30"></P><P>

<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="提交">

<INPUT TYPE="RESET" NAME="Reset" VALUE="重置"></P>

</FORM>

</BODY>

思考這張表形成後是什麼樣的?

 

 

-----

 

 

10.2.4  下拉菜單

<B>誰是 2002 年世界盃冠軍？</B>

<SELECT NAME =“myselect">

<OPTION>西班牙</OPTION>    

<OPTION>法國</OPTION>       ----選擇項

<OPTION  SELECTED>巴西</OPTION>    ----預設為巴西

<OPTION>德國</OPTION>

</SELECT>

 

 

 

11.1  框架

 

 

11.2  為什麼使用框架?

 

 

習題：編寫出以下如圖的表格和表單的HTML代碼

1.

 

 

2.

 

1.

<HTML>
<HEAD>
<TITLE>mail to </TITLE>
</HEAD>
<BODY>
<table border=2 align=center>
<caption align=center>表格測試</caption>
<TR>
<TH width="40" height="20">1</TH>
<TH width="40" >2</TH>
<TH width="40" >3</TH>
<TR>
<TD height="20" align=center>4</TD>
<TD align=center>5</TD>
<TD ROWSPAN="2" align=center>6</TD>
<TR>
<TD COLSPAN="2" height="20" align=center>7</TD>
</table>
</BODY>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS學習——（轉）NSObject詳解
    本文主要轉載自：ios開發 之 NSObject詳解 NSObject是大部分Objective-C類繼承體系的根類。這個類遵循NSObject協議,提供了一些通用的方法，對象通過繼承NSObject，可以從其中繼承訪問運行時的介面，並讓對象具備Objective-C對象的基本能力。下麵我們就詳細的 ...
  • redux簡明學習
    [1]核心概念 [2]簡單實例 [3]目錄結構 [4]UI層 [5]非同步 [6]展示和容器 [7]最終結構 ...
  • 【JQuery】文檔操作
    一、前言 接著上一章的內容，接著JQuery的學習 二、內容 ...
  • 【JQuery】效果
    一、前言 接著上一章事件，繼續jQuery的學習。 二、內容 ...
  • 【JQuery】事件
    一、前言 接著上一章選擇器的知識，繼續啊jQuery的學習 二、內容 ...
  • JQ + CSS實現浪漫表白必備
    JQ + CSS實現浪漫表白必備頁面 效果圖： 圖片素材 ： 代碼如下，複製即可使用： 如果您有更好的點子或更多的功能，可以和我們大家一起分享哦，如有錯誤，歡迎聯繫我改正，非常感謝！！！ ...
  • 簡易的js圖片展示
    <script type="text/javascript"> function showSrc(labelName, obj) { var path = $(obj).prop("files")[0]; var reader = new FileReader(); var callback = f ...
  • 使用html+css+js實現日曆與定時器，看看今天的日期和今天剩餘的時間。
    使用html+css+js實現日曆與定時器，看看今天的日期和今天剩餘的時間。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類