2. 程式人生 > 實用技巧 >11.16學習日誌

11.16學習日誌

阿新 • • 發佈：2020-11-22

11.16學習日誌

HTML運用

1、HTML概念

HTML：Hyper Text Mark-up Language超文字標記語言，是一種用於建立網頁的標準標記語言。通過元素標籤的形式建立Web站點，通過瀏覽器進行解析。

2、HTML基本語法結構

開始標籤 屬性屬性值 內容 結束標籤；

<h1 id = "h1">hello world 1</h1>

3、HTML文件結構

所用的HTML網頁檔案都是由<html></html>、<head></head>、<title></title>、<body></body>四對元素標籤構成的；

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1 id = "h1">hello world 1</h1>
  8. <h2>hello world 2</h2>
  9. <h3>hello world 3</h3>
  10. <h4>hello world 4</h4>
  11. <h5>hello world 5</h5>
  12. <h6>hello world 6</h6>
  13. </body>
  14. </html>

小結:

<html>…</html>標識網頁檔案的開始與結束，所有的Html元素，都要放在這對標記中;

<head>…</head>標識網頁檔案的頭部資訊，如標題、搜尋引擎關鍵字等;

<title>…</title>標識網頁檔案的標題;

<body>…</body>標識網頁檔案的主體部分;

4、HTML文件的註釋結構

<!--註釋的內容-->

5、HTML元素塊級元素、內聯元素

塊級元素(block):每一個塊級元素預設佔據一行，緊跟的塊級元素分配在下一行，可以自己定義寬高、邊距；常見的HTML塊級元素有:<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<p>、<table>、<form>、<noform>、<td>等；

內聯元素(span):在同一行內可以有多個內聯元素，緊跟第一個內聯元素的後面，不可以自己定義寬高、邊距，要靠內容撐起來；常見的HTML內聯元素有:<a>、<b>、<img>、<input>、<select>、<strong>、<span>、<option>、<em>、<textarea>等；

6、HTML常用元素

a)html標題（<h1>到<h6>,數字越大，級數越小）

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1>hello world 1</h1>
  8. <h2>hello world 2</h2>
  9. <h3>hello world 3</h3>
  10. <h4>hello world 4</h4>
  11. <h5>hello world 5</h5>
  12. <h6>hello world 6</h6>
  13. </body>
  14. </html>

b)html水平線

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1>hello world 1</h1>
  8. <hr></hr><!--水平線-->
  9. <h2>hello world 2</h2>
  10. </body>
  11. </html>

c)html註釋

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1>hello world 1</h1>
  8. <hr></hr><!--水平線-->
  9. <h2>hello world 2</h2>
  10. <!--<h3>hello world 3</h3>為三級標題-->
  11. </body>
  12. </html>

d)html段落<p>及段落換行<br/>

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <p>你好！中國</p>
  8. <hr></hr>
  9. <p>hello world</p>
  10. <br/><!--空一行-->
  11. <p>大家好<p/>
  12. </body>
  13. </html>

e)html文字格式化

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1>hello world</h1>
  8. <hr></hr>
  9. <b>hello world 定義粗體文字</b>
  10. <hr></hr>
  11. <big>hello world 定義大號文字</big>
  12. <hr></hr>
  13. <em>hello world 定義著重文字</em>
  14. <hr></hr>
  15. <i>hello world 定義斜體文字</i>
  16. <hr></hr>
  17. <small>hello world 定義小號文字</small>
  18. <hr></hr>
  19. <strong>hello world 定義加重語氣</strong>
  20. <hr></hr>
  21. <sub>hello world 定義下標文字</sub>
  22. <hr></hr>
  23. <sup>hello world 定義上標文字</sup>
  24. <hr></hr>
  25. <ins>hello world 定義插入文字</ins>
  26. <hr></hr>
  27. <del>hello world 定義刪除文字</del>
  28. <hr></hr>
  29. </body>
  30. </html>

f)html超連結

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <a href = "http://www.baidu.com">百度</a>
  8. </body>
  9. </html>

注意:<a>比較重要的屬性有兩個，分別是href、target；href指定超連結地址；target指定開啟方式；_blank 新頁面開啟；

g)html影象<img>

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <img src = "圖片的相對路徑"/>
  8. </body>
  9. </html>

