簡單的學習html筆記
阿新 • • 發佈：2019-01-06
4/19/2018 8:22:31 AM
HTML
晨測
1. 增加一個使用者的命令是 2. Linux中定義使用者賬戶的檔案為 3. 切換使用者命令為 4. 檔案exer1的訪問許可權為rw-r--r--，現要增加所有使用者的執行許可權和同組使用者的寫許可權 5. 在vi編輯器中執行存檔退出的命令是 6. 改變檔案所有者的命令為 7. 申明一個環境變數的語法格式 8. 編寫一個指令碼，根據使用者輸入的數字n,計算1~n的累加和。（可選題） #!/bin/bash read -p "input your num:" num sum = 0; for(( n=1 ; n<=$num ; n++)) do sum=$[num+n] done echo sum=$sum
回顧
1. vim編輯器的使用
2. linux使用者和組管理
3. jdk,mysql安裝
4. shell程式設計
今日概要
一、HTML概述
二、web相關的概念
三、HTML的常用標籤
一、HTML概述
<1>概念
HTML:Hypertext Markup Language,超文字 標記語言，用來描述網頁的一種語言。
非程式語言，由瀏覽器直接解釋執行。
<2>作用
編寫網頁,顯示網頁資料
<3>特點
此語言編寫的檔案，以html或者htm為字尾。 由一組標籤組成，不區分大小寫。 XML:標籤自定義，儲存資料，傳輸資料 HTML:標籤固定，每一個標籤具有特定的含義，儲存資料，傳輸資料 標籤由開始和結束標籤組成，開始標籤<標籤名> 表示，結束標籤使用</標籤名>表示 標準的HTML檔案的結構： <!DOCTYPE~> //代表HTML的版本，表明當前的HTML檔案使用哪種版本的語法來進行編寫 <HTML> //表示頁面的開始 <HEAD> //放置一些頁面的設定引數 <TITLE>標題標籤</TITLE> </HEAD> <BODY background="" bgcolor=""> //網頁的主體部分，在瀏覽器上直接顯示的內容 </BODY> </HTML>
二、Web相關的概念
URL:統一資源定位符，網際網路上資源的地址。可以通過URL找到網際網路上的某一個具體的資源。
可以標識一張圖片，一部電影，或者一個HTML頁面
HTTP協議:超文字傳輸協議，伺服器端和客戶端請求和應答的標準。
B/S結構：瀏覽器和伺服器模式
統一了客戶端，將功能的實現全部交給伺服器去實現，簡化了開發，維護的成本。
瀏覽器：解析和顯示HTML檔案的軟體。
HTML檔案解析（SAX,DOM）
HTTP請求資料包和響應資料包的封裝和解析
三、HTML常用標籤
1.標籤和屬性
標籤由開始和結束標籤組成，開始標籤<標籤名> 表示，結束標籤使用</標籤名>表示 元素指的是包含標籤在內整體，除去標籤的部分叫做內容。 標籤允許巢狀 屬性在開始標籤中指定，表示標籤的性質和特徵，通常表示為：屬性名=“屬性值” ，多個屬性使用空格隔開
2.顏色的指定方式
方式一：使用顏色的名稱
方式二：使用十六進位制指定，在#後面把RGB三原色的各個數值使用十六進位制表示出來。
使用六位：#ffff00 ,黃色
使用三位：#ff0 ，黃色
3.資源指定方式
在HTML中，使用URL來訪問，指定資源
絕對路徑：以http://資源路徑，或者c://資源的路徑
相對路徑：以當前位置為標準，指定資源路徑
./ 當前位置
../上一級目錄位置
../../上一級的上一級目錄位置
4. 標籤
<meta 屬性 =“屬性值” ...>
設定整個頁面的屬性
此標籤在<head>標籤內部使用
例如：
<meta charset="字元編碼" /> 表示該HTML檔案使用的字元編碼
<meta name="keywords" content="五一小長假，春遊小長假" />
<meta name="autor" content="作者姓名"/>
<meta http-equiv="refresh" content="秒數；url= "/> 頁面倒轉功能
content="秒數"
url="跳轉的頁面"
例如：<meta http-equiv="refresh" content="5;url=demo2.html"/>
5.標籤
<body text="red" bgcolor="green" background="./htmlsrc/k11.jpg">
<!-- 給body指定字型顏色 -->
<!-- 給body指定背景顏色 -->
<!-- 給body指定背景圖片 -->
6. 文字類標籤
區域標籤：
<fieldset>
<legend>描述資訊</legend>
內容
</fieldset>
標題標籤：<h1> ...<h6>
<h1>定義最大標題
<h6>定義最小標題
段落標籤：<p>段落</p>
保留資料來源格式的標籤：
<pre></pre>
設定文字格式：
<s></s> ,<del></del> 刪除線
<b></b> 加粗
<sup></sup> 上標
<sub></sub> 下標
<u></u> 下劃線
<i></i> 斜體
<br> 回車換行
<font 屬性>文字</font> 文字標籤，face="字型" size="字號" color="顏色"
<big></big>
<small></small>
特殊符號：
空格
< <
> >
" "
... ...
設定對齊方式：
屬性的方式align = "對齊方式"
設定居中的標籤：<center>資料</center> ，居中顯示資料
超連結標籤：<a href="">名稱</a>
hreft屬性：指定連結的url，位置
跳轉到特定的位置：
<a name="位置標識" >
<a href="#位置名稱" > 跳轉到頭部</a>
跳轉到其他頁面：
<a href="url位置" ></a>
絕對路徑：http://www.baidu.com:80/ -----百度伺服器----預設的專案------index.html
相對路徑：./demo1.html
圖片標籤：<img/> 顯示圖片
屬性：src="url位置"
width="寬度"
height="高度"
alt="替代檔案"
border="邊框"
align="對齊方式"
<img src="" alt="載入失敗" width="300" height="500"/>
列表標籤：<ol> <ul> <li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7.結構類
表格標籤：<table > <tr> <td>
<table border="邊框"></table> :整個表格
<tr></tr> :單獨一行
<th></th> :單獨一行，標題使用
<td>資料</td> :一列
屬性：border,設定表格的邊框
background,設定背景圖片
bgcolor，設定背景顏色
cellspacing,設定單元格之間的距離
cellpadding,設定單元格內部的資料和邊框的距離
rowspan，垂直方向合併單元格
colspan，水平方向合併單元格
align ,行的對齊方式
valign,列的對齊方式
<thead></thead>:表頭部分
<tbody></tdody>：主體部分，可以有多個
<tfoot></foot>：標底部分
分割槽標籤：<div> <span> 分割槽
區塊標籤:<div></div>
<h1> <p> <table> <tr>
內聯標籤：<span>
<a> <img> <td>
8.框架類
<frameset rows="" cols="">
<frame src="left.html"></frame>
<frame name="right"></frame>
</frameset>
9.表單類（將表單中的資料傳送給伺服器的）
<form action="伺服器的url" method="傳輸的方式"> 資料</form>
URL:用來接收和處理表單資料的元件，Servlet
method:get、post
製作不同功能的按鈕：<input type="按鈕的型別" value="按鈕上顯示的名稱" name="名字">
<input type="button" value="按鈕上顯示的名稱" name="名字"> 一個普通按鈕
<input type="submit" value="按鈕上顯示的名稱" name="名字"> 一個提交按鈕
<input type="reset" value="按鈕上顯示的名稱" name="名字"> 一個重置按鈕
<input type="image" value="按鈕上顯示的名稱" name="名字" url=""> 一個圖片按鈕
製作文字框：
<input type="text" value="輸入框中預設的資料" size="寬度" maxlength="字元的最大輸入數量" name="標識輸入框">
<input type="password" value="輸入框中預設的資料" size="寬度" maxlength="字元的最大輸入數量" name="標識輸入框">
<textarea name="標識輸入框" rows="行數" cols="列數" >
製作單選和多選按鈕：
男 <input type="radio" name="標識" value="男">
<input type="checkbox" value="男" name="標識">
製作選單：
<select name="標識">
<option>內容1</option>
<option>內容2</option>
<option selected>內容3</option>
</select>
作業：
編寫個人簡歷頁面
編寫簡易商城首頁（table）
編寫後臺頁面（frameset）
編寫註冊頁面