HTML&CSS筆記001

来源:https://www.cnblogs.com/AmosWong/archive/2018/06/03/AmosWong.html
-Advertisement-
Play Games

lesson1 <!DOCTYPE html><html lang="en,zh"><!-- 告訴搜索引擎爬蟲，我們的網站是關於什麼內容的 --><head> <meta charset="utf-8"> <meta content="服裝" name="keywords"> <meta conte ...


lesson1

<!DOCTYPE html>
<html lang="en,zh">
<!-- 告訴搜索引擎爬蟲，我們的網站是關於什麼內容的 -->
<head>
 <meta charset="utf-8">
 <meta content="服裝" name="keywords">
 <meta content="好看的衣服" name="description">
 <title></title>
</head>
<body>
 ①<p>我是你爸爸</p>
 <p>我是你爸爸</p><!-- 段落標簽 -->

 ②<h1>標題</h1>
 <h2>標題</h2>
 <h3>標題</h3>
 <h4>標題</h4>
 <h5>標題</h5>
 <h6>標題</h6><!-- 標題標簽 獨成一段，加粗字體-->
 ③<strong>
  <em>哈哈</em>
 </strong>
 ④<del style="color:#999">50$</del>
 ⑤<address>我的家在東北</address>
 ⑥<div style="color:#f40">
  <strong>a</strong>
  <em>b</em>
  <del>c</del>
 </div>
 <span></span><!-- 可以作為容器能夠捆綁操作 -->
</body>
</html>

 

 

 

lesson2

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">/*鏈接到4中的ul的導航欄應用*/
  *{
   margin:0;
   padding: 0;
  }
  ul{
   list-style: none;
  }
  li{ 
   margin: 0 10px;
   float:left;
   color:#f40;
   font-weight: bold;
   font-size: 24px;
   height: 30px;
   line-height: 30px;
   padding: 0 5px;
  }
  li:hover{
   border-radius:20px;
   background-color:#f40;
   color: #fff;
  }
 </style><!-- 鏈接到4中的ul的導航欄應用 -->
 <style type="text/css">
  input{
   border: 1px solid #999;
  }
 </style>
</head>
<body>
  <div style="width:100px;height:100px; ">
  彪哥很帥
<!-- 1.1 ①空格和回車都是字元分割符 -->
  osdfjsjfsjff fdfdfsf  dff
<!-- 1.2  html編碼 -->
  <!--① 空格：&nbsp; -->
  <!--②小於和大於符號&lt;    &gt; -->
  <!--   彪哥&nbsp;&nbsp;&nbsp;&nbsp;帥 &lt;div&gt; -->
  <!-- 2.1 回車符 <br> -->
  <!--   <br><br><br><br><br><br> -->
<!-- 2.2 水平線 <hr> -->
<!-- 3. 有序列表 -->
 <!-- </div>
 喜歡的電影
 <ol type="i" start="117" reversed="reversed">
   <li>了不起的蓋茨比</li>
   <li>飛速發</li>
   <li>的說法</li>
   <li>地方</li>
  </ol>  -->
<!-- 4.無序列表 應用：導航欄-->
<!--   <ul type="square">
   <li>蘋果</li>
   <li>草莓</li>
   <li>橘子</li>
   <li>香蕉</li>
  </ul> -->
<!-- 5.img src="" -->
     <!-- 1.網上的url
     2.本地的絕對路徑
     3.本地的相對路徑
   相對關係 D:/A/B/LESSON2.HTML
     D:A/B/123.JPG-->
  <!-- <img src="" alt="" title=""> -->
 <!-- <alt>是圖片占位符，當圖片出錯時顯示文字信息
  <title>是圖片提示符-->
<!-- 6.<a herf=""></a>   超鏈接 -->
 <!-- 6.11 文本超鏈接-->
<!--  <a href="https://www.baidu.com">百度一下，你就知道</a>
 --> <!-- 6.12 圖片超鏈接-->
