整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
豎屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
頁開發設計是在面試創新實驗室時面試官給的二面試題，讓自己設計實現一個簡單的網頁。所以我決定來做一個邀請函網頁，并將開發過程寫在博客上供有需要的朋友們查看。
網頁開發工具有很多，我使用的是對新手較為友好的Dreamweaver，其優點在于簡便、直觀、功能豐富，簡稱為“傻瓜化”。下載請點擊這里。
1.1 創建首個HTML5頁面
在準備好的開發工具中，首先輸入第一行HTML代碼，如下：
<!doctype html>
接下來，我們需要為頁面構建最基本的結構框架。首先要建立最外側的圍“圍墻”，來囊括整個頁面，這需要使用到< html >標簽，后續所有頁面內容都卸載這對標簽之內。而圍墻之內又分為“頭”和“身體”兩部分，分別用< head >和< body >標簽來指定。
<html> <head> </head> <body> </body> </html>
< head >類似“身份證”，里面需要兩項基本信息，一項是“名字”和“語言”。
正如每個人都有一個名字，< head >中唯一必須的元素就是< title >，即頁面的標題。此外，還需要標注“語言”來使瀏覽器正確解讀我們的頁面而不會出現亂碼
<head> <meta charset="UTF-8"> <title>HTML5學習邀請函</title> </head>
< body >標簽中則包含了所有要呈現給瀏覽者的內容信息。
<head> Let's Learn HTML5 </head>
.
1.2 增加必要的頁面元素
為了對頁面內容加以充實，我們使用標題標簽。在HTML的各種標簽中，標題標簽有六個，按從大到小的層次結構為< h1 >到< h6 >。在這里我們就用< h1 >。
<body> <h1>Let's Learn HTML5</h1> </body>
接著要添加說明文字。說明文字放在段落標簽< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> </body>
最后是添加按鈕。按鈕的實質是文本鏈接，單擊后跳轉到某個URL。鏈接的標簽為< a >，跳轉的URL可以用該標簽的href屬性來指定，單擊跳轉到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </body>
1.3 頁面中看不見的代碼
頁面中加入區塊，可以將各種標簽放入不同的內容區域中，可以是頁面結構變得井井有條，便于后續的頁面美化。而此次使用的就是通用區塊< div >。修改代碼如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </div> </body>
此外，區塊還可以進行命名，我們以便直接對應到這個區塊。添加一個id屬性，命名為container：
<div id="container"> <h1>Let's Learn HTML5</h1> <p>發揮您的美感和想象力，探索Web開發的無限可能性，先誠邀您一同踏上HTML5的學習之路。</p> <a href="invite.php">邀您參加</a> </div>
2.1 添加頁面背景
背景圖片要放置在和 index.html相同的路徑下。css樣式代碼可以指定各種頁面元素的呈現形式，但是在創建css樣式代碼之前，還需要在頭部創建style元素來作為樣式的容器。
<head> <meta charset="utf-8"> <title>HTML5學習邀請函</title> <style type="text/css"></style> </head>
添加背景需要創建background樣式：
<style type="text/css">
body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)}
</style>
這是網頁的預覽圖，有沒有發現什么問題？網頁背景圖片沒有和網頁的大小相匹配，出現了兩張或好多張圖片一起填充網頁背景的情況。這是因為圖片分辨率和瀏覽器的顯示分辨率不同，因此要使圖片根據瀏覽器的分辨率進行縮放。這就需要設置background屬性在橫向和縱向上的屬性，使其充滿全屏。
<style type="text/css">
html,body{height: 100%;}
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
}
</style>
想要改變字體顏色的話，需要使用color屬性：
html,body{
height: 100%;
color: #ffffff;
}
2.2 調整區域位置
調整區域位置在網頁設計中很重要，就想寫微信推文，一個好的排版總能讓人心情愉悅想要繼續讀下去，網頁也一樣，不能總是把東西都堆在一塊，或者所有頁面千篇一律。
在這個頁面上，我想讓內容居中顯示，于是通過設置container這個容器（就是前面的id為container的div），使其寬度為100%，即橫向充滿整個屏幕，然后設置其中的文字居中：
#container{
width: 100%;
text-align: center;
}
*在創建css樣式時，id類型的選擇器需要使用“#”來定義。
之后需要變成垂直居中，先對container的父級，即頁面的body做些屬性定義，然后通過改變top屬性來實現：
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}
要控制container的top屬性，就要使container的定位方式為“絕對定位”，而這又需要body（container的父級）為“相對定位”。
top: 50%;使得container的頂部位于整個頁面的50%位置。
不過要使得內容區塊整體居中，還要使container向上移動其高度的一半。但問題在于container的高度是隨著后續的字體、按鈕樣式而不斷動態變化的值，所以不可以直接設置確定值，需要設置transform屬性，設置其translateY的數值，使其在Y軸上移動-50%，即向上移動其高度的一半而無需聲明container具體多高。代碼如下：
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transfrom:translateY(-50%);
}
這里多次重復定義是因為，不同瀏覽器對于transform屬性的支持并不相同，為了使得頁面在各種瀏覽器下都能夠正常顯示不得不這么做。
2.3 調整字體和字號
考慮到不同電腦上字體庫的問題，可能同一個字在不同電腦上顯示不同或生僻字不能顯示，需要設置font-family屬性為sans-serif，即系統默認的無襯線字體;
html,body{
height: 100%;
color: #ffffff;
font-family: sans-serif;
}
接下來要調整文字大小，將h1標題的字號設置為了更大的54像素，并且小寫變大寫：
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
設置說明文字的樣式，使段落文字字號更大，且拉開距離，代碼如下：
p{
font-size: 21px;
margin-bottom: 40px;
}
?后記：對于大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。"我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這里是北京尚學堂，初學者轉行到IT行業的聚集地。"
天是2022年第一天，站在2022年的開始回首整個2021年并沒有發現自己有很大的進步。2022年一定要行動起來，豐富自己。
2022年給自己定幾個目標：
HTML的全稱為超文本標記語言，是一種標記語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等 HTML歷史上有如下版本： ①HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布。 ②HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。 ③HTML 3.2：1997年1月14日，W3C推薦標準。 ④HTML 4.0：1997年12月18日，W3C推薦標準。 ⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。 ⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻為終將改變移動互聯網的重要推手。Internet Explorer 8及以前的版本不支持 `
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag) <標簽>內容</標簽>
HTML 元素包含了開始標簽與結束標簽，元素的內容是開始標簽與結束標簽之間的內容，元素屬性是 HTML 元素提供的附加信息。
<!DOCTYPE html> 聲明為 HTML5 文檔<html> 元素是 HTML 頁面的根元素<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。<title> 元素描述了文檔的標題，瀏覽器標簽名，通常放到head里面<body> 元素包含了可見的頁面內容塊級元素只能出現在 <body> 元素內。
格式
默認情況下，塊級元素會新起一行。
內容模型
一般塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。 HTML 標準中塊級元素和行內元素的區別至高出現在 4.01 標準中。在 HTML5，這種區別被一個更復雜的內容類別 (en-US)代替。”塊級“類別大致相當于 HTML5 中的流內容 (en-US)類別，而”行內“類別相當于 HTML5 中的措辭內容 (en-US)類別，不過除了這兩個還有其他類別。
標簽與描述
標簽名 | 描述 |
address | 聯系方式信息 |
article (HTML5) | 文章內容 |
aside (HTML5) | 伴隨內容 |
blockquote | 塊引用 |
dd | 定義列表中定義條目描述 |
div | 定義列表中定義條目描述 |
dl | 文章內容 |
fieldset | 表單元素分組 |
figcaption (HTML5) | 圖文信息組標題 |
figure (HTML5) | 可附標題內容元素 |
footer (HTML5) | 區段尾或頁尾 |
form | 表單 |
h1~h6 | 標題 |
header (HTML5) | 頁頭 |
hgroup (HTML5) | 標題組 |
hr | 分割線 |
nav (HTML5) | 導航 |
noframes | 針對不支持框架的用戶的替代內容 |
noscript | 針對不支持客戶端腳本的用戶的替代內容 |
ol | 有序列表 |
p | 段落 |
section (HTML5) | 一個頁面區段 |
table | 表格 |
tbody | 表格中的主體內容 |
td | 表格中的單元 |
tfoot | 表格中的表注內容（腳注） |
th | 表格中的表頭單元格 |
thead | 表格中的表頭內容 |
time | 日期/時間 |
tr | 表格中的行 |
ul | 無序列表 |
行內元素
一般情況下，行內元素只能包含數據和其他行內元素。
格式
默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。
標簽與描述
標簽名 | 描述 |
a | 錨 |
abbr | 縮寫 |
acronym | 只取首字母的縮寫 |
b | 粗體 |
bdo | 文字方向 |
big | 大號文本 |
br | 簡單的折行 |
button | 按鈕 (push button) |
cite | 引用(citation) |
code | 計算機代碼文本 |
command | 命令按鈕 |
dfn | 項目 |
del | 被刪除文本 |
em | 強調文本 |
embed | 外部交互內容或插件 |
i | 斜體字 |
img | 圖像 |
input | 輸入控件 |
kbd | 鍵盤文本 |
label | input 元素的標注 |
map | 圖像映射 |
mark | 有記號的文本 |
objec | 內嵌對象 |
progress | 任何類型的任務的進度 |
q | 短的引用 |
samp | 計算機代碼樣本 |
select | 選擇列表（下拉列表） |
small | 小號文本 |
span | 文檔中的節 |
strong | 強調文本 |
sub | 下標文本 |
sup | 上標文本 |
textarea | 多行的文本輸入控件 |
time | 日期/時間 |
tt | 打字機文本 |
var | 文本的變量部分 |
video | 視頻 |
wbr | 可能的換行符 |
行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。
格式 默認情況下，行內元素不會以新行開始，能夠識別寬高
標簽與描述
標簽名 | 描述 |
img | 圖片 |
input | 輸入框 |
textarea | 多行文本 |
meta 標簽由 name 和 content 屬性定義，用來描述網頁文檔的屬性，比如網頁的作者，網頁描述，關鍵詞等，除了HTTP標準固定了一些name作為大家使用的共識，開發者還可以自定義name。
常用的meta標簽：
<meta charset="UTF-8" ><meta name="keywords" content="關鍵詞" /><meta name="description" content="頁面描述內容" /><meta http-equiv="refresh" content="0;url=" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">移除的元素有
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）。通俗來講就是用正確的標簽做正確的事情。 語義化的優點如下：
參考上文
參考上文
head 標簽用于定義文檔的頭部，它是所有頭部元素的容器。 head 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等。 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。 下面這些標簽可用在 head 部分：base, link, meta, script, style, title 其中 title 定義文檔的標題，它是 head 部分中唯一必需的元素。
DOCTYPE是HTML5中一種標準通用標記語言的文檔類型聲明，它的目的是告訴瀏覽器（解析器）應該以什么樣（html或xhtml）的文檔類型定義來解析文檔，不同的渲染模式會影響瀏覽器對 CSS 代碼甚? JavaScript 腳本的解析。它必須聲明在HTML?檔的第??。 瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲取，比如，語雀官網的文檔類型是CSS1Compat）：
src 用于替換當前元素，href 用于在當前文檔和引用資源之間確立聯系。
src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。 href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果在文檔中添加
兩者區別：
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。 在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點則認為應關注于內容本身。內容是建立網站的誘因，有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
