HTML的基本語法

来源:http://www.cnblogs.com/yan-linxi/archive/2017/12/06/7993608.html
-Advertisement-
Play Games

HTML的文件結構:<html> <head>網頁頭部信息</head> <body>網頁主體正文部分</body> </html> HTML的基本標記:定義網頁背景色——bgcolor <body bgcolor=”背景顏色 ”> 設置背景圖片——backgroung <body backgrou ...


HTML的文件結構:<html>

                  <head>網頁頭部信息</head>

                  <body>網頁主體正文部分</body>

                  </html>

HTML的基本標記:定義網頁背景色——bgcolor

                   <body bgcolor=”背景顏色 ”>

                  設置背景圖片——backgroung

                   <body background=”圖片的地址 ”>

                  設置文字顏色——text

                   <body text=”文字的顏色 ”>

                  設置鏈接文字屬性

                   <body link=”顏色 ”>

                  (使用alink可以設置滑鼠單擊超鏈接時的顏色

                    使用vlink可以設置已訪問過的超鏈接顏色)

                   設置頁面邊距——margin

                   topmargin     設置頂邊的距離

                   leftmargin     設置左邊的距離

                   rightmargin    設置右邊的距離

                   bottommargin  設置底邊的距離

                   頁面的頭部元素<!DOCTYPE>和<head>

                    <!DOCTYPE>為瀏覽器提供的一項聲明

                    <head>文檔頭部信息</head>

                   頁面標題元素<title>

                    <title>…</title>(輸入標題信息在瀏覽器上顯示)

                   元信息元素<meta>

                       設置頁面關鍵詞

                        <meat name=”keywords ”content=”輸入具體的關鍵詞”>

                       設置頁面主要內容

                        <meat name=”description ”content=”頁面描述 ”>

                       定義頁面的搜索方式

                        <meat name=”robots ”conten=”搜索方式 ”>

                   搜索方式取值:all 表示能搜索當前網頁及其鏈接的網頁

                                 nofollow 搜索引擎不繼續通過此網頁的鏈接搜索其他的網頁

                                 follow 搜索引擎繼續通過此網頁的鏈接搜索其他的網頁

                                 index 表示能搜索當前網頁

                                 noindex 表示不能搜索當前網頁

                                 none 搜索引擎將忽略此網頁

                        定義編輯工具(generator:設置編輯工具)

                         <meat name=”generator ”content=”編輯軟體的名稱 ”>

                        定義頁面的作者信息(author:設置作者信息)

                         <meat name=”author ”content=”作者的姓名”>

                        定義網頁文字及語言(http-equiv 用於傳送HTTP通信協議的標頭)

                         <meat http-equiv=”content-type”content=”text/html ;charest=字元集類型”/>

                        定義頁面的跳轉 (refresh網頁刷新)

                         <meat http-equiv=”refresh ”content=”跳轉的時間;URL=跳轉到的地址”>

                        定義頁面的版權信息——copyright

                         <meat name=”copyright ”content=”©http://www.baidu.com”/>

腳本元素<script>

<script type=”text/javascript ”src=”dru.js ”></script>

       創建樣式元素<style>

<style type=”text/css ”>

…………………………………………

</style>

鏈接元素<link>

<head>

<link rel=”stylesheet ”type=”text/css “href=”theme.css “/>

</head>

 

設置文字與段落格式

插入空格符號:&nbsp

輸入特殊符號:&-&amp;﹤-&lt;﹥-&gt;x-&times;§-&sect;©-&copy;®-&reg;™-&trade

設置字體——face

        <font face=”字體樣式 ”>……</font>

       設置字型大小——size

        <font size=”文字字型大小 ”>……</font>

       設置文字顏色——color

        <font color=”字體顏色 ”>……</font>

       設置粗體、斜體、下劃線——b、strong、em、u

<b>加粗的文字</b>

<strong>加粗的文字</strong>

<i>斜體文字</i>

<em>斜體文字</em>

<cite>斜體文字</cite>

<u>下劃線的內容</u>

設置上標和下標——sup、sub

<sup>上標內容</sup>

<sub>下標內容</sub>

設置段落的格式

       段落標記——p

         <p>段落文字</p>

段落的對齊屬性——align

<aling=對齊方式>(left 左對齊、right 右對齊、center 居中對齊)

