Web基礎瞭解版01-html-css

来源:https://www.cnblogs.com/Open-ing/archive/2019/12/17/12036945.html
-Advertisement-
Play Games

HTML 網頁構成 摘要說明 結構(HTML) HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。 表現(CSS) CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現 ...


HTML

網頁構成

摘要說明
結構(HTML) HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
表現(CSS) CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
行為(JavaScript / jQuery) JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有購物網站中圖片的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的

HTML文件結構

  • <html></html>為HTML頁面中的根標簽，所有的HTML網頁中的標簽都在<html></html>中。

  • 這裡<head>標簽用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script><style>、<link>、 <meta>等標簽。

  • 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這裡的標簽中的內容會在瀏覽器中顯示出來。

標簽語法

  • 標簽由英文尖括弧 < 和 > 括起來,如：<html>

  • html中的標簽一般都是成對出現的,分開始標簽和結束標簽。結束標簽比開始標簽多一個 / ,<title>..</title>;還有一些是自結束標簽，如：<br/>

  • 標簽與標簽之間是可以嵌套的，但先後順序必須保持一致，如：<div>里嵌套<p>，那麼</p>必須放在</div>的前面。如： <div><p>..</p></div>

  • 註釋是不可以嵌套的,如：<!-- <!-- 註釋部分 --> -->

  • HTML標簽不區分大小寫,<h1>和<H1>是一樣的,但萬維網聯盟（W3C）建議小寫。

常用標簽

<h1>...</h1> 標題
<br /> 換行
<hr /> 分割線
<p>...</p> 段落
<span></span> 行內
<img src="" /> 圖片
<a href=""></a> 超鏈接
<ul>...</ul> 無序列表
<ol>...</ol> 有序列表
<li>...</li> 列表項
<table>...</table> 表格
<tr>...</tr> 一行
<td>...</td> 一列
<th>...</th> 列標題
<form>...</form> 表單
<input> 輸入框
<select>...</select> 下拉列表
<option>...</option> 下拉選項

屬性

align="left" 　　　　　　　　　　　　　　　　　　【align="center"，align="right"　　左中右】

style="background-color: red"　　　　　　　　   【樣式】

<img alt="載入失敗提示" src="../網路/本地路徑" border="邊框" width="100px" height="120" />【寬高只設置一項即可，另一項會自適應】

<a href="../網路/本地路徑" target="_self">　  　【" target="_blank"在新視窗打開，預設原視窗打開】

列表

<ul type="square">
　　<li>...</li>
　　<li>...</li>
</ul>

在ul標簽中添加屬性 type="" circle 空心圓，disc 實心圓 (預設)，square 實心方塊
在ol標簽中添加屬性 type="1/a/A/i/I"

表格

<table>
　　<tr>　　　　　  　【行】
　　　　<th></th>　　【標題列】
　　</tr>
　　<tr>
　　　　<td></td>　　【列】
　　</tr>
</table>

table標簽中可以聲明的屬性
　　border="" 　 　表格的邊框
　　width=""　　    表格的寬度
　　height=""　   　高度
　　align="" 　　    表格的對其方式
　　bgcolor="" 　　背景顏色
td標簽內定義對齊方式的屬性
　　align=""   　　  設置當前單元格水平對齊
　　valign="" 　　  設置當前單元格垂直對齊
　　bgcolor=""   　 設置背景顏色
合併單元格
 　   rowspan="   　合併單元格的個數   　  合併行
　　colspan="　　 合併單元格的個數　　  合併列

 表單

<form action="提交的路徑" method="get/post">

　　<input type="text" name="文本框" value="預設值"/>

　　<input type="password" name="密碼框" value="預設值"/>

　　<input type="radio" name="單選框" value="..." checked="預設選擇">

　　<input type="checkbox" name="覆選框" value="..." checked="預設選擇">

　　<select name="下拉列表">
　　　　<option value="china" selected="預設選擇">中國</option>
　　</select>

　　<input type="hidden" name="隱藏域" value="..."> 

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

　　<input type="reset" value="重置按鈕">

　　<input type="submit"name="提交按鈕" value="...">

</form>

  • get：是將所有的提交的數據顯示在地址欄，長度會有一些限制

  • post：將要提交的數據放在請求體中，在url表單裡面沒有任何數據

 提交時以key:value形式，其中文本框、密碼框的key為name 值為提交數據

 　　　　　　　　　　　 其中單選框、覆選框、隱藏域、提交按鈕key為name 值為value

　　　　　　　　　　　 下拉列表name在select標簽value在option標簽提交時同上key為name值為value

 常規屬性

id：　　標簽的唯一編號，識別碼

class :   標簽的分類，用來識別一組標簽。

style：  標簽的風格、樣式

p,form,ol,ul,li,dl,dt,dd,h3{margin:0;padding:0;list-style:none} 樣式清除

