A. 在學習web想知道如何看懂網頁源代碼，有什麼好的方法嗎，或者有網頁源代碼旁邊有詳細備注的，這樣上手
第一種：打開一個網頁後點擊滑鼠的 右鍵就會有"查看源文件"，操作 滑鼠右鍵--->查看源文件 即可彈出一個記事本，而記事本內容就是此網頁的html代碼。
可能會碰到一些網頁滑鼠右鍵無反應或提出提示框，那是因為做網頁的加入了JS代碼來禁止用戶查看源文件代碼或復制網頁內容，但是這種方法也沒用,只有你稍微懂得以下第二種方法即可查看此網頁的源代碼源文件。
第二種：通過瀏覽器狀態欄或工具欄中的點擊 「查看」然後就用一項「查看源代碼」，點擊查看源代碼即可查看此網頁的源代碼源文件。
在微軟IE下 查看--->源文件 即可查看此網頁代碼在傲遊瀏覽器下截圖：
查看別人網頁的源代碼可以為我們製作網頁時候有幫助，以後將介紹查看源代碼更多方法及怎麼運用到別人的源代碼文件。
B. html製作個人簡歷網頁代碼
以下是我用html的相關知識製作的個人簡歷網頁，話不多說先看看最終效果：
如上所示項目一共分為5個部分，分別對應導航欄的5個內容。其中項目技能用的是echarts里的柱狀圖，作品展示用的是bootstrap里的輪播圖，除此之外就是html的基礎內容。下面我們展示一下項目的代碼部分：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>我的個人簡歷</title>
<link rel="stylesheet" href="lib/css/color.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body >
<div class="jumbotron text-center" style="margin-bottom:0" id="grad1">
<img src="lib/pic/1.jpg" width="80px" height="80px" />
<h3>黃智奇</h3>
<p style="font-size: 15px;">2018年升入陝西國防工業職業技術學院，<br/>學習軟體編程，對編程有濃厚的興趣，
在老師的指導，<br/>和自己的課下練習，漸漸對編程有了更深入的了解。<br/>在課余時間，
我喜歡唱歌、跑步和打乒乓球。<br/>喜好結交志同道合的朋友，一起分享學習的生活的經驗。<br/>
有良好的團隊意識，學習時認真負責。 </p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">專業技能</a>-->
</div>
<div id="relation">
<table class="table table-striped">
<tbody>
<tr align="center">
<td><a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
</button></a></td>
<td> <a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-earphone"></span>
</button></a></td>
<td><a href="https://me.csdn.net/qq_44892582" target="_blank"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-user"></span>
</button></a></td>
</tr>
</tbody>
</table>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-justified">
<li><a href="#main">專業技能</a></li>
<li><a href="#project">項目經驗</a></li>
<li><a href="#myCarousel">作品展示</a></li>
<li><a href="#ecation">教育經歷</a></li>
<li><a href="#relation">聯系方式</a></li>
</ul>
</div>
</div>
</nav>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width:
50%;height:400px;left: 25%;"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '專業技能平均分'
},
tooltip: {},
legend: {
data:['分數'],
},
xAxis: {
data: ["Java語言","mysql資料庫","Javascript語言","web開發","ssm框架","springboot框架"],axisLabel: {
// inside: true, 隱藏x軸內容
// 改變x軸字體顏色
// textStyle: {
// color: '#8B4500'
// }
},
},
yAxis: {},
series: [{
name: '分數',
type: 'bar',
//改變圖表顏色
color:['#8EE5EE'],
data: [85, 95, 82, 90, 80, 80]
}],
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
<ul class="list-unstyled" align="center">
<li>Java基礎:<br/>
我入門時首先學的就是Java基礎，然後再到Java高級開發，<br/>
在學習過程中老師細致的教學為我們打下了牢固的java基礎。 </li>
<li>mysql資料庫:<br/>
mysql資料庫是我們大一第二學期開的課，配合Java高級開發一起學習的科目，<br/>
因為自己本身就喜歡資料庫的一些東西，所有mysql資料庫也有良好的基礎。</li>
<li>Javascript語言：<br/>
在學JavaScript之前我有良好的html5和css基礎，所學習JavaScript時也是十分順利的掌握了課本里的內容。</li>
<li>web開發:<br/>
web開發是我最喜愛的科目之一，servlet的學習給我啟發深刻。</li>
<li>ssm框架:<br/>
ssm框架相比springboot而言是比較繁瑣的，但是在學習和理解起來卻比springboot更容易讓人掌握。</li>
<li>springboot框架:<br/>
springboot框架入門起來十分迅速，在基礎的使用起來也是十分方便，但查看源碼時，沒有ssm容易讓人理解。</li>
</ul>
<div class="container" align="center">
<div class="row">
<div class="col-sm-4">
<h3 class="text-info" id="project">項目名稱</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#car">新能源汽車項目</a></li>
<li><a href="#city">咕泡商城項目</a></li>
<li><a href="#bug">爬蟲項目</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
<div class="col-sm-8" align="left">
<h3 class="text-info">項目內容</h3>
<h2 id="car">新能源汽車</h2>
<h5>企業saas工坊</h5>
<p>新能源汽車項目是我們掌握smm框架知識後第一個實戰項目，該項目由工坊老師指導下，前後端都由我們個人獨立完成的項目。
該項目用到了，html5+css3，mysql資料庫，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert
等技術。項目從開始到完成我們用了2個月的時間。該項目的主要是寫一個汽車app社交平台，包括用戶登錄注冊，用戶上傳車輛信息，統計用戶車輛，分析故障車輛原因，
以及導航、朋友圈等功能一體的汽車平台。該項目用戶的使用方法如下： <p>1.新用戶進行登錄注冊。</p>
<p>2.登錄成功後新用戶可以進行修改密碼、昵稱、頭像等個人信息。</p>
<p>3.新用戶上傳自己車輛信息，並綁定賬號。</p>
<p>4.新用戶可以上傳自己車輛故障，系統自動查詢車輛故障原因以及維修方案。</p>
<p>5.用戶可以添加車友，在車友圈發布求助信息等。</p>
<p>6.用戶還可以進行地圖導航，以及查詢公交車，計程車，飛機等交通工具的時間和行程。</p>
<p> 通過完成這個項目，讓我獲得了很大的進步。不論是前端知識還是後端知識，在該項目上
都得到了充分的展示。讓我也一下子吸收了很多的知識與技能，為後面的項目打下了堅實的基礎。</p>
</p>
<br>
<h2 id="city">咕泡商城</h2>
<h5>企業saas工坊</h5>
<p>咕泡商城項目是我們學完springboot之後的實戰項目，該項目由工坊老師指導下，前後端都由我們個人獨立完成的項目。
該項目用到了，html5+css3,mysql資料庫,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技術。
項目從開始到完成我們用了10天的時間。該項目主要是寫一個網上商城電商購物平台，包括用戶登錄注冊，用戶綁定信息，上傳頭像、昵稱等個人信息，
用戶主要可以在該平台上面購買各種商品，每種商品都做好了分類管理，用戶點擊分類名稱或者准確搜索都能顯示出自己想要的商品。用戶點擊商品就可以
鏈接到商品詳情頁面，不論是購物還是瀏覽商品都非常的方便。該項目用戶的使用方法： <p>1.新用戶進行登錄注冊。</p>
<p>2.登錄成功後新用戶可以進行修改密碼、昵稱、頭像等個人信息。</p>
<p> 3.用戶自由購買和瀏覽商品信息。</p>
該項目讓我們體驗了springboot的配置強大之處，沒有繁瑣的多餘配置文件，所有配置都由一個配置文件解決，簡化了我們smm框架配置的痛苦。 </p>
<br>
<h2 id="bug">爬蟲</h2>
<h5>企業saas工坊</h5>
<p>爬蟲項目是我們最近才做完的項目。該項目與以往項目不同，該項目是由工坊老師指導下，我們首次前後端分離合作的項目。一個團體3個人，分別做前端展示數據，後端爬取數據和數據清洗。
我在這個項目中做的是後端爬取數據。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技術。該項目主要是爬去51job網站上面的工作崗位，
我們主要爬取了與我們軟體相關的工作崗位，共爬取了2萬條數據處理並展示。該項目執行步驟如下： <p>1.後端爬取數據並存到資料庫。</p>
<p>2.中間清洗數據，將數據改變為前端人員需要的格式。</p>
<p>3.前端人員根據需求展示數據。</p>
該項目讓我們體會到了團隊合作和團隊分工明確的重要性，每個人做好屬於自己的一份任務，環環相扣才能保質保量的完成項目。 </p>
</div></div>
</div>
<div id="myCarousel" class="carousel slide" style="border: solid; border-color: cornflowerblue;">
<!-- 輪播（Carousel）指標 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 輪播（Carousel）項目 -->
<div class="carousel-inner" align="center" >
<div class="item active">
<img src="C:Users1Desktopgpsc.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="First slide">
</div>
<div class="item">
<img src="C:Users1Desktoppc1.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:Users1Desktopxny.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:Users1Desktoppc2.png" style="width: 80%;height: 800px; border: solid 5px; border-color: darkgray;" alt="Third slide">
</div>
</div>
<!-- 輪播（Carousel）導航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>
<div style="width: 100%; height: 220px; " >
<table class="table">
<caption style="text-align: center;"><h3 id="ecation" style="color: black;">教育經歷</h3></caption>
<tbody style="text-align: center;">
<tr>
<td>2006.9.-2012.7</td>
<td>就讀於xx小學</td>
</tr>
<tr>
<td>2012.9-2015.7 </td>
<td> 就讀於xx初中</td>
</tr>
<tr>
<td>2015.9-2018.7 </td>
<td> 就讀於xx高級中學</td>
</tr>
<tr>
<td>2018.9-至今 </td>
<td> 就讀於陝西國防工業職業技術學院</td>
</tr>
</tbody></table></div>
<div class="jumbotron text-center" style="margin-bottom:0" >
<p id="email" align="left">
郵箱:[email protected]
電話號碼：11111111111
個人博客:https://me.csdn.net/qq_44892582</p>
</div>
</body></html>
C. 急求！！！網頁設計 HTML代碼大全
HTML標記_HTML大全_HTML標記大全_超文本標記語言
網頁（WebPage）文件主要是用超文本標記語言（HyperText Markup Language，簡稱HTML）語句來寫成。您可以通過IE瀏覽器的「查看」菜單中的「源文件」看到該頁的HTML代碼。HTML語言由一系列元素(element)組成，用於組織文件的內容和指導文件的輸出格式。元素名稱不分大小寫。一個元素可以有多個屬性，屬性及其屬性值不分大小寫。屬性名＝屬性值合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。元素又由標記(tag)的構成，大多數標記是成對出現的，分起始標記< >(start tag)和結尾標記</ >(end tag)，以便和頁面的內容區分開來。其寫成的文件是標準的ASCII文件，不同於一般的編程語言，故稱為腳本（Script）更准確一點。其實也很簡單，特別是在專門的HTML編輯器的幫助下，您可以迅速地學會HTML，並能很快寫出有自己特色的Homepage來。
需要說明的是：各種瀏覽器對html元素及其屬性的解釋不完全一樣，如NC與IE是有區別的。
標 簽 內 容 備 注
基 本 標 簽 所有HTML文件都有的
<html>……</html> 表示文件類型為HTML文檔
<head>……</head> 設置文檔描述及其他不在WEB網頁上顯示的信息
<body>……</body> HTML文檔的主體（頁面的實際內容）
標 題 標 簽
<title>……</title> 在標題欄中顯示的題目（放在<head></head>內）
擴 展 屬 性 標 簽
<base>
基址標簽，為解決相對編址作參考值
<META>
將HTTP命令發給CONTENT=number;url允許，描述不包含在標准HTML里的文檔信息。使用詳解
<link>
提供將現行文檔與其它文檔或實體關聯起來的信息
<ISINDEX> 指明在伺服器上提供文檔的可以檢索的索引
<style>……</style> 允許包含樣式表（CSS）信息
頁 面 屬 性 標 簽 <body>……</body>標簽的擴展屬性。使用詳解
<body bgcolor=#……> 設置背景顏色，用名字或十六進制值
<body text=#……> 設置文本文字顏色，用名字或十六進制值
<body link=#……> 設置鏈接顏色，用名字或十六進制值
<body vlink=#……> 設置已使用的鏈接的顏色，用名字或十六進制值
<body alink=#……> 設置正在被擊中鏈接的顏色，用名字或十六進制值
文 本 標 簽
<pre>……</pre> 創建預格式化文本
<h1>……</h1> 創建最大的標題
<h6>……</h6> 創建最小的標題
<b>……</b> 創建黑體字
<i>……</i> 創建斜體字
<tt>……</tt> 創建打字機風格的字體
<cite>……</cite> 創建一個引用，通常是斜體
<em>……</em> 加重（通常是斜體加黑體）
<strong>……</strong> 強調（通常是斜體加黑體）
<font size=value></font> 設置字體大小，從1到7
<font color=……></font> 設置字體的顏色，使用名字或十六進制值
鏈 接
<a href="/URL"></a> 創建一個超鏈接
<a href="mailto:EMAIL"> </a> 創建一個自動發送電子郵件的鏈接
<a name="NAME"></a> 創建一個位於文檔內部的靶位
<a href="#NAME"></a> 創建一個指向位於文檔內部靶位的鏈接
格 式 排 版
<p> 創建一個新的段落
<p align=……> 將段落按左、中、右對齊
<br> 插入一個回車換行符
<blockquote>……</blockquote> 從兩邊縮進文本
<dl>……</dl> 創建一個定義列表
<dt> 放在每個定義術語詞之前
<dd> 放在每個定義之前
<ol>……</ol> 創建一個標有數字的列表
<li> 放在每個數字列表項之前，並加上一個數字
<ul>……</ul> 創建一個標有圓點的列表
<li> 放在每個圓點列表項之前，並加上一個圓點
<div align=……> 一個用來排版大塊HTML段落的標簽，也用於格式化表
圖 形 元 素
<img src="/name"> 添加一個圖像
<img src="/name" align=value> 排列對齊一個圖像：左中右或上中下
<img src="/name" border=value> 設置圍繞一個圖像的邊框的大小
<hr> 加入一條水平線
<hr size=value> 設置水平線的大小（高度）
<hr width=value> 設置水平線的寬度（百分比或絕對像素點）
<hr noshade> 創建一個沒有陰影的水平線
表 格
<table>……</table> 創建一個表格
<tr>……</tr> 開始表格中的每一行
<td>……</td> 開始一行中的每一個格子
<th>……</th> 設置表格頭：一個通常使用黑體居中文字的格子
表 格 屬 性
<table border=value> 設置圍繞表格的邊框的寬度
<table cellspacing=value> 設置表格格子之間空間的大小
<table cellpadding=value> 設置表格格子邊框與其內部內容之間空間的大小
<table width=value 或 %> 設置表格的寬度－用絕對像素值或文檔總寬度的百分比
<tr align=……> 設置表格格子的水平對齊（左中右）
<tr valign=……> 設置表格格子的垂直對齊（上中下）
<td colspan=value> 設置一個表格格子應跨占的列數（預設為1）
<td rowspan=value> 設置一個表格格子應跨占的行數（預設為1）
<td nowrap> 禁止表格格子內的內容自動斷行回卷
窗 框
<frameset>……</frameset> 放在一個窗框文檔的<body>標簽之前，也可以嵌在其他窗框文檔中
<frameset rows="value,value"> 定義一個窗框內的行數，可以使用絕對像素值或高度的百分比
<frameset cols="value,value"> 定義一個窗框內的列數，可以使用絕對像素值或寬度的百分比
<frame> 定義一個窗框內的單一窗或窗區域
<noframes>……</noframes> 定義在不支持窗框的瀏覽器中顯示什麼提示
窗 框 屬 性
<frame src="/URL"> 規定窗框內顯示什麼HTML文檔
<frame name="name"> 命名窗框或區域以便別的窗框可以指向它
<frame marginwidth=value> 定義窗框左右邊緣的空白大小，必須大於等於1
<frame marginheight=value> 定義窗框上下邊緣的空白大小，必須大於等於1
<frame scrolling=value> 設置窗框是否有滾動欄，其值可以是"yes","no","auto"，預設時一般為"auto"
<frame noresize> 禁止用戶調整一個窗框的大小
表 單 對於功能性的表單，一般需要運行一個CGI小程序，HTML僅僅是產生表單的表面樣子。
<form>……</form> 創建所有表單
<select multiple name="NAME" size=value>………</select> 創建一個滾動菜單，size設置在需要滾動前可以看到的表單項數目
<option> 設置每個表單項的內容
<select name="NAME">……</select> 創建一個下拉菜單
<textarea name="NAME" cols=value rows=value>……</textarea> 創建一個文本框區域，列的數目設置寬度，行的數目設置高度
<input type="checkbox" name="NAME"> 創建一個復選框，文字在標簽後面
<input type="radio" name="NAME" value="x"> 創建一個單選框，文字在標簽後面
<input type=text name="……" size=value> 創建一個單行文本輸入區域，size設置以字元計的寬度
<input type="submit" value="NAME"> 創建一個submit（提交）按鈕
<input type="image" border=0 name="NAME" src="/name.gif"> 創建一個使用圖象的submit（提交）按鈕
<input type="reset"> 創建一個reset（重置）按鈕
附 加 屬 性
<PRE>……</PRE> 預置格式風格標簽用來顯示字體寬度固定的文本塊，主要用來在表格格式中顯示文本
<TT>……</TT> 打字機風格用來顯示打字機字體寬度固定的文本
<SAMP>……</SAMP> 示例風格以單倍距顯示文本
<ADDRESS>……</ADDRESS> 地址風格一般用於文檔的開始或結尾處，並以斜體格式顯示文本。
<DL>……</DL> 定義列表風格用來顯示術語及其定義
顏色
#=rrggbb 16 進制 RGB 數值，或者是下列預定義色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy, Gray,Lime,Yellow,white,Silver,Fuchsia,Purple,Green,Aqua[返回本頁首部]
META標簽
描述不包含在標准HTML里的文檔信息。
<META NAME="keywords" CONTENT="yourkeyword">
<META NAME="description" CONTENT="your homepage's description">
本頁的關鍵字和描述。在頁面里加上這些定義後，一些搜索引擎就能夠讓讀者根據這些關鍵字搜索到您的主頁，了解你的主頁內容。
<META HTTP-EQUIV="refresh" CONTENT="30, URL=new.htm">
瀏覽器將在30秒後，自動轉到new.htm。您可用它製作一個封面，在若干時間後，自動帶讀者來到您的目錄頁。如果URL項沒有，瀏覽器就是刷新本頁。這就是WWW聊天室定期刷新的實現原理。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
描述本頁使用的語言。瀏覽器根據此項，就可以選擇正確的語言編碼，而不需要讀者自己在瀏覽器里選擇。GB2312是指簡體中文，而台灣BIG5內碼的主頁則是用BIG5。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
強制性調用網上的最新版本。瀏覽器為節約時間，在本地硬碟上保存一個臨時文件。在重新調用時，便直接顯示那個臨時文件。如果您想讓讀者每次都看到最新的版本，可加上句。[返回本頁首部]
LINK
顯示本文檔和其他文檔之間的連接關系。一個最有用的應用就是外部層疊樣式表的定位。格式如下：
<LINK REL="stylesheet" href="/style.css">REL參數說明兩個文檔之間的關系，HREF說明目標文檔名。關於層疊樣式表，將在後面的課程中詳述。[返回本頁首部]
BASE
本文檔的原始地址。語法：<BASE HREF="原始地址">當讀者下載您的文檔後，由此可以知道是從哪裡下載的。[返回本頁首部]
BODY
BODY標記有一些屬性，用於定義頁面內的顯示效果。 ALINK、LINK、TEXT、VLINK—— 文字的顏色。
ALINK：當前激活的連接的文字顏色。
LINK：連接的文字顏色。
TEXT：文字的顏色。
VLINK：參觀過的文字顏色。
注意：文字的顏色要和背景色有明顯的差別，以便讀者瀏覽。
BACKGROUND、BGPROPERTIES、BGCOLOR——頁面的背景部分。
BACKGROUND：背景圖案，該圖案在頁面內平鋪。背景圖案應保持單一色調，以保證頁面文字易於閱讀。
BGPROPERTIES：設置成FIXED，則背景圖案不滾動。（只對INTERNET EXPLORER有效）
BGCOLOR：背景色。
注意：如果你的背景圖案是深色調，因之文字顏色為淡顏色，那麼由於瀏覽器調用頁面的順序是「背景色-文字-背景圖案」，那麼在背景圖案沒有顯示的情況下，你的文字在白顏色下很難閱讀，所以應該選用一個跟你的背景圖案顏色一致的背景色。
LEFTMARGIN、TOPMARGIN——頁邊空白。（只對INTERNET EXPLORER有效）
LEFTMARGIN：左邊頁邊空白。
TOPMARGIN：頂端頁邊空白。