HTML語言基礎應用

時間 2020-08-04

標籤 html 語言基礎應用欄目 HTML 简体版

原文原文鏈接

Html文檔能夠包含的內容：javascript

文本：html

HTML對文本的支持是最豐富的，你能夠設置不一樣級別的標題，分段和換行，能夠指定文本的語義和外觀，能夠說明文本是引用自其它的地方，等等等等。java

連接瀏覽器

連接用來指出內容與另外一個頁面或當前頁面某個地方有關。框架

圖片ide

圖片用於使頁面更加美觀，或提供更多的信息。佈局

列表字體

列表用於說明一系列條目是彼此相關的。url

表格spa

表格是按行與列將數據組織在一塊兒的形式。也有很多人使用表格進行頁面佈局。

表單

表單一般由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有交互性。

框架

框架使頁面裏能包含其它的頁面。

Html語言有幾個部分組成：

<html></html>標籤，其包含兩個部分<head></head>和<body></body>。

<head></head>用於包含整個文檔的信息，如<title></title>標籤表示爲瀏覽器標籤內容。

<body></body>是html語言的主要構成部分，連包含了衆多內容。

<a href=「」></a>在body內提供跳轉的頁面地址，a表示超連接能夠包含文本，也能夠包含圖片，href屬性指定連接到地址。

因爲html的標籤均用尖括號，若是要在文本中使用尖括號，須要轉義，html提供的轉義用&lt表示<,&gt表示大於。而「&」用&amp表示。

<div></div>分類，一般用div定義頁面的各個模塊、位置。

font定義字體的尺寸、類型、顏色。

<font size="6" color="red" face="微軟雅黑">字體</font>

還有一些字體效果如：<b>加粗</b>，<u>下劃線</u>， <i>斜線</i>

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>用於表示一級標題、二級標題、三級標題...

<hr>用於在頁面添加橫線，能夠指定橫線的寬度和顏色

<hr width="100%" color="red" />

<img>標籤用於添加圖片，src屬性指定圖片的地址，其中src指定的路徑在window下爲相對路徑，格式爲.\path\to\p_w_picpaths。若是src未指定圖片位置，一般頁面會顯示alt屬性定義的文本。<img src='.\工做文件\CCS功能.PNG' alt="tupian"></img>

<a href=>
   <img src=".\工做文件\CCS功能.PNG" alt="html30分鐘簡易教程">
</a>

<table><\table> HTML文檔在瀏覽器裏一般是從左到右，從上到下地顯示的，到了窗口右邊就自動換行。爲了實現分欄的效果，不少人使用表格（<table>）進行頁面排版（雖然HTML裏提供表格的本意不是爲了排版）。

<tr>表明表格裏的一行。<tr>標籤又會包含<td>標籤，每一個<td>表明一個單元格。

<tr>標籤還能夠被<table>裏的<thead>或<tbody>或<tfoot>包含。它們分別表明表頭，表正文，表腳。在打印網頁的時候，若是表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現。

<th>和<td>很是類似，也用在<tr>裏邊，不一樣的是<th>表明這個單元格是它所在的行或列的標題。

  <table>
  <thead>
   <tr>
    <th>時間</th><th>地點</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>2000</td><td>悉尼</td>
   </tr>
   <tr>
    <td>2004</td><td>雅典</td>
   </tr>
   <tr>
    <td>2000</td><td>北京</td>
   </tr>
   </tbody>
  </table> 
 </body>
</html>

表格用於表示二維數據（行，列），一維數據則用列表表示。列表能夠分爲無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標籤包含列表項目。

<ul>
  <li>章節1</li>
  <li>章節2</li>
  <li>章節3</li>
</ul>
<ol>
  <li>打開冰箱門</li>
  <li>把大象趕進去</li>
  <li>關上冰箱門</li>
</ol>

html透明效果

方法1
background-color：rgba（0,152,50,0.7）70%不透明
background-color:transparent;徹底透明
方法2
background:url(path/my_png_bg.png) no-repeat center center scroll;
方法3
background:url(path/my_bg.jpg) no-repeat center center scroll; opacity:0.7;
IE6-IE8的方式
background-color:rgb(0,152,50);
scroll;opacity:0.7;
filter:alpha(opacity=70);

注意：opacity或者alpha的值強調的是「不」透明度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。