不換行標記——nobr

<nobr>不換行文字</nobr>

換行標記——br

<br>

插入水平線——hr

<hr>

設置水平線寬度與高度屬性——width、size

<hr width=”寬度 ”>

<hr size=”高度 ”>

設置水平線的顏色——color

<hr color=”顏色 ”>

設置水平線的對齊方式——aling

<hr aling=”對齊方式 ”> (left 左對齊、right 右對齊、center 居中對齊)

水平線去掉陰影——noshade

<hr noshade>

設置滾動文字

滾動文字標簽——marguee

<marquee>滾動的文字</marquee>

滾動方向屬性——direction (預設:文字滾動的方向是從右向左的,可通過direction標記來設置滾動的方向)

<marquee direction=”滾動方向 ”>滾動的文字</marquee>

滾動方式屬性——behavior

<marquee behavior=”滾動方式 ”>滾動的文字</marquee>

Behavior標記的屬性:scroll-迴圈滾動,預設效果

                    Slide-只滾動一次就停止

                    alternate-來回交替進行滾動

滾動速度屬性——scrollamount

<marquee scrollamount=”滾動速度 ”>滾動的文字</marquee>

滾動延遲屬性——scrolldelay (毫秒)

<marquee scrolldelay=”時間間隔 ”>滾動的文字</marquee>

滾動迴圈屬性——loop

<marquee loop=”迴圈次數 ”>滾動的文字</marquee>

滾動範圍屬性——width、height

< marquee width=”背景寬度 ”height=”背景高度 ” >滾動的文字</marquee>

滾動背景顏色屬性——bgcolor

<marquee bgcolor=”背景顏色 ”>滾動的文字</marquee>

滾動空間屬性——hspace、vspace(設置滾動文字周圍的文字與滾動背景之間的空白區域)

<marquee hspace=”水平範圍 ”vspace=”垂直範圍 ”>滾動的文字</marquee>

 

創建精彩的圖像和多媒體頁面

  插入圖像並設置圖像屬性

圖像標記——img

<img src=”圖像文件的地址”>

屬性            描述                屬性             描述

src              圖像的源文件        dynsrc           設定avia文件的播放

alt              提示文字             loop            設定avia文件迴圈播放的次數

width,height    寬度和高度           loopdelay       設定avia文件迴圈播放的延遲時間

border          邊框                 start            設定avia文件的播放方式

vspace          垂直間距             lowsrc           設定低解析度圖片

hspace          水平間距             usemap          映像地圖

align            排列

設置圖像高度——height(如果img元素不定義高度,圖片就會按照其原始尺寸顯示)

<img src=”圖像文件的地址 ”height=”圖像的高度 ”>

設置圖像寬度——width

<img src=”圖像文件的地址”width=”圖像的寬度 ”>

設置圖像的邊框——border

<img src=”圖像文件的地址 ”border=”圖像邊框的寬度 ”>

設置圖像水平間距——hspace

<img src=”圖像文件的地址 ”hspace=”水平邊距 ”>

設置圖像垂直間距——vspace

<img src=”圖像文件的地址 ”vspace=”垂直邊距 ”>

設置圖像的對齊方式——align

<img src=”圖像文件的地址 ”align=”對齊方式 ”>

 

 

屬性          描述                         屬性        描述

Bottom      把圖像與底部對齊              top        把圖像與頂部對齊

left          把圖像對齊到左邊             right        把圖像對齊到右邊

middle       把圖像與中央對齊

設置圖像的代替文字——alt

   <img src=”圖像文件的地址 ”alt=”提示文字的內容 ”>

 添加多媒體文件

   <embed src=”多媒體文件地址 ”width=”多媒體的寬度 ”height=”多媒體的高度 ”autostart=”是否自動運行”loop=”是否迴圈播放 ”></embed>

 添加背景音樂——bgsound

   <bgsound src=”背景音樂的地址 ”>

 設置迴圈播放次數——loop(-1是無限迴圈)

   <bgsound src=”背景音樂的地址 ”loop=”播放次數 ”>

 

創建超鏈接和表單