h)html表格<table>

  1. <html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <title>員工表</title>
  5. </head>
  6. <body>
  7. <div class="emp_contaner">
  8. <h3>員工資訊表</h3>
  9. <table id="tab">
  10. <tr>
  11. <th>全選<input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
  12. <th>員工編號</th>
  13. <th>員工名稱</th>
  14. <th>員工部門</th>
  15. <th colspan="2">操作</th>
  16. </tr>
  17. <tr>
  18. <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  19. <td>1001</td>
  20. <td>張三</td>
  21. <td>財務部</td>
  22. <td><a href="#">刪除</a></td>
  23. <td><a href="#">修改</a></td>
  24. </tr>
  26. <tr>
  27. <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  28. <td>1002</td>
  29. <td>李四</td>
  30. <td>人事部</td>
  31. <td><a href="#">刪除</a></td>
  32. <td><a href="#">修改</a></td>
  33. </tr>
  35. <tr>
  36. <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
  37. <td>1003</td>
  38. <td>王二</td>
  39. <td>人事部</td>
  40. <td><a href="#">刪除</a></td>
  41. <td><a href="#">修改</a></td>
  42. </tr>
  43. </table>
  44. </div>
  45. </body>
  46. </html>

注意：*colspan =”2” 橫跨兩列 ， rowspan =”2” 橫跨兩行； *cellpadding 單元格邊距（字與內邊框的距離） cellspacing 單元格間距（內外邊框的間距）;

i)html列表<ul><ol>

  1. <html>
  2. <head>
  3. <meta charset = "utf - 8">
  4. <title>標題測試</title>
  5. </head>
  6. <body>
  7. <h1 id = "h_list">列表演示</h1>
  8. <hr>無序列表</hr>
  9. <ul id = "list">
  10. <li><a href = "department_全選框.html" target = "iframe">全選框</a></li><br/>
  11. <li><a href = "Customer.html" target = "iframe">客戶註冊</a></li><br/>
  12. <li><a href = "marray.htm" target = "iframe">婚禮承辦</a></li><br/>
  13. <li><a href = "floatImage.htm" target = "iframe">浮動佈局</a></li><br/>
  14. <li><a href = "TestJavaScript.htm" target = "iframe">練習Javascript</a></li><br/>
  15. </ul>
  16. <hr>有序列表</hr>
  17. <ol>
  18. <li><a href = "department_全選框.html" target = "iframe">全選框</a></li><br/>
  19. <li><a href = "Customer.html" target = "iframe">客戶註冊</a></li><br/>
  20. <li><a href = "marray.htm" target = "iframe">婚禮承辦</a></li><br/>
  21. <li><a href = "floatImage.htm" target = "iframe">浮動佈局</a></li><br/>
  22. <li><a href = "TestJavaScript.htm" target = "iframe">練習Javascript</a></li><br/>
  23. </ol>
  24. </body>
  25. </html>

瀏覽器顯示:

j)html表單<form>

<form>中的屬性：

action：後面加url 指定當提交表單時向何處傳送表單資料

method：get/post兩個值，get為明文 post為加密

name：指定表單的名稱

target：_blanket _self _parent _top指定網頁開啟方式

<from>標籤中較為常用的標籤有<input> <select> <label> <button>

<fieldset>標籤可以將表單內的相關元素分組。 會在相關表單元素周圍繪製邊框。

name 規定fieldset的名稱

form 值：form_id 規定fieldset所屬的表單

<legend> 定義了<fieldset>元素的標題。

<input>中最為常用的幾個屬性:

form 後面跟所屬form的id。規定所屬的form

required 值：required 規定必需在提交表單之前填寫輸入欄位。

disabled 值：disabled disabled屬性規定應該禁用的<input>元素。

type:決定輸入型別

text 文字域

radio 單選按鈕

checkbox 複選框

submit 提交按鈕

password 密碼輸入

reset 重置

color 設定拾色器 html5

number 定義用於輸入數字的欄位（您可以設定可接受數字的限制）

range 定義用於精確值不重要的輸入數字的控制元件（比如slider控制元件）。您也可以設定可接受數字的限制

name:input元素的名稱

value：input元素的值

size：輸入欄位的寬度

pattern 規定用於驗證<input>元素的值的正則表示式。pattern屬性適用於下面的input型別：text、search、url、tel、email和password

list 值為datalist的id 該屬性引用<datalist>元素，其中包含<input>元素的預定義選項。

autofocus 該屬性是一個boolean屬性，讓頁面載入後，input自動獲得焦點

<datalist> html5中的新特性 標籤規定了<input>元素可能的選項列表。<datalist>標籤被用來在為<input>元素提供"自動完成"的特性。

