2. 程式人生 > >2018/09/27渡課

2018/09/27渡課

阿新 • • 發佈：2018-11-20

目錄

一.關鍵字

關鍵詞 英文 解釋
ul 無序列表
ol 有序列表
div 一個容器
span 寫文字
塊級標籤 Block-level tags 獨佔一行
行級標籤 Row-level label 擠在一行
frame 框架 一個頁面開啟多個網頁
iframe 內聯框架 可以把頁面放在一個頁面裡面
form 表單

二.使用Table標籤和Form表單元素完成一個個人簡歷的網頁編寫

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table cellspacing="0" border="1px">
		<tr>
			<td colspan="7" align="center" style="font-size: 20px;font-weight: bold;background-color: gray;">
				個人性息表填寫
			</td>
		</tr>
		<tr>
			<td rowspan="2">姓名</td>
			<td colspan="2">
				(中)<input type="text" name="中文名">
			</td>
			<td>性別</td>
			<td colspan="2">
				<input type="radio" name="性別" value="男">男
				<input type="radio" name="性別" value="女">女
			</td>
			<td rowspan="4">
				<img src="666.jpg" style="width: 100px;"><br/>
				<input type="file" name="檔案上傳">
			</td>
		</tr>
		<tr>
			<td colspan="2">(英)<input type="text" name="英文名"></td>
			<td>民族</td>
			<td colspan="2">
				<input type="text" name="民族">
			</td>
		</tr>
		<tr>
			<td>政治面貌</td>
			<td colspan="2">
				<select>
					<option value="自由群眾">自由群眾</option>
					<option value="共青團員">共青團員</option>
					<option value="共產黨員">共產黨員</option>
				</select>
			</td>
			<td>身份證號碼</td>
			<td colspan="2">
				<input type="text" name="身份證號碼">
			</td>
		</tr>
		<tr>
			<td>出生日月</td>
			<td colspan="2">
				<input type="text" name="出生年月日">
			</td>
			<td>出生地</td>
			<td colspan="2">
				<input type="text" name="出生地">
			</td>
		</tr>
		<tr>
			<td>婚姻狀況</td>
			<td colspan="2">
				<input type="radio" name="婚姻狀況" value="已婚">已婚
				<input type="radio" name="婚姻狀況" value="未婚">未婚
				<input type="radio" name="婚姻狀況" value="其他">其他
			</td>
			<td>兵役</td>
			<td colspan="3">
				<input type="radio" name="兵役狀況" value="已役">已役
				<input type="radio" name="兵役狀況" value="未役">未役
				<input type="radio" name="兵役狀況" value="免役">免役
				&nbsp;原因:<input type="text" name="免役原因">
			</td>
		</tr>
		<tr>
			<td colspan="7">
				興趣愛好:
				<input type="checkbox" name="游泳">游泳
				<input type="checkbox" name="做飯">做飯
				<input type="checkbox" name="讀書">讀書
				<input type="checkbox" name="打籃球">打籃球
				<input type="checkbox" name="跑步">跑步
				<input type="checkbox" name="做家務">做家務
				<input type="checkbox" name="志願者">志願者
				<input type="checkbox" name="打遊戲">打遊戲
				<input type="checkbox" name="睡覺">睡覺
			</td>
		</tr>
		<tr>
			<td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">
				聯絡資訊
			</td>
		</tr>
		<tr>
			<td colspan="4">
				目前居住通訊地址:
				<input type="text" name="目前居住通訊地址">
			</td>
			<td colspan="3">
				戶籍所在地地址:
				<input type="text" name="戶籍所在地地址">
			</td>
		</tr>
		<tr>
			<td>郵箱</td>
			<td colspan="2">
				<input type="text" name="郵箱">
			</td>
			<td>本人手機號</td>
			<td>
				<input type="text" name="本人手機號">
			</td>
			<td>緊急聯絡人手機號</td>
			<td colspan="2">
				<input type="text" name="緊急聯絡人手機號">
			</td>
		</tr>
		<tr>
			<td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">
				個人介紹	
			</td>
		</tr>
		<tr>
			<td colspan="7">
			<textarea></textarea>
			</td>
		</tr>
	</table>

