html css 基礎 js

zhulk發表於2018-04-23
HTMLCSSJS

前言：由於出差專案需要，學習一下html+css基礎和前人的經驗總結，在此做下備註，當然如果能幫到有需要的小夥伴再好不過。

html介紹

html是通過指定便籤來顯示內容的，每個便籤都有相應的開始和結束，建議都用***小寫***，層次間有***相應的縮排***。建立一個網頁檔案很簡單：新建一個文字檔案，將其命名為xxx.html或者xxx.htm（注意字尾名問題）

常用標籤介紹

Head

Head標籤中的內容是不會在網頁中顯示的，一般設定標題,引入外部檔案，或者設定相應的meta等資訊

<head>
	<title>index</title>
	<meta name="author" content="Administrator" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
複製程式碼

文字標籤

  • 換行標籤 對於html而言，程式碼中的換行不會在頁面中顯示。需要使用相應的，<br/>和 <p></p>。
  • 標題標籤 <h1>~~~<h6> 依次變小，用於網站的標題
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
複製程式碼

效果如下

15244106650959.jpg

  • 列表標籤 1.ul和li
            <ul>
					<li>你</li>
					<li>我</li>
					<li>他</li>
				</ul>
複製程式碼

效果如下

15244104775433.jpg

注意： 2.dl ，dt，dd：它們分別代表列表，標題和資料。

<dl>
   <dt>水果</dt>
   <dd>蘋果</dd>
   <dd>橘子</dd>
</dl>
複製程式碼

效果：

15244111468837.jpg

  • 常用其它標籤

    <a>超連結

//除了標籤還有自己的屬性，屬性全部在開始標籤寫多個標籤用空格分割
<a class="xyj" href="https://www.baidu.com/" target="content" title=" 標題">我是個連結</a>
複製程式碼

link是預設樣式，visited為點選之後的效果，hover為滑鼠放上去的效果，注意：對於ie而言不會繼承link的效果，所以在一般在前面會加上這個visited屬性。

	a.xyj:link,a.xyj:visited {
				text-decoration:none;
				font-size:12px;
				color:#226;
			}

			a.xyj:visited {
				color:#a21;
			}
	
			a.xyj:hover {
				color:#191;
				text-decoration:underline;
			}
複製程式碼

<img> 標籤用來展示圖片

//alt表示圖片沒載入成功顯示的文字
<img src="/i/eg_tulip.jpg"  alt="上海鮮花 港 - 鬱金香" />
複製程式碼

<span> 常常巢狀在其它標籤中，用來對文字進行簡單的控制。

註釋標籤
小於標籤(<) & lt;
大於標籤(>) & gt;
空格 & nbsp;
copy 符號（©） & copy;
@符號 @amp
  • 容器標籤

1.div <div>塊級元素，用做容器，放置大量內容

div是塊級元素獨佔一行預設從上往下排列
<div > 我是一個div </div>
<div >我是另一個div </div>
複製程式碼

2.表格 表單 常用的表單標籤:原則上所有的表單標籤都要放置在form標籤中 Input標籤可以用來設定文字框，密碼框等資料

<form action="01.html">
			<!--text表示文字輸入框，password代表密碼輸入框-->
			使用者名稱:<input type="text"/><br/>
			密碼:<input type="password"/><br/>

			性別:<input type="radio" value="男" name="sex"/>男
				<input type="radio" value="女" name="sex"/>女<br/>
			興趣:<input type="checkbox"/>唱歌<input type="checkbox"/>打豆豆
				<input type="checkbox"/>跳舞<br/>
			籍貫:<select>
				<option>北京</option>
				<option>上海</option>
				<option>廣東</option>
			</select><br/>
			<!--多行文字，cols表示多框，rows表示多高-->
			個人簡介:<textarea cols="50" rows="10"></textarea><br/>
			<!--submit提交，當提交時會連結到action中-->
			<input type="submit" value="使用者註冊"/>
			<!--button表示按鈕，點選後沒有任任何控制-->
			<input type="button" value="按鈕"/>
</form>
複製程式碼

效果

15244141123451.jpg

3.Frameset標籤用與協調管理其它介面html檔案，靜態載入，cols表示橫向切分佈局，rows，縱向切分佈局

<!--第一列被設定為瀏覽器視窗的寬度的25%。第二列被設定為75%。加入noresize = " noresize阻止使用者調整大小。
-->
<frameset cols="25%,75%">  
   <frame src="frame_a.htm" />  
   <frame src="frame_b.htm" />  
</frameset>  
複製程式碼

CSS樣式表

HTML僅僅只是做資料的顯示，CSS是對頁面的修飾。 樣式表有三種方式進行編寫 1、內嵌樣式： 巢狀在標籤中，通過style屬性來宣告樣式，內嵌樣式只對當前標籤有效，內嵌樣式，最後執行，會把head中style樣式替換掉。

<h2 style="color:#212267;text-decoration:underline;font-size:12px">css檔案</h2>

複製程式碼

2、在html的title通過style標籤統一為該頁面編寫樣式，表示對頁面中對所有標籤都有效

<head>
		<title>css樣式</title>
		<style type="text/css">
		／/對頁面中對所有h2標籤都有效
			h2{
				background:#aa1222;
				color:#fff;
			}
		</style>
	</head>

複製程式碼

3、將樣式表檔案編寫到一個xxx.css的檔案中，然後在head中引入該樣式表檔案,注意:對於樣式表而言，後定義的會把先定義的樣式表覆蓋掉

<head>
		<title> 我是標題</title>
		<link rel="stylesheet" href="css02.css" type="text/css"/>
	</head>