<!--  <a href="https://www.baidu.com">
  <img src="">
 </a> -->
 <!-- 6.13 超鏈接跳轉至新的標簽頁-->
 <!-- <a href="https://www.baidu.com" target="_blank">百度一下，你就知道
 </a> -->
 <!-- 6.2 錨點，回到頂部/底部 -->
<!--  <div id="demo1" style="width: 100px;height: 100px;">demo1
 </div>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <br></br>
 <div id="demo2" style="width: 100px;height: 100px;">demo2
 </div>
 <a href="#demo1">find demo1</a>
 <a href="#demo2">find demo2</a> -->
 <!--6.3 打電話 發郵件-->
<!--  <a href="tel:1566804****">給彪哥打電話</a>
 <a href="mailto:299893****@qq.com">給彪哥發郵件</a> -->
<!-- 7.<form>表單向後臺發送數據 method有兩種方法:get/post
 action是發送給誰 -->
 <form method="get" action="">
  <p>
  username<input type="text" name="username" value="請輸入用戶名">
  <!-- 輸入框
   後面是數據名 數據值需要輸入 -->
  </p>
  <p>
  password<input type="password" name="password">
  <!-- 密碼框  -->
  <!-- 後面是數據名 數據值需要輸入-->
  </p>
  <input type="submit" value="登陸啦">
  <!-- submit 提交按鈕 -->
  <!-- 喜歡的男明星
  1.周傑倫<input type="radio" name="star" value="jaychou">
  2.吳亦凡<input type="radio" name="star" value="wu">
  3.彭於晏<input type="radio" name="star" value="peng">
  <input type="submit"> -->
  <!-- 單選框 name的作用是把它們限定在一個選擇題中
   value是數據值 沒有value就不能提交-->
 </form>
</body>
</html>

 

 

 

lesson3.html （與lesson3.css配套使用）

<!DOCTYPE html>  <!-- <form>和<input>必須連用才能提交 -->
<html>
<head>
 <title>
  lesson3
 </title>
 <meta charset="utf-8">
<!-- 鏈接CSS1.2 頁面級CSS -->
 <!-- <style type="text/css">
  div{
   width:100px;
   height:100px;
   background-color: green;
  }
 </style> -->
<!-- 鏈接1.3 的link -->
 <link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 1.覆選框 -->
 <!-- <h1>
  Choose your favorite fruit!!
 </h1>
 <form>
 1.apple<input type="checkbox" name="fruit" value="apple">
 2.orange<input type="checkbox" name="fruit" value="orange">
 3.banana<input type="checkbox" name="fruit" value="banana"> -->
<!-- 2.單選框預設選中 -->
 <!--  請選擇您的性別
 <form>
  male<input type="radio" name="sex" value="male" checked="checked">
  female<input type="radio" name="sex" value="female">
 <input type="submit">
 </form> -->
<!-- 3.下拉菜單的構造 -->
<!--  <form method="get">
  <h1>province</h1>
 <select name="province">
  <option>beijing</option>
  <option>shandong</option>
  <option>shanghai</option> -->
 <!-- </select> --><!-- 提交的數據值即是option間的值 也可以在option間添加value再賦值 -->
 <!-- <input type="submit"> -->
 <!-- </form> -->

 


<!-- CSS -->
<!-- 1.CSS的引入 -->
<!-- 1.1行間樣式引入 -->
 <!--  <div style="
 width: 100px;
 height: 100px;
 ">
 </div> -->
<!-- 1.2 頁面級CSS見上head內 -->
 <!-- <div></div>   下麵這個div不可以省略 -->
<!-- 1.3 建立一個 lesson3.css的文件 之後再head中用link -->
<!-- PS:這裡的<div></div>也不能省略 -->

<!-- 2.選擇器 -->
<!-- 2.1 ID選擇器 ID 一一對應 -->
 <!-- <div id="only">123</div>
 <div id="only1">456</div> -->