</body>
</html>

在這裡插入圖片描述

三.使用form完成一篇帶目錄導航的文章編寫

<!DOCTYPE html>
<html>
<head>
	<title>目錄</title>
</head>
<body>
	<h1>0926慕課第二天</h1>
	<ul>
		<li><a href="0926渡課第二天.html#h1" target="daohang">關鍵字</a></li>
		<li><a href="0926渡課第二天.html#h2" target="daohang">使用Table標籤完成一個課程表的編寫</a></li>
		<li><a href="0926渡課第二天.html#h3" target="daohang">回答問題</a></li>
		<li><a href="0926渡課第二天.html#h4" target="daohang">描述A標籤和IMG標籤</a></li>
	</ul>

</body>
</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0926慕課第二天</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>

<body class="stackedit">
  <div class="stackedit__html"><h1><a  name="h1" id="_0"></a>一.關鍵字</h1>

<table>
<thead>
<tr>
<th>關鍵詞</th>
<th>英文</th>
<th>解釋</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEO</td>
<td></td>
<td>搜尋引擎優化</td>
</tr>
<tr>
<td>拓展名</td>
<td>extension</td>
<td>用不同方式開啟檔案</td>
</tr>
<tr>
<td>合併列</td>
<td>colspan</td>
<td>左右單元格合併</td>
</tr>
<tr>
<td>合併行</td>
<td>rowspan</td>
<td>上下單元格合併</td>
</tr>
<tr>
<td>表格</td>
<td>table</td>
<td></td>
</tr>
<tr>
<td>元素</td>
<td>element</td>
<td>標籤</td>
</tr>
<tr>
<td>屬性</td>
<td>property</td>
<td>設定標籤</td>
</tr>
<tr>
<td>樣式</td>
<td>style</td>
<td></td>
</tr>
</tbody>
</table><h1><a name="h2" id="Table_16"></a>二.使用Table標籤完成一個課程表的編寫</h1>
<pre><code>	&lt;table border="1px"&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;一&lt;/td&gt;
				&lt;td&gt;二&lt;/td&gt;
				&lt;td&gt;三&lt;/td&gt;
				&lt;td&gt;四&lt;/td&gt;
				&lt;td&gt;五&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td rowspan="3"&gt;上午&lt;/td&gt;
				&lt;td&gt;1&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;2&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;3&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td rowspan="3"&gt;下午&lt;/td&gt;
				&lt;td&gt;1&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td rowspan="2"&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td rowspan="2"&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;2&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
			&lt;tr&gt;
				&lt;td&gt;3&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
				&lt;td&gt;&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