　使用者能看到一個下拉列表，裡邊的選項是預先定義好的，將作為使用者的輸入資料。與<option>標籤配合使用

<button> 定義一個點選按鈕

form 所屬的form表單

name button名稱

type

button 該按鈕是可點選的按鈕

reset 該按鈕是重置按鈕

submit 該按鈕是提交按鈕

<label>標籤為input元素定義標註（標記）

label元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在label元素內點選文字，就會觸發此控制元件。

　　　就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上

for 值為某個元素的id 規定label與哪個表單元素繫結。

form form_id

<textarea>

name 規定textarea的名稱

form form_id 規定從屬的表單

cols　規定可見列數

rows 規定可見行數

<select>使用<option>標籤定義下拉列表的可用選項.常見的屬性：

name：指定select名稱

multiple：規定可選擇多個選項

<optgroup> 用於把相關的選項組合在一起。

label 為選項組規定描述。

<option>常見的屬性：

value：指定送往伺服器的選項值

selected：只有一個值--selected 預設選項

<keygen> 定義了表單的金鑰對生成器欄位

form 所屬的表單名稱

name 名稱

keytype 使用的加密演算法

rsa 預設的演算法

dsa

es

  1. <html>
  2. <head>
  3. <title>客戶資訊表</title>
  4. <style>
  5. table,td{
  6. margin-top:50px;
  7. border-collapse:collapse;
  8. margin-left : auto;
  9. margin-right : auto;
  10. }
  11. #tr1,#tr3,#tr5,#tr7,#tr9,#tr11,#tr13{
  12. background-color:#F0F8FF;
  13. }
  14. div{
  15. margin-left:50px;
  16. }
  17. a{
  18. color:red;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <form action = "http://www.baidu.com" method = "post">
  24. <table border = "1" >
  25. <tr id = "tr1">
  26. <td align = "right" width = "300" >客戶型別:</td>
  27. <td align = "left" width = "800"><select id = "s1" value = ""/>
  28. <option>大客戶</option>
  29. <option>小客戶</option>
  30. </td>
  31. </tr id = "tr2">
  32. <tr>
  33. <td align = "right"><a>*</a>姓名:</td>
  34. <td align = "left"><input type = "text" value = "" id = "n1"/>
  35. </td>
  36. </tr>
  37. <tr id = "tr3">
  38. <td align = "right">性別:</td>
  39. <td align = "left"><select id = "sex" value = ""/>
  40. <option>男</option>
  41. <option>女</option>
  42. </td>
  43. </tr>
  44. <tr id = "tr4">
  45. <td align = "right">出生年月:</td>
  46. <td align = "left"><input type = "text" value = "" id = "d"/></td>
  47. </tr>
  48. <tr id = "tr5">
  49. <td align = "right">所屬公司:</td>
  50. <td align = "left"><input type = "text" value = "" id = "c"/></td>
  51. </tr>
  52. <tr id = "tr6">
  53. <td align = "right">職務:</td>
  54. <td align = "left"><input type = "text" value = "" id = "j"/></td>
  55. </tr>
  56. <tr id = "tr7">
  57. <td align = "right">電話:</td>
  58. <td align = "left"><input type = "text" value = "" id = "T"/></td>
  59. </tr>
  60. <tr id = "tr8">
  61. <td align = "right">地址:</td>
  62. <td align = "left"><input type = "text" value = "" id = "a"/></td>
  63. </tr>
  64. <tr id = "tr9">
  65. <td align = "right"><a>*</a>郵箱:</td>
  66. <td align = "left"><input type = "text" value = "" id = "m"/></td>
  67. </tr>
  68. <tr id = "tr10">
  69. <td align = "right">業務往來情況:</td>
  70. <td align = "left"><input type = "textarea" value = "" id = "s"/></td>
  71. </tr>
  72. <tr id = "tr11">
  73. <td align = "right">客戶照片:</td>
  74. <td><input type = "file" value = "瀏覽...." id = "b"/></td>
  75. </tr>
  76. <tr id = "tr12">
  77. <td align = "right">事件提醒:</td>
  78. <td align = "left"><input type = "text" value = "" id = "t"/></td>
  79. </tr>
  80. <tr id = "tr13">
  81. <td align = "right"></td>
  82. <td align = "left"><input type = "submit" value = "提交" id = "sub"/><input type = "reset" value = "重置" id = "r"/></td>
  83. </tr>
  84. </table><br/>
  85. <div>注意:名稱前面有<a>*</a>的為必填項</div>
  86. </form>
  87. </body>
  88. </html>

相關推薦

11.16學習日誌

11.16學習日誌 HTML運用 1、HTML概念 HTML：Hyper Text Mark-up Language超文字標記語言，是一種用於建立網頁的標準標記語言。通過元素標籤的形式建立Web站點，通過瀏覽器進行解析。

11.09學習日誌

11.09學習日誌 HTML基礎知識總結 一、HTML的定義 HTML，超文字標記語言，寫給瀏覽器的語言，目前網路上應用最廣泛的語言。HTML也在不斷的更新，最新版本已經出現了HTML5。在HTML5中出現了許多新特性，也遺棄了一些舊

11.06學習日誌

11.06學習日誌 html及html5的知識點記錄 1、Doctype作用？標準模式與相容模式各有什麼區別 （1）、<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於<html>標籤之前。告知瀏覽器的解析器用什麼文件標準解

11.22學習日誌

11.22學習日誌 盒子模型 認識盒子模型 所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

11.11學習日誌

11.11學習日誌 CSS 1.1 CSS的定義 全名：CascadingStyleSheets->層疊樣式表 定義：CSS成為層疊樣式表，它主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以

11月14日學習日誌

今天學習了基於servlet的網頁點選計數器。 例項： package com.runoob.test; import java.io.IOException;

學習日誌-2021.10.11

學習日誌-2021.10.11 複習一下機器學習書本第四章內容 決策樹 基本演算法 這是一個遞迴的過程，有三種情況會導致遞迴返回：

學習日誌-2021.11.08

學習日誌-2021.11.08 其他Q-Learning SA-Q-learning 為了平衡Q-learning的探索與利用，基於Metropolis準則提出的演算法

SpringBoot學習日誌（三）idea中程式碼的熱部署與常用外掛

程式碼熱部署 法一、使用jrebel外掛 （在marketplace中查詢） 收費，咱就不用了 法二、使用devtools

11.SpringBoot學習(十一)——JDBC之 Spring Boot JdbcTemplate

1.簡介 1.1 概述 This is the central class in the JDBC core package. It simplifies the use of JDBC and helps to avoid common errors. It executes core JDBC workflow, leaving application code to provide

11-機器學習-隨機森林(bagging裝袋法的代表)

總結 隨機森林 (以決策樹為基學習器)： 隨機的體現 資料集的隨機選擇：從原始資料集中採取有放回的抽樣bagging，構造子資料集。不同子資料集的元素可以重複，同一個子資料集中的元素也可以重複

11-機器學習-xgboost極限梯度提升演算法 (boosting提升法)

總結 xgboost（極限梯度提升演算法）：在分類和迴歸上都擁有超高效能的先進評估器

11.MySQL 慢日誌PT分析 視覺化

參考了 https://github.com/hhyo/archery/wiki/sql_optimize#slowquery 一.示意過程 二.官方的兩張表，一張統計表，一張詳情表

《單元測試之道》Java版學習日誌

前言 　　在軟體工程這門課程中，我有幸在老師的推薦下讀了這本書。首先談單元測試的概念，單元測試是開發者編寫的一小段程式碼，用於檢驗被測程式碼的一個很小的、很明確的功能是否正確。通常而言，一個單元測試是用

JAVA學習日誌（執行緒）

1.程序和執行緒 程序：執行一個速度，程式在記憶體分配了執行空間 執行緒：在程序中還執行，多個執行緒之間可以相互的切換。

CV學習日誌：CV開發常用庫及其標頭檔案

CV開發過程中，通常會涉及以下庫： （1）語言/視覺：C、CPP、QT、OpenCV （2）通訊/模擬：ROS2、Gazebo、Webots

CV學習日誌：自動提取ROS2及Webots標頭檔案

ROS2包含許多的開發包，這些開發包覆蓋了機器人開發過程所有可能涉及到的訊息、服務及動作。我們可以直接使用這些訊息/服務/動作進行開發而無需再自定義，從而提高開發效率。然而，也正因為ROS2開發包較多且不同版本

Axure學習日誌之實現中繼器排序

開啟AXURE,好幾天沒更新了，但是還記得是這麼開頭的，當產品經理的夢不能滅。

C++11 模板學習總結

目錄概念函式模板(function template)類模板(class template) 概念 函式模板(function template)

OpenCV-Utils學習日誌：GUI模組要點總結

1.主窗體管理 (1)namedWindow(win, flag=1)=void●destroyWindow(win)=void●destroyAllWindows()=void