整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html的頭部標簽<head>和</head>中，可以嵌套用來表達頁面內容的標簽，除了用<title>指定文件標題，用<meta charset="UTF-8">指定頁面編碼之外，還有另外的好幾個標簽。特別是用于SEO的那些標簽。
SEO是搜索引擎優化的意思，意思就是你在某搜索工具中，搜索某個內容時，為什么指向并跳轉到你的網站中，而不是別的網站，這就涉及到SEO可了。如果想要搜索引擎搜索到你，你必須保證用戶要搜索的內容出現在你的Meta說明中。
為搜索引擎定義的關鍵詞，提供給SEO搜索。
<meta name="keywords" content="Python, 前端, 小程序, App,Java,嵌入式">為網頁定義描述內容，也是SEO的一部分。
<meta name="description" content="老陳說編程，編程界的劉德華">頁面定時刷新，在H5之前，實時更新頁面數據的時，常用這種方法。但很不科學，因為浪費資源。在H5時，改用Websocket了。
<meta http-equiv="refresh" content="15">定義頁面作者是誰。
<meta name="author" content="老陳">在<head></head>中，用<link>標簽，引入外部資源。一個是CSS文件，一個是icon。引入CSS文件如下。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>引入頂部icon的方式。
<link rel="shortcut icon" href="圖片url">引入共用的javascript文件。
<script type="text/javascript" src="scripts.js"></script>如果你定義的CSS或JavaScript代碼，只當前頁面應用，那可以在<head></head>中用<style></style>和</script>標簽對。有關CSS和Javascript的應用，后面再說。
<head>
<style type="text/css">
body {background-color:red}
</style>
<script type="text/javascript">
document.write("老陳說編程");
</script>
</head>好了，有關HTML頭部標簽常用的內容，也就這么多了。如果你喜歡，那就轉發出去，如果你不喜歡，那就點個贊。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##程序員##HTML5##CSS##鴻蒙#
演示視頻在文章底部
1.頁面內容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。
將</div>放置在</body>之上。
將全部內容包裹在這個div中，就可以實現整個頁面居中。
內容顯示寬度為瀏覽器視窗寬度的50%。
margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。
2.導航欄懸停頂端方法
把四個a標簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。
默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。
3.鼠標滑過導航標題或鏈接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說，就是在<head></head>標簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head標簽有啥用？——零基礎自學網頁制作的小伙伴應該知道，CSS腳本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>標簽。
hover指的是：當鼠標懸停在a上面時的狀態。
使用：連接。
這個狀態下要執行的內容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先，我們要明確一點，就是，滾動條是在內容長度超過視窗高度時產生的。
如果要取消視窗最右側滾動條，就要控制內容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。
在<p>標簽色上面添加<div>。
在</map>標簽下面添加</div>。
下面，為div規定尺寸，添加style="width:610px; height:530px;"。
這樣，就不會超出視窗。但是代碼寫完后發現并不是，如圖：
多出的文字內容超出div范圍，右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖：
因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。
添加“overflow-x：hidden”即可，hidden（隱藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖：hidden之后，將無法滾動或拖動畫面。
最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。
從前面的例子可知，hidden是不行的，有沒有別的辦法？
那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給里面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作
很多Web前端新手對響應式布局和自適應布局的概念以及制作方法分不清，簡單來說響應式布局相當于流動網格布局，而自適應布局等于使用固定分割點來進行布局。接下來就給大家講解用CSS做響應式布局的方法。
做響應式網站離不開CSS響應式布局查詢代碼寫法，而在此之前，我們需要了解什么是媒體查詢以及如何才CSS中引入媒體查詢。
什么是媒體查詢？
媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有width、height和color（等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。
如何在CSS中引入媒體查詢？
媒體查詢寫在CSS樣式代碼的最后，CSS是層疊樣式表，在同一特殊性下，靠后的的樣式會重疊前面的樣式。
如何用CSS做響應式布局呢？
1、在HTML頭部添加以下代碼，用來顯示兼容移動設備的顯示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
參數詳解：
width=device-width ：寬度等于當前設備的寬度
initial-scale=1 ：初始的縮放比例（默認為1）
minimum-scale=1 ：允許用戶縮放到的最小比例（默認為1）
maximum-scale=1 ：允許用戶縮放到的最大比例（默認為1）
user-scalable=no ：用戶是否可以手動縮放（默認為no）
2、引入包含Media的CSS文件
一般情況HTMLCSS代碼都是分開寫的，Media也不例外。
<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>
3、寫Media中的代碼
以某個網頁的響應式布局為例
結構:@media設備類型and (設備特性)｛樣式代碼｝
/*媒體查詢*/
/*當頁面大于1200px時，大屏幕，主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之間的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h2 {
font-size: 40px;
}
}
/*768和991像素之間的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h2 {
font-size: 35px;
}
}
/*在480和767像素之間的屏幕里，超小屏幕，主要是手機*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h2 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手機*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h2 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
響應式布局的原理就是在不同的窗口大小下顯示不同的結構和樣式。只要掌握好CSS的樣式，響應式布局就沒問題。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