</code></pre>
<h1><a name="h3" id="_84"></a>三.回答問題</h1>
<h2><a id="a_HTML_86"></a>a. 什麼是HTML的標籤語義化？</h2>
<blockquote>
<p>語義化的HTML就是寫出的HTML程式碼，符合內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化），能夠便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。<br>
　　1.語義化有利於SEO，有利於搜尋引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效資訊，提升網頁的權重。<br>
　　2.在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。<br>
　　3.便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。<br>
　　4.支援多終端裝置的瀏覽器渲染。</p>
</blockquote>
<h2><a id="bSEOHTML_93"></a>b.什麼是SEO優化，在HTML標籤中如何體現？</h2>
<blockquote>
<p><strong>什麼是SEO</strong>？<br>
SEO，簡稱搜尋引擎優化（網站優化）。就是通過對網站優化，迎合搜尋引擎的標準，得出的一個自然的優化。搜尋引擎競價優化，就是付費給搜尋引擎，根據搜尋引擎的關鍵字的競價，得出一個網站優化。網站的關鍵字你出價越高，可能就會排到前面。有些很熱的關鍵字，每次的點選價格高得嚇人。所以根據企業網站的需要，可以選擇SEO,也可以選擇搜尋引擎競價優化。當然我個人還是比較喜歡SEO，覺得SEO對於網站長遠發展也有一定的優勢。</p>
<p><strong>SEO優化之HTML程式碼優化最重要的5個標籤</strong><br>
1.Title 標籤<br>
標籤能夠告訴使用者和搜尋引擎網頁頁面的主題思想是什麼，一直是搜尋引擎的抓取重點。通常，搜尋引擎抓取Title標籤出於兩個目的：作為影響網頁排名的重要因素和作為搜尋結果頁面的顯示資訊。不管是哪一個目的，對我們做SEO來說都非常重要。<br>
一般來說，Title標籤中的單詞最好保持在3~6個左右，最好包含關鍵字。但Title標籤中的單詞不要全部都是關鍵字，因為這樣可能會造成頁面關鍵字堆砌，導致過度優化。所選單詞應簡潔明瞭、具有描述性，要與網頁內容具有很大的相關性，並且每個不同的頁面都應該包含Title標籤。<br>
2.Meta Description標籤<br>
對Title標籤優化之後，接下來就是對Meta Description標籤的優化。Meta<br>
Description標籤可以說是對Title標籤的進一步解釋，可以是一句話或者是包含十幾個單詞的短語。每個頁面都該有其自己的Meta<br>
Description標籤，並且Meta<br>
Description標籤還可包含一些與網站內容相關但Title標籤中未提及的資訊。與Title標籤要求相似，該部分內容也應具有描述性，與網頁內容具有相關性，可包含關鍵字，但不可過多。<br>
3.Heading標籤<br>
Heading標籤包含了H1、H2、H3等等，是搜尋引擎識別頁面資訊的重要標記。合理使用H1、H2、H3等不同級別的標籤能夠使得頁面結構更加清晰，有利於搜尋引擎的抓取。H1、H2、H3等標籤是按照重要程度來排名的。一般一個頁面按照需求程度來適當新增該標籤：從H1開始，依次往下新增。但不可新增太多Heading標籤，否則會適得其反。<br>
4.Strong和B標籤<br>
相信大多數朋友都知道Strong和B標籤都有加粗的意思，但是很多人並不清楚兩者具體有什麼區別。其實B標籤就是單純地將文字加粗，而Strong標籤不僅是對文字加粗，並且這種形式的加粗會告訴搜尋引擎該部分文字比較重要。所以兩者從搜尋引擎優化的角度來看，是有很大的區別的。<br>
上文中所提到的Heading標籤頁具有加粗效果，那麼這三種標籤到底該怎麼用？其實，Heading標籤一般用於文章大標題以及每段的小標題，而Strong標籤一般用於文章段落中的重點詞彙，而B標籤一般只是強調一種視覺效果。<br>
5.ALT標籤<br>
ALT標籤是一種圖片標籤，它將圖片的資訊以文字的形式展現。對ALT標籤的使用沒有太多要求，只要在網頁中出現圖片的部分新增上該屬性即可，但其標籤內容應與相應頁面內容具有相關性，長度不得過長，一般1~5個單詞即可。</p>
</blockquote>
<h2><a id="C_113"></a>C.什麼是瀏覽器的相容問題？</h2>
<blockquote>
<p>瀏覽器相容性問題又被稱為網頁相容性或網站相容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的相容問題。在網站的設計和製作中，做好瀏覽器相容，才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計，瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。</p>
</blockquote>
<h1><a name="h4" id="AIMG_115"></a>四.描述A標籤和IMG標籤</h1>
<h2><a id="HTML_a__116"></a>HTML&lt; a &gt;標籤</h2>
<p>&lt; a &gt; 標籤定義超連結，用於從一張頁面連結到另一張頁面。</p>

<table>
<thead>
<tr>
<th>屬性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>herf</td>
<td>網址</td>
<td>連結的目標</td>
</tr>
<tr>
<td>target</td>
<td>_blank</td>
<td>在新視窗開啟（預設在本頁面）</td>
</tr>
<tr>
<td>title</td>
<td>文字提示</td>
<td>滑鼠停留在a上有文字提示</td>
</tr>
</tbody>
</table><h2><a id="HTML_img__123"></a>HTML&lt; img &gt;標籤</h2>
<p>&lt; img &gt; 標籤定義向網頁中嵌入一幅影象。</p>