創建基本超鏈接

   超鏈接標記——a

    <a href=”鏈接目標 ”>鏈接顯示文本</a>

   屬性       說明                     屬性            說明

   href       指定鏈接地址             title           為鏈接添加提示文字

   name      為鏈接命名              target          指定鏈接的目標視窗 

   設置的目標視窗(使用target 屬性來控制打開的目標視窗)

    <a href=”鏈接目標 ”target=”目標視窗的打開方式”>

  創建圖像的超鏈接

設置圖像超鏈接——a

<a href=”鏈接目標 ”>鏈接的圖像</a>

設置圖像熱區鏈接(形狀:矩形-rect 橢圓形-circle 多邊形-poly)

  <img usemap=”#熱區名稱 ”>

  <map name=”熱區名稱 ”>

  <area shape=”熱點形狀 ”coords=”區域坐標 ”href=”#鏈接目標 ”alt=”替換文字 ”>

   …………………………………………………………………

  </map>

 創建錨點鏈接

  創建錨點:<a name=”錨點的名稱 ”></a>

  鏈接到頁面不同位置的錨點鏈接:<a href=”#錨點的名稱 ”>……</a>

 插入表單——form

   處理動作——action(用於指定表單數據提交到哪個地址進行處理)

     <form action=”表單的處理程式 ”>

       …………………………………

     </form>

 表單名稱——name

   <form name=”表單名稱 ”>

………………………………….

</form>

 傳送方法——method

   <form method=”傳送方法 ”>

……………………………..

</form>

 編碼方式——enctype

   <form enctype=”編碼方式 ”>

     ……………………………………

   </form>

  enctype的取值                                取值含義

  application/x-www-form-ulencoded           預設的編碼形式

  multipart/form-data                         MIME編碼,上傳文件的表單必須選擇項

  目標顯示方式——target

   <form target=”目標視窗的打開方式 ”>

     ……………………………………

   </form>

 

創建強大的表格

  創建並設置表格屬性

表格的基本標記——table、tr、td

<table>

   <tr>

   <td>單元格內的文字</td>

   <td>單元格內的文字</td>

   </tr>

   <tr>

   <td>單元格內的文字</td>

   <td>單元格內的文字</td>

   </tr>

   </table>

 表格寬度和高度——width、height

   <table width=”表格的寬度 ”height=”表格的高度 ”>

 表格的標題——caption

   <caption>表格的標題</caption>

 表格的表頭——th

    <table>

    <tr>

    <th>…….</th>

    </tr>

    </table>

 表格對齊方式——aline(left-左對齊 center-居中 right-右對齊)

    <table aline=”對齊方式”>

 表格的邊框寬度——border

    <table border=”邊框寬度 ”>

 表格邊框顏色——bordercolor

    <table border=”邊框寬度 ”bordercolor=”邊框顏色”>

 單元格間距——cellspacing

    <table cellspacing=”間距值 ”>

 單元格邊距——cellpadding

     <table cellpadding=”文字與邊框距離值 ”>

 表格的背景顏色——bgcolor

     <table bgcolor=”背景顏色 ”>

 表格的背景圖像——background

     <table background=”背景圖像地址 ”>

設計表頭樣式——thead

  <thead>

   …………………………

  </thead>

設計表主體樣式——tbody

  <tbody bgcolor=”背景顏色 ”align=”對齊方式 ”>

  …………………………………………………….

  </tbody>

設計表尾樣式——tfoot

  <tfoot bgcolor=”背景顏色 ”align=”對齊方式 ”valign=”垂直對齊方式 ”>

  …………………………………………………..

  </tfoot>

 

創建框架結構網頁

  水平分割視窗——rows

     <frameset rows=”高度1,高度2,….,*”>

     <frame src=”url ”>

<frame src=”url ”>

……………………..

</frameset>

   垂直分割視窗——cols

      <frameset cols=”高度1,高度2,….,*”>

      <frame src=”url ”>

<frame src=”url ”>

……………………..

</frameset>

嵌套分割視窗

       <frameset rows=”30%,*”>

       </frame>

   <frameset cols=”20%,*”>

     <frame>

    <frame>

       </frame>

       </frame>

設置邊框——frameborder

   <frameset frameborder=”是否顯示 ”>

框架的邊框寬度——framespacing

   <frameset framespacing=”邊框寬度 ”>

框架的邊框顏色——bordercolor

   <frameset bordercolor=”邊框顏色 ”>