複製程式碼

選擇器

1、標籤選擇器：會對頁面中的所有標籤都有效

        ／/對頁面中所有h2標籤都有效
			h2{
				background:#aa1222;
				color:#fff;
			}
複製程式碼

2、ID選擇器（獲取id為xx的標籤）：可以對頁面中某個標籤進行樣式的設定，使用#號進行設定，注意匹配的id都適用這個標籤。

#d1,#p2 {
			font-size:19px;
			background:#999;
		}
複製程式碼

3、類選擇器（獲取標籤中class=xxx的標籤）：可以選擇頁面中的一組標籤，class="xxx的一組標籤 用.表示，可以載入多個類，用空格來隔開

    .p1 {
    			color:#54a;
    			font-size:16px;
    		}
    		// 樣式
		<p class="p1  nav_last">
		    Apache Whisker allows a...
		</p>
複製程式碼

4、包含選擇符（獲取某個標籤中的所有的子標籤） 表示此標籤下的所有span都應用這個css樣式， 注意：當使用了包含的操作符之後，它的載入時間比使用class的載入時間要低，所以如果此時再來定義一個class的樣式，不會把使用包含的樣式覆蓋掉。

div span {
			background:#0ff;
		}
複製程式碼

5、子物件選擇符(獲取某個標籤的第一級子標籤) 僅對第一級生效

div>span {
			background:#f0f;
		}
複製程式碼

6、分組選擇符（可以同時設定多個標籤，使用逗號進行分割），

//d1，p2都使用該樣式。
	#d1,#p2 {
			font-size:19px;
			background:#999;
		}
複製程式碼

佈局

1、盒子模型(box model)預設

15244474678767.jpg

2、span和a相類似的文字標籤 僅僅只是用來設定文字，諸如:a和span對於這兩個標籤而言，注意：在W3C的標準中預設是不能進行width等樣式進行修飾的，所以直接為這些標籤設定width是沒有作用的，需要通過display:block之後才有作用。但是對於IE而言就是有作用。 3、padding的相容性 如果一個標籤設定了height或者width,再進行padding的設定，對於IE而言，padding的值不會加到height或者width中（如果：一個div的高度為40,而padding-top:20;此時這個div的高度依然是40）；對於IE之外的所有瀏覽器，padding的值會加到height或者width中(如果：一個div的高度為40,padding-top為20，此時div的高度是60)。所以千萬不要使用padding來進行對齊操作 4、定位Absolute和relative Absolute是絕對定位，針對父級標籤中進行了absolute定位的標籤來進行left、right等設定，如果父級標籤中都沒有這樣的定位方式，就會針對body來進行定位，而且對於absolute而言，該容器不再佔用相應的空間，原有的空間會被其他元素所佔據。 Relative是相對定位，都是針對父級元素進行定位的，而且空間會一直被佔用 使用經驗：經常會使用relative來實現文字位置的移動。所以如果要為某個容器設定裡面的文字位置，可以用span包裹處理<span>sssss</span>，再為span設定

position：relative ；left ：10px；
複製程式碼

5、float float：元素會根據屬性值向左或向右浮動。一般用於橫向列表導航，複雜介面等 一個塊級元素如果沒有設定height，其height是由子元素撐開的。對子元素使用了浮動之後，子元素會脫離標準文件流，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。要解決這樣的問題，我們就是要使用清除浮動。分一下三種方式。

1、哪裡有浮動元素，就在其父級元素的中增加一個（作為最後一個子元素）clear:both; 2、父級元素新增overflow:hidden，注意：子元素超出父元素的範圍，會造成超出的部分被隱藏 .clearfix{overflow:hidden;zoom:1} 3、利用after偽元素



// 例如消除<ul class="menu clearfix"> 
.clearfix: { zoom: 1; }
    .clearfix:after { display: block; content: ''; clear: both; height: 0; visibility: hidden; }
複製程式碼

6、讓容器居中 1、body {text-align:center;}僅僅只有IE可以居中 2、margin:auto;僅僅只有IE之外的瀏覽器可以居中 3、推薦使用的居中方式

		position:absolute;
		left:50%;
     marginLeft:-width;
複製程式碼

7、div等容器盒子設定邊框border

border-bottom: 1px solid #f1f1f1;
複製程式碼

Flex 佈局

彈性佈局 容器和行內元素都可以宣告Flex佈局。 display: flex; Webkit核心的瀏覽器，必須加上-webkit字首display: -webkit-flex; /* Safari */ 注意，設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

採用Flex佈局的元素，稱為Flex容器，它的所有子元素自動成為容器成員，簡稱”專案”。 1、容器的屬性

//決定主軸方向
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
複製程式碼
//控制一條軸線排不下，如何換行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
複製程式碼
//flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
複製程式碼
//主軸上的對齊方式
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

複製程式碼
//交叉軸上對齊方式
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
複製程式碼
//多根軸線的對齊方式,如果只有一根軸線，該屬性不生效
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

複製程式碼

2、專案屬性

//order屬性定義專案的排列順序
.item {
  order: <integer>;
}
複製程式碼
//放大比例
.item {
  flex-grow: <number>; /* default 0 */
}
複製程式碼
//縮小比例
.item {
  flex-shrink: <number>; /* default 1 */
}
複製程式碼
//專案佔據的主軸空間
.item {
  flex-basis: <length> | auto; /* default auto */
}
複製程式碼
//單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
複製程式碼

參考

Flex 佈局教程：語法篇

如有疏漏，請指出不勝感激，如有問題可以通過如下方式聯絡我

簡書 csdn 掘金 klvens跑碼場

相關文章