<table>
<thead>
<tr>
<th>屬性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>alt</td>
<td>文字</td>
<td>圖片不顯示時替代的文字</td>
</tr>
<tr>
<td>src</td>
<td>路徑或網址</td>
<td>圖片地址</td>
</tr>
<tr>
<td>height</td>
<td>數字px</td>
<td>圖片高度</td>
</tr>
<tr>
<td>widh</td>
<td>數字px</td>
<td>圖片寬度</td>
</tr>
<tr>
<td>title</td>
<td>文字</td>
<td>文字提示</td>
</tr>
</tbody>
</table></div>
</body>

</html>


<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
	<frame src="目錄.html">
	<frame src="0926渡課第二天.html" name="daohang">
</frameset>
</html>

在這裡插入圖片描述

四.題目

a.Table頁面佈局和Div佈局的區別和為什麼要使用Div佈局？

table佈局比較侷限，div 比較開放，設計樣式比較多，效果美觀，table好處是所有瀏覽器都相容div缺點是相容性很麻煩

div佈局的優點是比較方便簡潔，程式碼比較少，製作和維護也比較容易

b.表單標籤中nam屬性和value屬性各代表的含義?

name
①在單選按鈕中，name值相同的單選按鈕被歸為一組，在該組中只有一個按鈕的checked屬性為true。
②總的來說，input的name屬性用於提交一個form表單資料時，對資料的引用：
如用GET方式傳送資料時，你能在URL地址中看到xxx.html?atext=123
③可以用於CSS中設定該類name值的元素的樣式。
④通過js的document.getElementsByTagName(“atext”)和jQ的$(".atext")等可以獲取name屬性值為atext的元素物件。

value
HTML 標籤 定義和用法value 屬性為 input 元素設定值。對於不同的輸入型別，value 屬性的用法也不同。
①type=“button”, “reset”, “submit” - 定義按鈕上的顯示的文字。
② type=“text”, “password”, “hidden” - 定義輸入欄位的初始值。
③ type=“checkbox”, “radio”, “image” - 定義與輸入相關聯的值 。
④註釋： 和 中必須設定 value 屬性。註釋：value 屬性無法與 一同使用。

相關推薦

2018/09/27渡課

目錄 一.關鍵字 二.使用Table標籤和Form表單元素完成一個個人簡歷的網頁編寫 三.使用form完成一篇帶目錄導航的文章編寫 四.題目 a.Table頁面佈局和Div佈局的區別和為什麼要使用Div佈局？ b.表單標籤中na

2018/09/29渡課

目錄 一.使用CSS美化之前HTML構建的個人簡介頁面，包括表格邊框，表格單元格背景，字型，輸入框樣式等，要求在外部CSS檔案中定義樣式，並嘗試如何優化類選擇器的定義。（不能實現的樣式，參考樣式手冊檢視後測試） 二.使用CSS美化之前HTML構建的框架錨點文章頁面

2018/09/28渡課

目錄 一.將紅色標註的重要標籤進行整理，整理要求： a.每個表情按需要說明：用途和作用、標籤的例項程式碼、標籤的重要屬性和屬性意義 b.可以將標籤按照自己的立即進行歸類 二.自學使用HTML5的視訊和音訊標籤，在頁面中插入一段音訊和

2018/09/26渡課

一.關鍵字 關鍵詞 英文 解釋 SEO 搜尋引擎優化 拓展名 extension 用不同方式開啟檔案

2018/09/25渡課第1天

課程關鍵字 關鍵詞 英文*解釋 瀏覽器 browser 解析器 resolver 伺服器 server

2018/11/27渡課

目錄 一、完成自學部分內容，並撰寫一篇關於 Eclipse 使用的部落格，包括常用的 Eclipse 快捷鍵。 二、使用 Eclipse 進行開發，驗證今日課堂上的知識點，完成對應作業。 三、寫至少5個類和物件的示例，撰寫一篇客。 四、繼續預習相關視訊