<!-- 2.2 class -->
 <!-- <div class="demo demo1">123</div>
 <div calss="demo">456</div> -->
<!-- 2.3標簽選擇器 -->
 <!-- <div>123</div> -->
<!-- 2.4通配符選擇器 -->
 <!--  <span>123</span>
 <div>456</div>
 <strong>999</strong> -->
<!-- 2.5屬性選擇器 -->
<!--  <div id="only" class="demo">123</div>
 <div id="only1">234</div> -->

<!-- !important -->
<!--  <div style="background-color: red">666</div> --> 

<!-- 選擇器的優先順序：
 !important>行間樣式>id>class=屬性選擇器>標簽選擇器>通配符 -->

<!-- CSS權重 -->
 !important  Infinity正無窮
 行間樣式  1000
 id     100
 class|屬性|唯類 10
 標簽|偽元素  1
 通配符   0
   256進位
</body>
</html>

 

 

 

lesson3.css

/*div{
 width: 100px;
 height: 100px;
 border-radius:50%;
 background-color: red;
}*/
/*2.1#only{
 background-color: red;
}
#only1{
 background-color: green;
}*/


/*2.2 class選擇器
   .demo{
 background-color: yellow;
}
.demo1{
 color: #f40;
}*/


/*2.3 標簽選擇器 選中所有該種標簽（無論標簽是否嵌套，無論標簽的位置）*/
/*div{
 background-color: red;
}*/


/*2.4通配符選擇器 選中所有標簽*/
/**{
 background-color: green;
}*/

/*2.5屬性選擇器*/

 /*[id="only"]{
  background-color: green;
 }*/

/*!important*/

/*div{
 background-color: green!important;
}*/

 


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

-Advertisement-
Play Games
更多相關文章
  • javascript中var,let,const的區別
    //1.var定義的變數可以修改，如果不初始化會輸出undefined，不會報錯。 var a; console.log(a); //undefined //2.let是塊級作用域，函數內部使用let定義後，對函數外部無影響。 let c = 3; console.log(c) function c... ...
  • 如何搭建私人的ghost博客
    可參考 http://blog.pandax.me/cjbk/ 此文 ...
  • js原生實現輪播
    通過對img opacity樣式的修改，達到對img顯隱的控制，從而形成輪播 ...
  • 8、Node.js Buffer(緩衝區)
    內容：Buffer與字元編碼，Buffer創建、寫入、讀取、轉換成JSON對象、合併、比較、拷貝、裁剪、長度 Buffer 與字元編碼Buffer 實例一般用於表示編碼字元的序列，比如 UTF-8 、 UCS2 、 Base64 、或十六進位編碼的數據。 通過使用顯式的字元編碼，就可以在 Buffe ...
  • JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的詳細介紹
    javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元 ...
  • 原生JS編寫了個簡易進度條，還請各位前輩指教~
    剛開始學習JS不久，以及第一次來到博客園，第一次進行分享博文。。。 噢，不對，不能說是分享，而是學習請教，請前輩多多指教，各個方面都可以~ 感謝您的路過~ ...
  • CSS權重的比較方法
    CSS的權重如下： !important Infinity正無窮 行間樣式 1000 id 100 class|屬性|唯類 10 標簽|偽元素 1 通配符 0 256進位 當出現多個選擇器時 在同一行的選擇器權重相加即可 當兩個混合選擇器權重相同時優先選擇後面的選擇器 如： html <div cl ...
  • Flex入坑指南
    彈性佈局flex是一個幾年前的CSS屬性了，說它解放了一部分生產力不為過。至少解放了不少CSS佈局相關的面試題 :) 之前網上流行的各種XX佈局，什麼postion: absolute+margin，float+padding，各種都可以使用flex來取代之。 早兩年在使用的時候，還是會擔心有相容性 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類