分享一個HTML的學習之路

開發網站流程

• 確定風格、功能（論壇、留言板、付款、使用者登入等）。

• 美工製作網頁效果圖（首頁、清單頁、內容頁）。

• 製作人切圖排版，排成網頁形式。

• 後台程式開始寫入程式。

• 前台與後台結合。

HTML註解

注意：註解只是為了以後維護用。

項目符號

<ul><li>内容</li>　　<li>内容</li>　　<li>内容</li></ul>

或
• 的常用屬性

  l  Type：項目符號的類型，取值：disc（小黑點）、circle（圓圈）、square（實心方塊）

  HTML編號列表（有序）

  <ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>

   < ;ol>或

• 的常用屬性

  •  Type：編號類型，取值：1、a、A、i、I

  • # Start：從第幾個開始編號

  #滾動字幕標記（已淘汰）

  <marquee> 内容…..  
  
  </marquee>

    常用屬性

  •   Direction：捲動方向，取值：up、down、left、right

  • #  Width：捲動寬度

  • #  Height：捲動高度

  • #  BgColor：捲動背景顏色

  •   ScrollAmount：捲動步長值

  • # ScrollDelay：兩步驟之間的停留值

  •   Loop：循環捲動次數

  • 圖片標籤

   
  • 語法格式：#屬性=“
    #值”>
  • ## 

    常用屬性：

    Width：圖片寬度。
    Height：圖片高度。
    Border：圖片的邊框。

    Src：圖片的路徑。   Align：left、center、right。

  （可達到圖文混排效果）

  • #  Hspace：圖片與文字左右間距。

  •   Vspace：圖片與文字上下間距。

  • 超級連結

      語法格式：

  屬性=「

  • 值」> ;內容

  •   

    #常用屬性：

  •   Href：目標文件地址URL。   Target：開啟方式。 _blank：新視窗、_self：本視窗、_parent:上個視窗開啟、top：最頂層視窗開啟。

    Name：定義描點名稱。

    mailto

  #  #空白連結。

    
  • Js
    # 連結：
  Html顏色表示

  • 表示方法三種
  ：

  •  
    顏色單字：blue、green、 red、yellow。

    10進位表示：rgb（255，0，0）
    16進位表示#FF0000（紅）、#00FF00（綠色）、#0000FF(藍)

  • 錨點連結

  • #  意義：錨點鏈接，是在一個網頁的不同區域進行跳轉

  •   定義錨點（做記號）：

    
    

  例如：

  • 
    

  • 
    

  • 
    

    ## 

    跳到錨點（記號）：

  ######  語法：內容…..##############################標記## ####作用：提供網頁的元資訊。指定網頁的搜尋關鍵字。 ######標記有兩個屬性：http-equiv和name#######1、  http-equiv屬性############  功能：模擬http協議文件頭訊息，告訴瀏覽器怎麼開啟網頁。 ############  http-equiv屬性一般與content屬性搭配使用。 Content屬性指定資訊的詳細屬性############### 設定網頁的字元集：　############################################################################# ##########  網頁自動刷新：;###############################2、  name屬性######設定網頁的搜尋關鍵字、版權資訊、作者等。 ###

  （1）       设置网页搜索关键词

  （2）       设置网页描述信息

  Xhtml规范

  • l  所有标记和属性全部小写

  • l  单边标记必须关闭。如：
    -----
    

  • l  所有的属性值都必须加引号。

  • l  所有属性都必须有值。如：

    ---

    ---

    ---

  • l  标机之间要顺序嵌套，外层套内层。

  • l  Xhtml网页必须有DTD文档类型定义代码

   

   

  DTD文档类型定义

  三大类型：

   

  表格标签

  （1）结构：(一行四列)

  <table border=“1”>   <tr><td> </td><td> </td><td> </td><td>< /td>   </tr></table>

   

  （2）border属性：

  •   Width：宽度

  •   Height：高度

  •   Border：边框

  •   Bordercolor：边框颜色

  •   Bgcolor：表格背景色

  •   Background：背景图片

  •   Cellpadding：单元格与内容距离

  •   Cellspacing：单元格与单元格距离

  •   Rules：合并边框线，取值：all

   

  （3）       tr属性：

  bgcolor

  align

  height：水平：left、center、right

  valign：垂直：top、middle、bpttom

  （4）      td属性：

  •   colspan：合并单元格（左右）

  •   rowspan：合并单元格（上下）

  •   background

  •   width

  •   height

  •   bgcolor

  •   align

  •   valign

  表单

  （1）结构：

           

  　　<form name=”form1” method=“get” action=“login.php”>   用户名：<input type=”text” name=”username”/>   密码：<input type=”password” name=”userpwd”/>   <input type=”submit” value=”提交表单”/></form>

   

  （2）

  标记属性----块元素

  •   name

  •   method:提交方式 get、post

  •   action：指定表单的处理程序，一般是PHP文件

  •   enctype：指定表单数据的编码方式。只能在method=post情况下。

  •   application/x-www-form-urldecoded   //默认加密方式

  •   multipart/form-data   //上传文件，值是他自己

  （3）get和post方法

               Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全

                 如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。

                POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。

  单行文本域

           语法格式：属性=“值”>

    属性：            

  •   name：文本框的名字

  •   Type：表单元素类型

  •   Value：文本框的值

  •   Size：文本框的长度

  •   Maxlength：最多可以输入多少个字符。

  •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

  •   Disabled：禁用属性 同上。

  单行密码域

  语法格式：

    属性：    

  •   name：文本框的名字

  •   Type：表单元素类型

  •   Value：文本框的值

  •   Size：文本框的长度

  •   Maxlength：最多可以输入多少个字符。

  •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

  •   Disabled：禁用属性 同上。

   

  单选按钮

  语法格式:男

                     女

    属性：

  •   name：元素名称

  •   Checked：默认选择checked=“checked”

  •   Value：值

  复选框

  语法格式： 游戏

                       杀人

                       放火

   属性：

  •   name：元素名称

  •   Checked：默认选择checked=“checked”

  •   Value：值

  下拉列表

   

  语法格式：

  <select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>

   

  •   ：只有一个name属性。

  •   ：两个属性value、selected

  •   Selected：默认选中

  •   层叠样式表方式改下拉列表宽度：type=”width:100px”

   

  文本区域

  语法格式：

    属性：

  •   name：元素名称

  •   Cols：宽度

  •   Rows：高度

   

   

  各种按钮

  •   提交按钮

  •   重置按钮

  •   图片按钮

  •   普通按钮

  •   普通按钮本身不具备任何功能，需与js配合使用。

  上传文件域

  语法格式：

    属性：

  •   Name：名称

  •   Value：上传文件名。Value属性是只读属性，

  • 必须与enctype=”multipart/form-data”>配合实现才能上传

  隐藏域

  功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

  语法格式：

   

  表格标题

  语法格式：

   

  是

  的子标记。

  放在的后面。

   

  网页多媒体

  网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

   

   

  图片热点

  图片热点：给一张图片加多个热点。

  语法结构：

  <ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /></map>

   

  标记常用属性：

  •  Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）

  •  Coords：热区的坐标

  •    如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”

  •  （x1,y1）为左上角坐标，（x2，y2）为右下角坐标。

  •    如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。

   

   

  普通框架

  框架集和框架页：

  框架集：:主要用来划分窗口。

  框架页：:主要用来指定默认显示的网页地址。

  属性：

  •   Cols:划分左右型框架。

  •   Cols=”200,*”   左边为宽度200px，剩下的为右边。

  •   Cols=”180,*,180”   左右框架为180px，剩下的为中间框架

  •   Rows：划分上下型框架

  •   Rows=”200,*”  上框架高度为200px，剩下的为下框架。

  •   Frameborder：是否显示边框线，取值0或1.

  •   Border：边框粗细。

  •   Bordercolor：边框颜色。

  框架页的属性 ：

  •   Src：该小窗口中，默认显示的网页地址。

  •   Noresize：不能调整大小。Noresize=”noresize”

  •   Scrolling:是否显示滚动条，取值：auto、yes、no

  •   Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。

  </strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容

  内嵌框架（行内框架）

  与普通框架区别：

  常用属性：

  •   Src：引入文件地址。

  •   Width：宽度

  •   Height：高度

  •   Frameborder：是否显示框架的边框线，取值：yes或no。

  •   Scrolling：是否显示滚动条。取值：yes、no、auto。

  •   Name：制定小窗口的名称，改名称也是给标记的target属性来用。

  •   Align：框架在网页中对齐方式，取值：left、center、right。

  CSS简介

  CSS 层叠样式表。

  CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

   

  语法格式：

  <style type=”text/css”> h1{Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色}</style>

   

  CSS选择器

  基本选择器

  (1) “*”选择器：通配符

  •   描述：将匹配所有的html标记，所有标记都会改变。

  •   语法：*{color：red；}

   

  （2）标签选择器

  •   描述：将匹配指定的html标记

  •   语法：h1{color：red；}

  （3）class选择器（类选择器）-----使用最多的选择器

  •   描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。

  •   格式：

    　　　　　　  

    　　　　　　 

      

    　　　　　　 

      

    　　　　　　 

    （3）子元素選擇器

      說明：為某個元素的子元素新增樣式

    CSS尺寸屬性

      Width：元素寬度，一定要加px單位。

      Height：元素高度。

    CSS字體屬性

    •   Font-size：文字大小。如：font-size：14px;

    •   Font-family：字體。如：font-family：微軟雅黑；

    •   Font-style：斜體，取值：italic。如：font-style：italic；

    •   Font-weight：粗體，取值：bold。如：font-weight：bold;

    CSS文字屬性

    • #  Color：文字顏色

    #  Text-decoration：文字修飾線，取值：none（無）、underline（底線）、overline（上線）、line-through（刪除線）
    •   Text- align：文字水平對齊方式，取值：left、center、right

    •   Line-height：行高，可以固定值，也可以百分比、如：line-height：24px； line-height：150%；

    •   Text-indent：頭行縮排。 Text-indent：28px;

    •   Letter-spacing：字間距。

    偽類選擇器

    一個超鏈接，有四個狀態

      正常狀態（：link）：滑鼠沒放上之前連結的樣式。
      放上狀態（：hover）：滑鼠放到連結上時的樣式。
      啟動狀態（：action）：按住滑鼠左鍵不放開的樣式。
      訪問過的狀態（：visited）：按下滑鼠左鍵，並彈起，這時的樣式。

    在平常的工作中，會使用以下寫法，來為連結加上樣式：

    A:link,a:visited{ color :#444;text-decoration:none; }  //將「正常狀態」和「造訪過的狀態」合而為一。
    A:hover{ color:#990000;text-decoration:underline; }  //”滑鼠放上” 單做一種效果
    CSS列表屬性
    List -style：列表樣式，取值：none。去掉項目符號或編號前面的各種符號。
    •            

    •              gt;
      • 上海市
      • 深圳市

      #CSS邊框屬性：每個元素可以加上邊框線

    •   Border-left：左邊框線。

    •   格式：border-left：粗細線型線的顏色

    •   線型：none、solid、dashed（虛線）、dotted（點狀線）

    •   

      範例：

      border-left：5px dashed red;
      Border-right：右邊框線。
    •   Border-top：上邊框線。

    •   Border-bottom：下邊框線。

    •   Border：同時為四個邊加上邊框線。

    • CSS內邊距屬性：邊框線到內容的填滿
      #注意：平常我們所說的width和height屬性，他們指內容的寬度和高度，不含內、外邊距、邊框線。

    •   Padding-left：左內填滿距離，右邊線到內容間的距離。

    •   Padding-right：右內填滿距離。同上

    •   Padding-top：上。

    •   Paddingbottom：下。

    •   縮寫形式
      Padding:10px;    //四個邊的內填分別為10px;

    • #  Padding：10px 20px;   //上下為10px；左右為20px；

    • ##  Padding：5px 10px 20px;   //上為5px，左右為10px，下為20px ;

    •   Padding：20px 10px 5px 20px;    //順序上右下左;

    • #CSS外側距屬性：邊線往外的距離

    •   Margin-left：左邊線往外的距離

    • #  Margin-right：右邊…

    •   Margin-top：上….

      #########  Margin-bottom：下….############  簡寫式：##### #######  Margin：10px；   //四個外邊距分別為10px。 ############  Margin：10px 20px；   //上下外邊距為10px，左右外邊距為20px。 ###

    •   Margin：10px 20px 50px；    //上外邊距為10px，左右為20px，下為50px。

    •   Margin：10px 20px 30px 40px；   //順序上右下左。

    CSS背景屬性

    •  Background-color:背景顏色。

    •  Background-image:背景圖片位址。 Background-image:url(image/banner.jpg)

    以上是分享一個HTML的學習之路的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    相關標籤：

    html 學習 菜鳥

    來源：php.cn
    上一篇：ios關閉彈跳窗後有部分還「留在頁面上」改如何處理？ 下一篇：APICloud Studio 2使用GIT-SVN 技術的實例教程
    本網站聲明

    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章

    • NameValuePair方式傳送參數實例教學
      1970-01-01 08:00:00
    • 使用dom4j解析xml文檔實例
      1970-01-01 08:00:00
    • Catalog Service - 解析微軟微服務架構實例程式碼
      1970-01-01 08:00:00
    • .net Elasticsearch入門實例詳解
      1970-01-01 08:00:00
    • 詳細介紹Spring boot 新增jsp支援配置的實例
      1970-01-01 08:00:00
    • JS怎麼偵測window.open開啟的視窗是否關閉？
      1970-01-01 08:00:00
    • 分享一個sqlyog連接資料庫亂碼的問題以及解決方法
      1970-01-01 08:00:00
    • 使用Java中可變長參數的實例
      1970-01-01 08:00:00
    • 最新的高德地圖API WEB開發實例教程
      1970-01-01 08:00:00
    • AJAX的優點和缺點
      1970-01-01 08:00:00
    最新問題

    PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...

    來自於 2024-04-16 09:34:16

    0

    0

    4687

    頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...

    來自於 2024-04-06 21:58:04

    0

    1

    800

    解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...

    來自於 2024-04-06 20:22:15

    0

    1

    454

    如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...

    來自於 2024-04-06 20:02:10

    0

    2

    543

    用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...

    來自於 2024-04-06 17:40:41

    0

    2

    410
    相關專題

    更多>

    • html版權符號
    • html線上編輯器
    • html網頁製作
    • html空格
    • html是什麼
    • html字體大小怎麼設定
    • html轉txt
    • html文字框程式碼怎麼寫
    熱門推薦

    • url是什麼意思？
    • DOM是什麼意思
    • 如何改變圖片大小
    • HTML中如何將字型加粗
    • html圖片大小如何設定

    熱門教學

    更多>

    相關教學

    熱門推薦

    最新課程

    • 
      最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

      1416845
    • 
      php入門教程之一週學會PHP

      4257451
    • 
      JAVA 初級入門影片教學

      2475853
    • 
      小甲魚零基礎入門學習Python影片教學

      503687
    • 
      PHP 零基礎入門教學

      844123

    • 
      最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

      1416845次學習
    • 
      JAVA 初級入門影片教學

      2475853次學習
    • 
      小甲魚零基礎入門學習Python影片教學

      503687次學習
    • 
      Web前端開發極速入門

      215273次學習
    • 
      零基礎精通 PS 影片教學

      876897次學習

    • 
      【web前端】Node.js快速入門

      6363次學習
    • 
      國外Web開發全端課程全集

      5011次學習
    • 
      Go語言實戰之 GraphQL

      4196次學習
    • 
      550W粉絲大佬手把手從零學JavaScript

      633次學習
    • 
      python大神Mosh，零基礎小白6小時完全入門

      21319次學習

    最新下載

    更多>

    網站特效

    網站源碼

    網站素材

    前端模板

    • [表單按鈕] jQuery企業留言表單聯絡程式碼
    • [播放器特效] HTML5 MP3音樂盒播放特效
    • [選單導航] HTML5酷炫粒子動畫導覽選單特效
    • [表單按鈕] jQuery可視化表單拖曳編輯程式碼
    • [播放器特效] VUE.JS仿酷狗音樂播放器代碼
    • [html5特效] 經典html5推箱子小遊戲
    • [圖片特效] jQuery滾動添加或減少圖片特效
    • [相簿特效] CSS3個人相簿封面懸停放大特效

    • [前端模板] 家居裝潢清潔維修服務公司網站模板
    • [前端模板] 清新配色個人求職履歷引導頁模板
    • [前端模板] 設計師創意求職履歷網頁模板
    • [前端模板] 現代工程建築公司網站模板
    • [前端模板] 教育服務機構響應式HTML5模板
    • [前端模板] 網上電子書店商城網站模板
    • [前端模板] IT技術解決互聯網公司網站模板
    • [前端模板] 紫色風格外匯交易服務網站模板

    • [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
    • [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
    • [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
    • [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
    • [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
    • [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
    • [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
    • [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

    • [前端模板] 家居裝潢清潔維修服務公司網站模板
    • [前端模板] 清新配色個人求職履歷引導頁模板
    • [前端模板] 設計師創意求職履歷網頁模板
    • [前端模板] 現代工程建築公司網站模板
    • [前端模板] 教育服務機構響應式HTML5模板
    • [前端模板] 網上電子書店商城網站模板
    • [前端模板] IT技術解決互聯網公司網站模板
    • [前端模板] 紫色風格外匯交易服務網站模板

    關於我們 免責聲明 Sitemap

    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！