裝飾器 總結 2018.09.27

記錄 裝飾 ren pre 如何 lease sql UNC username 1. 什麽是裝飾器 器=》工具 裝飾=>指的是為被裝飾對象添加新功能 裝飾器本身可以是任意可調用的對象=》函數 被裝飾器本身也可以是任意可調用的對象

2018-09-27#hive寫資料方式總結

hive 表寫入資料的方式 少量資料 insert into create table dw.dim_area_code ( country_name string comment "國家名稱", country_code string comment "國家程式碼", province_na

2018-09-27

08:34 到公司 08:35-08:38 整理桌面衛生, 3m 08:39-08:42 打水 3m 08:43-09:17 處理我的筆記本無法啟動的問題, 34m 09:18-09:57 檢視死了七次的男人, 39m 09:58-10:08 休息, 10m 10:09-10:49 檢視

2018/11/01渡課

目錄 一、今日課堂總結 二、預習jq效果 三、今日總結 一、今日課堂總結 獲取物件用"$()"。 操作物件用"方法名()"。 鏈式程式設計。(講解程式碼在下面） <!DOCTYPE html>

2018/10/11渡課

目錄 一.將課堂演示的程式碼理解的敲出來，並正確執行。 二.完成程式設計作業： a.要求：完成一個字型樣式設定功能的程式碼編寫,可以改變字型的大小和顏色。 b.提示：定義兩個select框分別表示字型大小和顏色,注意使用option中的va

2018/10/08渡課

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #biaotou {background-image: url(bg.p

2018/12/05渡課（Eclipse Debug使用方法）

目錄 一、完成今日教學部分程式碼的編寫 二、將「南通渡課 IT 教育 1809 班同學在 1 教室上崔老師的 Java 課」這個場景進行業務類的抽象，類中包含屬性和方法 三、寫一篇關於Eclipse的Debug模式相關博文 1、Debug檢視

2018/11/30渡課(綜合測試)

目錄 1.什麼是HTML，請說出對超文字的解釋及HTML語義化的作用是什麼？ 2.請書寫至少3種表單標籤（包括關鍵屬性），3種佈局標籤？ 3.什麼是CSS，一個HTML元素如何賦予其樣式，請說出3種方式，並解釋什麼是層疊？ 4.JavaScript執行

2018/11/29渡課

目錄 一、類和物件 二、資料型別 1. 註釋 2. 識別符號的命名規範 3.基本資料型別 三、變數 一、類和物件 面向過程程式設計：通過一個函式去完成一件事情，而且這件事完成後，不會留下任

2018/11/26渡課

目錄 一、對前面所學的內容（即由 html 到 mysql 所學內容）進行復習，準備星期五測試 二、熟練掌握 B/S 架構及 Java 原理，並且能夠默寫出來 三、用 Java 寫出 Hello World 和乘法口訣表練習 四、繼續預習相關視訊

2018.09.27 網路協議（tarjan）

描述 一些學校連線在一個計算機網路上。學校之間存在軟體支援協議。每個學校都有它應支援的學校名單（學校 a 支援學校 b ，並不表示學校 b 一定支援學校 a ）。當某校獲得一個新軟體時，無論是直接得到還是網路得到，該校都應立即將這個軟體通過網路傳送給它應支援的學

2018-09-27#hive資料檢查的常見方式

hive資料檢查的常見方式 主鍵上的資料是否用重複 select phone_segment,count(1) as cnt from dw.dim_phone_segment_info a group

2018/9/28 渡課學習第四天

重要標籤 標籤 描述 例項 <!--...--> 定義註釋 <!--這是一段註釋。註釋不會在瀏覽器中顯示。--> <!DOCTYPE> 定義文件型別 <!DOCTYPE html> <

mysql查詢練習（2018.09.27學習筆記）

USE testdb; DROP TABLE Student; DROP TABLE Course; DROP TABLE SC; DROP TABLE Teacher; -- 語法： SELECT select_list　　　 FROM table_name