框架頁面源文件——src

  <frame src=”html文件的位置 ”>

框架名稱——name

  <frame src=”html文件的位置 ”name=”子視窗名稱 ”>

調整框架視窗的尺寸——noresize

  <frame src=”頁面源文件地址 ”noresize >

框架邊框與頁面內容的水平邊距——marginwidth

   <frame src=”頁面源文件地址 ”marginwidth=”value ”>

 

框架邊框與頁面內容的垂直邊距——marginheight

   <frame src=”頁面源文件地址 ”marginheight=”value ”>

設置框架滾動條顯示——scrolling

   <frame scrolling=”yes 或no或auto ”>

不支持框架標記——noframes

   <noframes>

   </noframes>

浮動框架的頁面源文件——src

   <iframe src=”url ”></iframe>

浮動框架的寬度和高度——width和 height

   <iframe src=”浮動框架的源文件 ”width=”浮動框架的寬 ”height=”浮動框架的高 ”>

   </iframe>

浮動框架的對齊方式——align

   <iframe src=”浮動框架的源文件 ”align=”對齊方式 ”></iframe>

設置浮動框架是否顯示滾動條——scrolling

   <iframe src=”浮動框架的源文件 ”scrolling=”是否顯示滾動條 ”></iframe>

屬性                           說明

auto             預設值,整個框架在瀏覽器頁面中左對齊

yes              總是顯示滾動條,即使頁面內容不足以撐滿框架範圍,滾動條的位置也會預留出

no               在任何情況下都不顯示滾動條

浮動框架的邊框——frameborder

    <iframe src=”浮動框架的源文件 ”frameborder=”是否顯示框架邊框 ”></iframe>


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

-Advertisement-
Play Games
更多相關文章
  • Ajix是創建互動式網頁的前端網頁開發技術,不是一種語言,ajax是基於http來傳輸數據的,他是利用瀏覽器提供操作http的介面(XMLHttpRequest或者activeXobject),來操作http以達到非同步請求數據的效果。 特點: 1.通過瀏覽器操作http的介面和伺服器進行少量的數據交 ...
  • 1. 基本說明 本項目實現了離線展示百度、谷歌、高德、騰訊地圖。主要功能如下: 實現了地圖瓦片圖下載、存儲。目前支持存儲至MySQL Node.js服務調用MySQL中的瓦片圖 Leaflet展示地圖 展示效果如下: 2. 地圖瓦片下載工具及配置 工具下載鏈接: http://pan.baidu.c ...
  • 以前總是以為vertical-align與text-align是同樣的道理,一個是垂直居中,一個是水平居中,結果在這裡一點效果也沒有。事實上vertical-align與text-align完全不一樣,vertical-align不能這樣用。 vertical-align 屬性設置元素的垂直對齊方式 ...
  • NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種: 允許用戶從NPM伺服器下載別人編寫的三方包到本地使用。 允許用戶從NPM伺服器下載並安裝別人編寫的命令行程式到本地使用。 允許用戶將自己編寫的包或命令行程式上傳到NPM伺服器供別人使用。 ...
  • 寫在前面: 今天要實現的功能是在 完善個人信息頁面(vue)中添加手機驗證碼組件,當用戶點擊 手機選項時,彈出獲取驗證碼組件,完成驗證手機的功能: 這裡考慮到功能的復用,我把當前彈出手機驗證碼的操作放在了單獨的組件中: 並把當前組件放在需要使用它的組件中,這裡需要註意的是,在控制 綁定手機組件的顯示 ...
  • 引用JiaThis的分享功能: 直接在想要放置分享功能的地方加上如下代碼即可: 分享圖標可自定義,自定義方式可上其官網查看。JiaThis官網:http://www.jiathis.com/ ...
  • <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>個人所得稅</title> </head> <body> <input type="text" placeholder="請輸入您的工資" id="gz" /> <input typ ...
  • 1、requirejs遵循AMD規範,將需要的都載入好(前置載入)。註:cmd是就近載入。 (1)AMD採用非同步載入,模塊的載入不影響它後面語句的執行。 (2)所有依賴這個模塊的語句,都定義在一個回調函數中,等前面需要載入的模塊載入完成後這個回調函數才運行,解決了依賴性的問題。 2、requirej ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...