整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1.1頁面基礎元素：<html>
<html>是頁面的基礎元素，主要用來定義頁面的開始和結束部分。元素語法結構如下<html>....</html>（開頭標記為<>,結束標記為</html>）先介紹一下完整的HTML文件的基本結構
<html> 文件開始標記
<head> 文件頭開始標記
......... 文件頭部分的內容
</head> 文件頭結束標記
<body> 文件主體開始標記
......... 文件主題部分的內容
</head> 文件主題結束標記
</html> 文件結束標記
在<html>和</html>之間寫入想要編輯的頁面內容就構成了一個簡單的頁面
1.1.1 文本顯示方向屬性：dir
【作用與語法】dir屬性用來指定瀏覽器文本顯示的方向，同時也決定瀏覽器滾條的位置。dir屬性的語法結構如下
<html dir="瀏覽器中文本的方向">......</html>(在元素名稱和屬性之間要加入空格)
dir屬性可以取兩個值，ltr（left title right）和rtl（right title left），分別表示從左向右顯示和從右向左顯示
1.1.2 指定語言屬性：lang
【作用與語法】lang屬性用來指定文檔中所使用的語言。lang屬性的語法結構如下
<html lang="指定的語言">包含的內容部分</html>
lang屬性的取值可以使用ISO標準中的語言代碼。在<html>元素中加入lang屬性，使瀏覽器更好的顯示界面，并不會更改頁面的文字編碼
ISO標準中語言代碼的取值及含義語言名稱寫法語言名稱寫法英語en法語fr漢語zh德語de日語ja意大利語it
1.2 頁面頭部元素：<head>
【作用與語法】HTML的頭部元素是以<head>為開始標記，以</head>為結束標記。它用于包含當前文檔的相關信息，可包含<title>元素、<meta>元素等，分別用來定義頁面的標題、編碼。使用<head>元素可以將基本信息部分和頁面主體內容區分開來。<head>元素的語法結構如下
<head>......</head>
1.3 頁面標題元素：<title>
【作用與語法】HTML頁面的標題一般是用來說明頁面用途的，它顯示在瀏覽器的標題欄中。在HTML文檔中，標題信息設置在頁面的頭部，也就是<head>和</head>之間。<title>元素的語法結構如下。
<title>......</title> (說明：在標記中間的“......”就是標題的內容，它位于HTML文檔的頭部，即<head>和</head>之間)
1.4 元信息元素：<meta>
【作用與語法】元信息元素<meta>用來定義頁面的附加信息，其中包括頁面的作者、版權、關鍵字等相關信息。<meta>元素的語法結構如下。
<meta 屬性=“屬性值”/>
<meta>元素是一個自封閉的元素，通過其中的屬性來添加各種附加信息。<meta>元素在不適用任何屬性時，對頁面沒有影響。
1.4.1 元信息元素名稱屬性：name
【作用與語法】name屬性用來制定文檔中附加信息的名稱。例如，最常用的值“keywords”用來定義文檔中的關鍵字，方便搜索引擎的搜索。name屬性的語法結構如下。
<meta name="信息名稱"/>
在<meta>元素中，名稱必須對應有相關的值才能生效
1.4.2 元信息元素的值：content
【作用與語法】content屬性用來指定文檔中附加信息的值，它與name屬性成對出現。content屬性的語法結構如下
<meta name="信息名稱" conten="附加信息的值"/>
<meta>元素中所定義的“keywords”信息是用來為搜索引擎定義關鍵字的，所以對頁面顯示效果并不產生影響，故頁面顯示效果并無太大變化
1.4.3 元信息元素的附加屬性：http-equiv
【作用與語法】http-equiv屬性和name屬性類似，用來指定附加信息的名稱。在瀏覽器加載頁面之前，服務器會把http-equiv屬性定義的相關信息發送給瀏覽器，便于在瀏覽器中正確顯示頁面。http-equiv屬性的語法結構如下
【作用與語法】<meta http-equiv="信息名稱"，content="附加信息的值">
說明：和name屬性相似，http-equiv屬性一般要和conten屬性成對出現
1.4.4 定義頁面的跳轉
【作用與語法】在瀏覽器網頁的時候經常會看到一些歡迎信息的頁面，并經過一段時間后，這一頁面會自動轉到其他頁面，這就是網頁的跳轉。使用HTML中的HTTP代碼就可以很輕松的實現這一功能。頁面跳轉的語法結構
<meta http-equiv="refresh" content="跳轉時間"；url="鏈接地址">
說明：在該語法中，refresh表示網頁的刷新，而在content中則設定刷新的時間和刷新后的地址，時間和鏈接地址之間用分號相隔。默認情況下，跳轉時間是以秒為單位的
1.5 基本設置元素：<base>
在HTML中，基本設置元素<base>使用來定義相對路徑的根目錄。使用<base>元素，可以方便的定義頁面中的超級鏈接。語法結構如下
<base 屬性="屬性值"/>
<base>元素在不使用任何屬性時，對頁面沒有影響。<base>元素中可以使用的屬性有鏈接路徑屬性href和鏈接窗口屬性target
1.5.1 鏈接路徑屬性：href
【作用與語法】href屬性用來指定文檔中相對鏈接的根目錄。文檔中的所有鏈接(包括圖片、音頻等內容)都按照href屬性所指定的根目錄顯示。href屬性的語法結構如下
<base href="指定路徑">包含的內容部分</base>
href屬性的取值為url值。它可以使用絕對路徑，也可以指
向某個文件夾。
果給你一些文本文字，要讓它變得美，你將會采用什么方法？用過PPT的人都知道，可以調整顏色，可以設定字體，可以進行對齊、縮進等操作。這些在PPT中常用的方法，在CSS中也是很容易實現的，代碼也簡單。
在CSS中，設置文本顏色，用color屬性，值可為16進制、一個RGB值或顏色名稱。十六進制用#號開始，后接#RGB，比如 #ff0000；RGB值為rgb(255,0,51)形式；顏色名稱名稱直接就是英語單詞，如red。
樣色表ys2.css文件內容
body {
color:#00ff00;
}
h3 {
color:CadetBlue;
}
p {
color:rgb(0,0,255);
}HTML文件內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字體顏色</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了，還能找工作不?</h3>
<p>
昨晚七點多收到通知，說老板抽查了幾次監控，發現一些人上班渾水摸魚玩手機，
要召開緊急視頻會議，<br/>
全體員工必須參會，視頻里老板很生氣，正火冒三丈的批評那些財務人員上班玩手機，
說再不多提升自己，<br/>
以后早晚被電腦和機器代替， 然后我忘記關麥了，說了句：機器能替你吃牢飯？<br/>
唉，也不知道年底了工作好不好找。</p>
</body>
</html>輸出結果
CSS字體屬性定義字體，加粗，大小，文字樣式。在用軟件時，你是不是見過宋體什么的，沒錯，那個就是字體了。在CSS中，可以使用Font Family："宋體"的方式指定字體；樣式，就是加粗、傾斜那個，用font-style指定；大小則用font-size。
/* ys2.css里的樣式表內容 */
.f {
font-family: "宋體";
/* 加粗 */
font-style: oblique;
font-size: 40px;
}
<!--html文件內容-->
<div class="f">
牛的程序員，羊一樣的女孩
</div>輸出結果
文本在元素內水平對齊，可以使用 text-align: 值的方式，center居中對齊，left居左對齊，right居右對齊；垂直居中對齊，可用vertical-align和line-height結合的方式進行指定，這個平時會經常用到，記下來。
/*css文件里的內容*/
/*水平居中*/
.div-width {
width: 800px;
}
.txt-left {
text-align: left;
color: aquamarine;
}
.txt-center {
text-align: center;
color: darkcyan;
}
.txt-right {
text-align: right;
color: darkgreen;
}
/*垂直居中*/
.txt-vertical {
border: 2px solid green;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
<!-- HTML文件里的內容 -->
<div class="div-width">
<!--水平居中-->
<p class="txt-left">向左看齊</p>
<p class="txt-center">居中對齊</p>
<p class="txt-right">向右看齊</p>
<!--垂直居中-->
<div class="txt-vertical">垂直居中方法1</div>
<div>垂直居中方法2</div>
</div>輸出結果
如果要對標簽進行水平居中的話，可以使用 margin: auto;用position: absolute; 屬性來對齊元素的話，有些瀏覽器不支持，所以不推薦。
/* 在樣式表文件中 */
.div-center {
margin: auto;
width: 50%;
border: 1px solid green;
height: 300px;
text-align: center;
vertical-align: center;
line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在，人海中間：div在Web居中，文字在div中居中</div>輸出結果
為了讓閱讀舒服，在進行文本排版之時，會考慮字與字之間的間距，有行與行之間的距離，還有段落的縮進等。在CSS中，字符間距可用letter-spacing:值；行間距依然用line-height:值；段落字符縮進，用text-indent即可。溫馨提醒：text-indent只對div和p標簽有效。
/* 在樣式表文件中 */
.text-spacing {
width: 900px;
border: 1px solid green;
letter-spacing: 50px;
}
p.row {
line-height: 3.0em;
}
p.i {
/*em是相對單位，2em即現在一個字大小的兩倍*/
text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
他說風雨中，這點痛算什么
</div>
<p class="row">
秋季降溫快的特點，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。<br/>
秋分棉花吐絮，煙葉也由綠變黃，正是收獲的大好時機。華北地區已開始播種冬麥，<br/>
長江流域及南部廣大地區正忙著晚稻的收割，搶晴耕翻土地，準備油菜播種。
</p>
<p class="i">
當我以為我無法繼續走下去時，我強迫自己要繼續前進。<br/>
我的成功是基于我的堅持，并非運氣。<br/>
努力,是為了跳出你厭惡的圈子。<br/>
讀書,是為了遠離渣貨垃圾人。<br/>
健身,是為了讓討厭的人心平氣和...
</p>輸出結果
好了，有關CSS文本或元素對齊的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##HTML5##CSS##程序員##Web#
單標簽
網頁（程序）如果要和用戶產生互動，則必須借助一定的中介，這個中介一般是：文本輸入框、按鈕、多選框、單選框。而表單則是這些中介和放置這些中介的空間（<form action=”” methon=””></form>）。
在網頁中，這些文本輸入框、按鈕等等必須放置在由<form></form>這個標簽所定義的空間中，否則沒有實際意義。所以，由<form></form>標簽所定義的空間就是表單存在的空間。
【各種輸入類型】
呈現結果
姓名：
原始碼
<form action=http://www.baidu.com/nameproject.aspmethon=”post”>
姓名：<input type="text" name="name" size="20">
</form>
它有下列可設定之屬性：
呈現結果
性別：男 女
原始碼
<form>
性別：
男 <input type="radio" name="sex" value="boy">
女 <input type="radio" name="sex" value="girl">
</form>
它有下列可設定之屬性：
呈現結果
喜好： 電影 看書
原始碼
<form>
喜好：
<input type="checkbox" name="sex" value="movie">電影
<input type="checkbox" name="sex" value="book">看書
</form>
它有下列可設定之屬性：
呈現結果
請輸入密碼：
原始碼
<form>
請輸入密碼：<input type="password" name="input">
</form>
它有下列可設定之屬性：
呈現結果
原始碼
<form>
<input type="submit" value="送出資料">
<input type="reset" value="重新填寫">
</form>
它有下列可設定之屬性：
呈現結果
請按下按鈕：
原始碼
<form>
請按下按鈕：<input type="button" name="ok" value="我同意">
</form>
它有下列可設定之屬性：
呈現結果
隱藏欄位：
原始碼
<form>
隱藏欄位：<input type="hidden" name="nosee" value="看不到">
</form>
它有下列可設定之屬性：
【大量文字輸入元件】
呈現結果
請輸入您的意見：
原始碼
<form>
請輸入您的意見：<br>
<textarea name="talk" cols="20" rows="3"></textarea>
</form>
它有下列可設定之屬性：
【下拉式選單】
呈現結果
您喜歡看書嗎？：
非常喜歡
還算喜歡
不太喜歡
非常討厭
原始碼
<form>
您喜歡看書嗎？：
<select name="like">
<option value="非常喜歡">非常喜歡
<option value="還算喜歡">還算喜歡
<option value="不太喜歡">不太喜歡
<option value="非常討厭">非常討厭
</select>
</form>
它有下列可設定之屬性：
multiple，是設定此一欄位為復選，可以一次選好幾個選項。
....................................................................
我的微信公眾號：UI嚴選 —越努力，越幸運
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
