HTML個人筆記

TML標簽：

基本標簽：

<html></html>雙標簽開頭結尾 HTML標簽為最大的標簽稱為根標簽

<head></head> 文檔頭部標簽且必須設置title

<title></title> 頁面標題

<body></body> 文檔的主體包含頁面的內容

<h1>-<h6> HTML提供6個等級的頁面標題有大到小

<p></p> p標簽用于定義段落可以將頁面分為若干個段落根據窗口大小自動換行

<br/>單標簽換行標簽（break打斷）

格式化標簽：

加粗 <strong></strong>or<b></b>

斜線 <em></em>or<i></i>

刪除線 <del></del>or<s></s>

下劃線 <ins></ins>or<u></u>

div和span標簽：

沒有語義屬于一種盒子來裝內容

<div></div> 表示分割分區用來布局一行一個大盒子

<span></span>意為跨度，跨距一行可以哦有多個小盒子

圖像標簽：

<img src="圖像路徑(url)"/> 定義頁面中的圖像

圖像標簽包含多個屬性

src 圖片路徑必須屬性

alt 文本替換文本圖像不能顯示的文字

title 文本鼠標放到圖像上顯示文字

width 像素寬度

height 高度

border 邊框

相對路徑和絕對路徑

相對路徑：以引用文件所在位置為參考基礎，而建立出的目錄路徑

分類：下級路徑/ 上級路徑../

絕對路徑：是指目錄下的絕對位置，如硬盤中的路徑或網路地址

超鏈接標簽：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href用于指定鏈接目標的url地址(必須屬性)

target用于指定鏈接打卡方式 _self為默認值 _blank為在新窗口打開方式

錨點鏈接：可以快速到頁面某個位置

在鏈接文本中的href屬性中，設置屬性值為#名字的形式，如<a href="#two">目標</a>

找到目標位置標簽，里面添加一個id屬性 = 名字，如：<h3 id="two">目標</h3>

注釋：

快捷鍵CTRL + /

特殊字符：

HTML 原代碼	顯示結果	描述
<	<	小于號或顯示標記
>	>	大于號或顯示標記
&	&	可用于顯示其它特殊字符
"	“	引號
?	?	已注冊
?	?	版權
?	?	商標
		半個空白位
		一個空白位
		不斷行的空白

表格標簽：

<table></table> 是用于定義表格的標簽

<tr></tr> 標簽用于定義表格中的行，必須嵌套在<table></table>標簽中

<tb></tb> 用于定義表格的單元格，必須嵌套在<tr></tr>標簽中

<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數據(table data)，即數據單元格的內容

表頭單元格標簽：

<th>標簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現為粗體并且居中。

表格屬性：

align left center right 規定表格相對于周圍元素的對齊方式
border 1or"" 規定表格單元是否擁有邊框默認為"",表示沒有邊框

cellpadding 像素值規定單元邊沿與其內容的空白，默認1像素

cellspacing 像素值規定單元格直接的空白默認2像素

with 像素值or百分比規定表格的寬度

合并單元表格方式：

跨行合并：rowspan="合并單元格的個數"

跨列合并：colspan="合并單元格的個數"

列表標簽：

<ul>標簽表示無序列表里面只能包含li

<ol>有序標簽里面只能包含li

<li>相當于一個容器定義列表項與<ui>or<li>嵌套使用 li里面可以包含任何標簽

<dl>標簽用于定義描述列表(或自定義列表),該標簽會與<dt>(定義項目和名字)和<dd>(描述每一個項目名字)一起使用

表單標簽：

標簽	描述
<form>	定義供用戶輸入的表單
<input>	定義輸入域
<textarea>	定義文本域 (一個多行的輸入控件)
<label>	定義了 <input> 元素的標簽，一般為輸入標題
<fieldset>	定義了一組相關的表單元素，并使用外框包含起來
<legend>	定義了 <fieldset> 元素的標題
<select>	定義了下拉選項列表
<optgroup>	定義選項組
<option>	定義下拉列表中的選項
<button>	定義一個點擊按鈕
<datalist> New	指定一個預先定義的輸入控件選項列表
<keygen> New	定義了表單的密鑰對生成器字段
<output> New	定義一個計算結果

<input>標簽用于收集用戶信息包含一個type屬性可以有多種樣式

<input type="屬性值" />

屬性值：

button	定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。
checkbox	定義復選框。
file	定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden	定義隱藏的輸入字段。
image	定義圖像形式的提交按鈕。
password	定義密碼字段。該字段中的字符被掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit	定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text	定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。

<label>標簽

<label> 標簽為 input 元素定義標注（標記）。 label是標注的意思

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同

詳情可參考

https://www.runoob.com/ 菜鳥教程

https://www.w3school.com.cn/ w3c

于引入 HTML 編寫或 DITA 結構化編寫用戶，對于段落圖片位置編排有各種各樣的需求。本文披露了滿足肩并肩的圖片和段落的CSS PDF 實現方法，供您參考。

設計內容

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">


<concept outputclass="" xml:lang="zh-CN" id="A743F69C-4153622-1481551E11B4917-BFCA51"> 
  <title>登錄系統</title>  
   <conbody outputclass="side-by-side"> 
    
    
    
    
    
    
    <p>段落句子與圖片肩并肩呈現</p> 
    <fig id="fig_bvl_wpl_cwb">
      <image href="967392893.jpg" id="image_eqy_3sl_cwb"/>
    </fig>
    
    
    
    
  </conbody> 
</concept>

樣式設計

定義 custom.css 后寫入下列代碼片段：

 @charset "UTF-8";  
  


/*


CUSTOM CSS for zh-CN    


*/
*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
  display:inline-block;
  width: 45%;
}  


*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
  display:inline-block;
  width: 45%;
}

Oxygen CSS PDF 發布

利用 Oxygen 編輯器，選擇 CSS PDF 發布，結果如下圖所示：

如果頂端對齊，引入代碼片段

*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
vertical-align:top;
}
*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
vertical-align:top;
font-size:0pt;
}

說明：在 ARG.CSS 參數設置頁面，開發者用戶要指向定制化的 custom.css 來實現上述結果。

如果采用我們公司寫管用平臺，系統會默認提供上述功能，此外，還會提供包括下列 PDF 能力：

自動分頁（消除孤行）
表格標題可以自動豎向編排
按照正文的布局需求，如長表格規格，自動引入橫向布局
按照正文的布局需求，如圖紙，自動引入 A3, B3 等布局圖紙
imagemap 熱點跳轉鏈接

東優就業

sublime text 2 和3 都可以快速設置瀏覽器啟動，這里介紹如何不下插件啟動瀏覽器。

第一步：打開Tool-->build system ---> new build system

第二步：將內容代替為：

{

"cmd": ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "$file"],

"selector":["text.html"]

}

紅色標記為：你的瀏覽器安裝路徑，如果你不知道安裝在哪，可以在桌面右鍵瀏覽器，點擊屬性，將目標路徑復制下來。切記格式為\，最后截至為.exe程序

第三步：ctrl+s保存,隨便起個名字

第四步：選擇你新建的名稱，然后去試試ctrl+b運行你的html文件吧

廣東優就業

更多IT精彩內容推薦：http://www.ujiuye.com/guangdong/?wt.mc_id=17009338

在線咨詢

上一篇：HTML5開發教程之HTML5視頻播放demo
下一篇：520情侶浪漫表白JS特效分享（附源碼）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商