html簡單的知識

時間  2019-11-18
標籤 html 簡單 知識 欄目 HTML 简体版
原文   原文鏈接
分佈式版本控制git
   
  pwd查詢當前目錄 ls ls -la
  git config --global user.name xxx
  git config --global user.email xxx
  git config user.name
  git config user.email
  mkdir xxx文件夾 touch xxx.html
  vim xxx.txt 打開文件夾 i 進入編輯模式 ESC 退出編輯模式
  在插入編輯模式下編輯文件。
  按下 「ESC」 鍵，退出編輯模式，切換到命令模式。
  在命令模式下鍵入"ZZ"或者":wq"保存修改而且退出 vi 。
  若是隻想保存文件，則鍵入":w"，回車後底行會提示寫入操做結果，並保持停留在命令模式。
  放棄全部文件修改：按下 "ESC" 鍵進入命令模式，鍵入 ":q!" 回車後放棄修改並退出vi。
  放棄全部文件修改，但不退出 vi ，即回退到文件打開後最後一次保存操做的狀態，繼續進行文件操做：按下 "ESC" 鍵進入命令模式，鍵入 ":e!" ，回車後回到命令模式。
  git merge dev該命令把指定分支合併到當前分支,執行該操做前常常會切換到master分支,意思是把當前的分支的提交合併到master分支上
  git branch dev建立分支
  git branch查看分支
  git checkout dev切換分支
  git branch -d dev刪除分支
  git checkout -b dev origin/dev抓取分支
  抓取失敗時
  git branch --set-upstream-to=origin/dev dev
  git branch --set-upstream dev origin/dev
  git push origin dev推送分支
  cd xxx
  git init
  git status若是查看時中文顯示亂碼,能夠添加以下配置git config --global core.quotepath false
  git add ./xxx
  git commit -m'作了什麼'
  git rm xxx git commit -m'刪除了什麼'
  git mv xx1 xx2 git commit -m'改了什麼'
  git checkout -- xxx 撤銷工做區修改 git reset HEAD xxx 撤銷暫存區修改
  git reset --hard xxxid
  git log 查看現有版本 git reflog 查看歷史全部版本
  git remote -v 查看當前綁定hub網址
  git remote rm origin 刪除綁定hub網址
  git remote add origin https://github.com/luoshida/1234.git 電腦上的東西綁定到hub上
  git push -u origin master 推送 可合併爲 git push -u httpxxx master
  git clone httpxxx hub上的東西複製到電腦上
  ssh-keygen -t rsa -C '791371894@qq.com' 生成公鑰和密鑰
  cd .ssh 進入隱藏文件夾.ssh 公鑰id_rsa.pub 密鑰id_rsa
  cat id_rsa.pub 查看公鑰
  ssh -T git@github.com 驗證密鑰是否綁定成功
   
  html
  萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改
  html4三種文檔類型：Strict, Transitional, 以及Frameset. 中譯爲：嚴格版本，過渡版本，以及基於框架的版本！
  html5文檔類型<!doctype html> DTD文檔聲明
  html標籤
   
  <h1>指定標題</h1> h1-h6
  <p>指定段落</p>
  <hr>畫一條水平分割線
  <br>內容換行
  <b>加粗文字</b> = <strong>定義重要性強調的文字</strong>
  <u>給字體標下劃線</u> = <ins>定義插入的文字</ins>
  <i>字體變斜</i> = <em>定義強調的文字</em>
  <s>字體上加刪除線</s> = <del>定義被刪除的文字</del>
  <sub>定義下標文本</sub>
  <sup>定義上標文本</sup>
  <ul><li>無序列表,用於導航欄商品列表等</li></ul>
  ul與li配套使用 ol li爲有序列表與無序列表差很少 多用於排行榜
  <dl><dt>條目</dt><dd>條目的描述</dd></dl> 給內容添加定義列表語義用於網站底部相關信息
   
  <table>表格標籤
   
  <caption>給整個表格設置標題</caption>
  <tr>
  <td>1行1列</td> <thead><th>添加頭命令（加粗居中）</th><td>正常</td></thead>
  <td>1行2列</td> <tfoot>添加腳命令</tfoot>
  </tr>
  <tr>
  <td>2行1列</td>
  <td>2行2列</td>
  </tr>
  </table>
  table bgcolor="yellow"背景色 width="200px"寬度 height="200px"高度
  表內參數 align="left/center/right" valign="top/center/bottom" table中爲表格朝向，在tr或td爲文字朝向
  border="1/2/3"邊框粗細 cellspacing單元格之間的距離外邊框 cellpadding文字與邊框的距離內邊框
  rowspan/colspan="2"垂直或水平合併2單元格 被合併的單元格程序命令刪除
   
  <form>表單標籤
   
  <head>
  <title>123</title>
  <style>textarea{resize: none;}</style>
  <!-- 使最下面的簡介輸入框固定大小 -->
  </head>
  <body>
  <form action="https://www.baidu.com">
  <fieldset>
  <!-- fieldset命令爲在form表單加大邊框 -->
  <legend>在大邊框上加本身想要的字</legend>
  <p>
  姓名:
  <input type="text" name="name" value="默認在輸入框內容" list="123" placeholder="請設置用戶名" autocomplete="off">
  placeholder屬性提供可描述輸入字段預期值的提示信息（hint）該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。
  autocomplete清除input框內輸入歷史下拉框
  <datalist id="123">
  <!-- datalist命令是在輸入框內加入備選項 -->
  <option>ddd</option>
  <option>aaa</option>
  <option>bbb</option>
  <option>ccc</option>
  </datalist>
  </p>
  <p>
  <label for="Use">密碼:</label>
  <!-- label命令是使鼠標點到內容時也能是光標定位在輸入框內 -->
  <input type="password" name="password" id="Use">
  </p>
  <p>
  性別(單選項)：男<input type="radio" name="sex" value="1">
  女<input type="radio" name="sex" value="2">
  <!-- （value爲上傳到服務器的一個代號radio和checkbox一樣適用 上傳結果爲sex=1/2） -->
  </p>
  <p>
  愛好(多選項)：走<input type="checkbox" name="bobbit" value="1">
  跑<input type="checkbox" name="bobbit" value="2">
  跳<input type="checkbox" name="bobbit" value="3">
  </p>
  <P>
  <input type="reset" name="重置清空表單內容" value="重置">
  <!-- value是在按鈕上顯示的文字 -->
  </P>
  <input type="hidden" name="隱藏目錄私密上傳">
  <input type="button" name="萬能按鈕本身起名" value="顯示的文字">
  <input type="submit" name="提交">
  郵箱<input type="email" name="email" value="默認在輸入框內容">
  網址<input type="url" name="網址" value="默認在輸入框內容">
  <input type="number" name="數字輸入框">
  日期<input type="date" name="日期">
  喜歡的顏色<input type="color" name="顏色選擇框">
  <p>
  用圖片提交<input type="image" src="C:\Users\liyuphp\Desktop\圖片\timg (1) - 副本.jpg">
  </P>
  <p>
  住址<!-- 選擇命令，只能選擇不能輸入 -->
  <select name="address" multiple 多選標籤，可多選>
  <optgroup label="市區">
  <!-- optgroup爲分組命令可加可不加 -->
  <option value="1">鄭州</option>
  <option value="2">周口</option>
  <option value="3">南陽</option>
  <!-- value爲上傳到網站的代號爲住址=1 -->
  </optgroup>
  <optgroup label="省份">
  <option value="4">河南</option>
  <option value="5">河北</option>
  <option value="6">安徽</option>
  </optgroup>
  </select>
   
  簡介<!-- 多行編輯 -->
  <textarea name="intr" id="intr" cols="20" rows="5">這裏是表單上默認文字</textarea>
  獲取多行編輯框的內容用 $('#intr').val()獲取
  </fieldset>
  </form>
  </body>
   
  圖片標籤
   
  <img src="網址或路徑" alt="圖片不顯示時顯示的東西"
  title="點擊查看源網頁" height="200px">
   
  音頻視頻標籤
   
  <video src="https://www.4611.com" loop muted height="100px"></video>
  <!-- autoplay:是否須要自動播放視頻 controls:是否須要顯示控制條
  poster: 視頻沒有播放以前顯示的佔位圖片
  loop: 通常用於作廣告視頻,視頻播放完畢以後是否須要循環播放
  preload:預加載視頻,可是須要注意preload和autoplay相沖,若是設置了autoplay屬性,那麼preload屬性就會失效
  muted:靜音
  width/height:和img標籤中的如出一轍 -->
  <video>
  <source src="" type="video/mp4"></source>
  <source src="" type="video/ogg"></source>
  <source src="" type="video/webm"></source>
  </video>
  <!-- 不論是格式1仍是格式2都須要瀏覽器支持HTML5,若是不支持,須要引入相應的框架,如:[html5media](https://html5media.info/) -->
  <!--Ogg=帶有heora視頻編碼和Vorbis音頻編碼的Ogg文件
  MPEG4=帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件
  WebM=帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件-->
  <audio src=""></audio>
   
  HTML5 對於多媒體提供了強有力的支持，除了 audio 和 video 標籤外，還支持如下標籤：
  <embed> 標籤訂義嵌入的內容，好比插件。
  <embed type=」video/quicktime」 src=」Fishing.mov」>
   
  連接標籤a標籤
   
  <head>
  <meta charset="utf-8">
  <title>連接標籤a標籤</title>
  <base href="https://www.123.com">
  <!-- base標籤爲頁面上的全部連接規定默認地址或默認打開的方式
  base標籤必須寫在head標籤中 base標籤沒有結束標籤
  若是既在base中指定了target又在a標籤中指定了target,那麼瀏覽器會按照a標籤中指定的來執行
  若是在base中指定了默認地址,a標籤的地址和img標籤的地址都會以base標籤的地址爲相對地址 -->
  </head>
  <body>
  <a href="https://www.baidu.com" target="_blank" title="連接">百度一下你就知道</a>
  <a href="#">假連接</a>
  <a href="javascript:">假連接2</a>
  <p id="123">1.個人貓飛走了<p>
  <a href="#">返回頂部</a>
  <a href="#123">返回1</a>
  <a href="另外一個網頁的名稱#轉到某個命令行的id" target="_blank">返回另外一個頁面某個命令行中的id</a>
  </body>
   
  結構標籤
   
  <div>無實際意義，塊狀結構，獨佔一行，配合css</div>
  <span>無實際語義，用於佈局</span>
  <div class="header">
  <h1 class="logo"></h1>
  <div class="nav"></div>
  </div>
  <div class="main">
  <div class="aside"></div>
  <div class="article"></div>
  </div>
  <div class="footer"></div>
  header表明頁面頭部內容<header></header>
  nav(navigator)頁面的導航部分
  section表明一個區域,裏面能夠有其餘的標籤,如h標籤...
  article頁面當中的核心內容文章
  aside頁面文章的輔助信息,有時也表明頁面的側邊欄
  footer表明頁面底部內容
  meter特定範圍的數值 max屬性,定義最大值。默認值是 1。
  min屬性,定義最小值。默認值是 0。value屬性,當前取值
  <meter max="100" min="0" value="68"></meter>
  progress進度條標籤 20%
  <progress value="20" max="100"></progress>
  time時間標籤pubdate爲發佈時間datetime規定的時間
  <time datetime="21:00" pubdate>12:00</time>
   
  字符實體
   
  &nbsp;空格
  &copy;版權
  &lt;小於 http://www.w3school.com.cn/html/html_entities.asp
   
  元信息
   
  <meta charset="utf-8">
  <meta name="keyword" content="關鍵字">
  <!-- 告訴搜索引擎當前網頁的關鍵詞,可以提升搜索命中率,讓別人更容易找到你,搜索引擎會用這些關鍵字對文檔進行分類。 -->
  <meta http-equiv="Content-Type" content="text/html">
  <!-- 服務器發送到瀏覽器時首先發送text/html請求，告訴瀏覽器準備接受這樣類型的文檔，再發送請求的內容 -->
  <meta name="description" content="對網頁的描述信息">
  <meta name="author" content="羅世達" />
  <meta name="renderer" content="webkit">
  <!-- renderer標籤，告訴瀏覽器用webkit內核解析 -->
  <meta http-equiv="Refresh" content="5;url=https://www.kuazhu.com" />
  <!-- 進入該網站後5秒後自動跳轉到url指定的網站 -->
   
  表單元素
  HTML5 新增了不少表單元素讓開發者構建更優秀的 Web 應用程序。
  datalist,datetime,output,keygen ,date ,month ,week,time,color,number ,range ,email ,url,
   
  html屬性
  全局屬性 class id style title contenteditable可編輯屬性
  局部屬性 某個html標籤本身所特有的屬性
  事件屬性 觸發動做的能力
   
   
  ### cookie
  * cookie的設置
   
  document.cookie = 'key1=value1';
   
  document.cookie = 'key2=value2';
   
  > 注意,後面的不會覆蓋前面的,在ff下測試
   
  * cookie有效期的設置
   
  ```javascript
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + 14);
  document.cookie = "name=Tom;expires="+oDate;
  ```
   
  * 封裝cookie相關的函數
   
  ```javascript
   
  function setCookie(key,value,iDate){
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDate);
  document.cookie = key+"="+value+";expires="+oDate;
  }
  function getCookie(name){
  var str = document.cookie;
  var arr1 = str.split(";");
  var result = "";
  for(var i=0;i<arr1.length;i++){
  var arr2 = arr1[i].split("=");
  if(arr2[0].trim() == name.trim()){
  result = arr2[1];
  break;
  }
  }
  return result;
  }
   
  function removeCookie(name){
  setCookie(name,false,-1);
  }
   
  ```
   
  * cookie的特色:
   
  > * cookie是document對象上的一個屬性
  > * cookie的大小限制是4k
  > * cookie會存在於請求頭中
  > * 主域名中的cookie會在子域名中存在
   
   
  ### Storage
  * localStorage 和 sessionStorage的api相同
   
  > * setItem(key,value) 設置
  > * getItem(key) 獲取
  > * removeItem(key) 刪除
  > * clear() 清除全部
  > * length 內容個數
  > * key(num) 獲取key的值
   
  * localStorage 和 sessionStorage的存儲時效不一樣
   
  > * localStorage 持久化
  > * sessionStorage 網頁會話結束失效
   
  * localStorage 和 sessionStorage的存儲容量不一樣
   
  > * localStorage 2-5Mb左右
  > * sessionStorage 2-10Mb左右,部分瀏覽器 沒有限制
   
  * 注意點:
   
  >* Storage僅能存儲字符串
  >* Storage的數據不能在不一樣的域中共享
   
  ### 拖拽
   
  * 被拖拽元素添加 draggable=true
   
  * 綁定拖拽事件
   
  > 被拖拽元素相關
  >> * ondragstart 當元素開始拖動時觸發
  >> * ondrag 被拖動元素拖動時觸發
  >> * ondragend 拖拽時鬆開鼠標時觸發
   
  > 容器相關
  >> * ondrop 當放置被拖動元素時觸發
  >> * ondragover 被拖動元素正在到放置到容器時觸發,默認沒法把元素放置到其餘元素中,若是須要設置容許放置,咱們必須阻止對元素的默認處理方式。
  >> * ondragenter 當被拖動元素進入容器時觸發
  >> * ondragleave 當被拖動元素離開容器時觸發
  >> * ondragend 被拖動元素在容器中鬆開鼠標時觸發
  >> * ondrag 容器中的被拖動元素拖動時觸發
   
  * dataTransfer對象
   
  > * 設置數據 dataTransfer.setData(key,val)
  > * 獲取數據 dataTransfer.getData(key)
  > * 設置拖動的圖標圖片: dataTransfer.setDragImage(圖片DOM節點,x,y) x,y爲鼠標對於圖片的相對位置
   
  > 注意:dataTransfer對象存在在原生的event對象上,若是用jQuery的event對象,須要使用jQuery的event對象的originalEvent
   
  ### 拖拽插件
  * jquery.pep.js 官網: http://pep.briangonzalez.org/
   
  ### SVG 介紹
  SVG(Scalable Vector Graphics)可縮放矢量圖形,一種用來描述二維矢量圖形的XML語言
   
  ### SVG視口(viewport)
   
  * SVG視口是指可見區域的大小(畫布的大小)
   
  ```javascript
  <svg width='800' height='600'></svg>
  ```
  > svg默認的寬高是300px*150px
   
  ### SVG視區盒子(viewBox)
   
  viewBox = 'x y width height'
   
  //x:水平座標 y:垂直座標 width:寬度 height:高度
   
  * viewBox會根據座標點和寬高來截取視口,把截取後的內容全屏
   
  ```javascript
  <svg width='800' height='600' viewBox='0 0 80 60'>
  <rect >
  </svg>
  ```
   
  ### 圖形
  * 直線
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
   
  * 矩形
  <rect x='100' y='100' width='400' height='300' fill="#ff0">
   
  ### canvas
  canvas是一個畫布,用來在網頁上繪製圖像
   
  ### canvas基礎
  * 建立canvas
   
  ```javascript
  <canvas></canvas>
  ```
  > canvas默認的寬高是300px*150px
   
  * 畫布的大小
   
  > * 在canvas標籤中設置的width和height是指畫布大大小,不用帶單位
  > * 在css中設置的width和height是指畫布拉伸縮放後的大小
  > * 通常建議在js中設置畫布的大小
   
  * 畫直線
  ```javascript
  cxt.moveTo(0,0);//指定起始座標
  cxt.lineTo(100,100);//直線終點座標
  cxt.lineTo(100,200);
  cxt.strokeStyle='#f00';//指定描邊的樣式
  cxt.lineWidth = 10;//設置線條的寬度
  cxt.closePath();//封閉路徑
  cxt.stroke(); //描邊
   
  cxt.fillStyle = 'rgba(0,255,0,0.5)';//設置填充的顏色
  cxt.fill();//閉合路徑後填充
  ```
   
  * cxt.beginPath();從新開始路徑,繪製時不會繪製以前的路徑
   
  * 圓形
   
  ```javascript
  cxt.arc(圓心x,圓心y,半徑,起始角度,終止角度,是不是逆時針(true爲逆時針))
  ```
  > 3點鐘時0PI 6點鐘是0.5PI 9點鐘是1PI 12點鐘是1.5PI
   
   
  * 矩形
  cxt.strokeRect(x,y,寬,高)
  cxt.fillRect(x,y,寬,高)
   
  * 平移座標原點
  cxt.translate(x,y);
   
  * 旋轉座標系
  cxt.rotate(弧度) 以順時針爲方向旋轉
   
  * 縮放變換
  cxt.scale(x軸比例,y軸比例);
   
  > 全部的變換都是針對座標系的
  > 各類變換之間是相互疊加的
   
  * save和restore環境
  cxt.save(); 保存以前的環境
  cxt.restore();恢復到上一次保存時的環境
   
  * 線性漸變(LinearGradient)
  var linearGradient = cxt.createLinearGradient(起始x,起始y,終止x,終止y);
  linearGradient.addColorStop(百分比,顏色)
   
  * 徑向漸變(RadialGradient)
  var radialGradient = createRadialGradient(起始圓心x,起始圓心y,起始圓半徑,終止圓心x,終止圓心y,終止圓半徑);
   
   
  * 文本
   
  * 圖像繪製
   
  * 圖形畫刷
   
  * 剪輯區
   
  * 繪製陰影
   
  * 繪製曲線
   
  > * 圓弧: context.arc(圓心x,圓心y,半徑,起始角度,終止角度,是否逆時針)
  > * 二次樣條曲線: context.quadraticCurveTo(qcpx,qcpy,qx,qy)
  >> http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
  > * 貝塞爾曲線: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
  >> http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
   
  ### 推薦插件
  * http://echarts.baidu.com/ 內置的包含了豐富功能的圖表
  * https://antv.alipay.com/zh-cn/index.html 可視化圖形語法可交互的統計圖表
  * https://www.highcharts.com 交互圖表
  * https://d3js.org/ 互動圖表
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程