事件屬性

  • onblur:　　        失去焦點

  • onclick:              滑鼠點擊

  • onbdclick:          雙擊

  • onmouseover:   滑鼠移動到元素上

CSS

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML元素（或內容）在瀏覽器內的顯示樣式

語法

CSS樣式由選擇符(選擇器)和聲明組成，而聲明又由屬性和值組成

語法說明

  • 屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration）

  • 多個聲明：如果要定義不止一個聲明，則需要用英文分號”;”將每個聲明分開。雖然最後一條聲明的最後可以不加分號，但儘量在每條聲明的末尾都加上分號

  • 每行最好只描述一個屬性

  • CSS對大小寫不敏感，但建議使用小寫。不過存在一個例外：class 和 id 名稱對大小寫是敏感的。

  • CSS註釋：/* 註釋內容 */

編寫位置

方式一：寫在標簽的style屬性中

<p style=“font-size:30px”>字體大小用px表示</p>

方式二：寫在html頭的style標簽中(style標簽一般寫在head標簽與title標簽之間)

<style type="text/css">
    p{
        background-color: yellow;
    }
</style>

方式三：寫在外部的css文件中，然後通過link標簽引入外部的css文件

<link rel="stylesheet" type="text/css" href="style.css">

優先順序按照上述講的三種方式依次降低

選擇器

標簽選擇器：標簽名　　　　　　　　<html的標簽如：div>

id選擇器：#id(名)　　　　　　　　　<p id="屬性名">

類選擇器：.class(名)　     　　　　　 <p class="屬性名">

組選擇器：選擇器1，…　　　　　　【同時使用多個選擇器選中一組元素，使用，分隔】

派生選擇器：選擇器1 選擇器2 …　　【根據上下文關係，選擇元素的後代元素，使用空格隔開】

常用樣式

顏色：color：red；或  #00F6DE

寬度：width：20px; 或  %20

高度：height：20px;  或  %20

背景顏色：background-color： #00F6DE

字體大小：font-size：20px;

文本居中：text-align：center;

div居中：margin-left：auto;　　margin-right：auto;

1px實線邊框：border：1px solid;

 列表去修飾：ul{list-style：none;}

對於樣式暫時不考慮深入瞭解

 

 


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

-Advertisement-
Play Games
更多相關文章
  • Ajax 的基本使用
    Ajax簡介 一門非同步的載入技術，局部刷新 非同步載入，可以在不重載整個網頁的前提下，進行局部刷新 分為原生和JQ兩種 JSON數據格式 Json對象轉字元串： JSON.stringify() 字元串轉Json對象：JSON.parse() 前後端數據交互 html文件 py文件 Ajax局部刷新 ...
  • 事件的傳播
    事件的傳播 ~~~javascript ~~~ ...
  • 事件的綁定
    事件的綁定 ~~~javascript btn01 ~~~ ...
  • 大數據集報表點擊表頭排序
    在潤乾官方線上 demo的 "交互報表" 中，有介紹 "點擊表頭排序" 的報表案例，該報表針對普通統計類報表。對於使用大數據集的報表，當按照此方式改造時發現排序沒起作用或僅對第一頁或前幾頁排序，後面的都沒成功。 要想瞭解啥原因導致？就需要分析該報表的做法及知道大數據集的取數原理。 首先，來分析下線上 ...
  • 使用react-app-rewired和customize-cra對預設webpack自定義配置
    最近在學習react框架，之前一直都是用vue 開發，知道在vue 中知道如何配置一下相關的webpack 有助於開發，學react 過程中，我也在想這些該怎麼配置啊，所以就有這篇文章。 這篇文章主要是講 react-create-app 生成的項目利用 react-app-rewired 和 cu ...
  • 微信小程式APP生命周期
    小程式APP生命周期需要先從app.js這個文件開始，App() 必須在 app.js 中調用，必須調用且只能調用一次，app.js中定義了一些應用的生命周期函數 onLaunch 當小程式初始化完成時，會觸發 onLaunch(全局只觸發一次) onShow 當小程式啟動，或從後臺進入前臺顯示，會 ...
  • vue組件初始化過程
    之前文章有寫到vue構造函數的實例化過程，只是對vue實例做了個粗略的描述，並沒有說明vue組件實例化的過程。本文主要對vue組件的實例化過程做一些簡要的描述。 組件的實例化與vue構造函數的實例化，大部分是類似的，vue的實例可以當做一個根組件，普通組件的實例化可以當做子組件。真實的DOM是一個樹 ...
  • JavaScrip 之 DOM
    DOM 樹 HTML 文檔的骨幹是標簽。 根據文檔對象模型(DOM)，每個HTML標簽都是一個對象，同樣標簽內的文本也是一個對象。因此這些對象都可通過 JavaScript 操作 如果文檔中有空格（就像任何字元一樣），那麼它們將成為 DOM 中的文本節點，如果我們刪除它們，則不會有任何內容。 `` ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類