html css 基礎 js

時間  2019-12-04
標籤 html css 基礎 欄目 HTML 简体版
原文   原文鏈接

前言：因爲出差項目須要，學習一下html+css基礎和前人的經驗總結，在此作下備註，固然若是能幫到有須要的小夥伴再好不過。css

html介紹

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

經常使用標籤介紹

Head

Head標籤中的內容是不會在網頁中顯示的，通常設置標題,引入外部文件，或者設置相應的meta等信息web

<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>
複製代碼

效果以下 bash

15244104775433.jpg

注意： 2.dl ，dt，dd：它們分別表明列表，標題和數據。佈局

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

效果： post

15244111468837.jpg

  • 經常使用其它標籤學習

    <a>超連接flex

//除了標籤還有本身的屬性，屬性所有在開始標籤寫多個標籤用空格分割
<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是對頁面的修飾。 樣式表有三種方式進行編寫 一、內嵌樣式： 嵌套在標籤中，經過style屬性來聲明樣式，內嵌樣式只對當前標籤有效，內嵌樣式，最後執行，會把head中style樣式替換掉。

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

複製代碼

二、在html的title經過style標籤統一爲該頁面編寫樣式，表示對頁面中對全部標籤都有效

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

複製代碼

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

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

選擇器

一、標籤選擇器：會對頁面中的全部標籤都有效

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

二、ID選擇器（獲取id爲xx的標籤）：能夠對頁面中某個標籤進行樣式的設置，使用#號進行設置，注意匹配的id都適用這個標籤。

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

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

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

四、包含選擇符（獲取某個標籤中的全部的子標籤） 表示此標籤下的全部span都應用這個css樣式， 注意：當使用了包含的操做符以後，它的加載時間比使用class的加載時間要低，因此若是此時再來定義一個class的樣式，不會把使用包含的樣式覆蓋掉。

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

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

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

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

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

佈局

一、盒子模型(box model)默認

15244474678767.jpg

二、span和a相相似的文本標籤 僅僅只是用來設置文本，諸如:a和span對於這兩個標籤而言，注意：在W3C的標準中默認是不能進行width等樣式進行修飾的，因此直接爲這些標籤設置width是沒有做用的，須要經過display:block以後纔有做用。可是對於IE而言就是有做用。 三、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來進行對齊操做 四、定位Absolute和relative Absolute是絕對定位，針對父級標籤中進行了absolute定位的標籤來進行left、right等設置，若是父級標籤中都沒有這樣的定位方式，就會針對body來進行定位，並且對於absolute而言，該容器再也不佔用相應的空間，原有的空間會被其餘元素所佔據。 Relative是相對定位，都是針對父級元素進行定位的，並且空間會一直被佔用 使用經驗：常常會使用relative來實現文本位置的移動。因此若是要爲某個容器設置裏面的文本位置，能夠用span包裹處理<span>sssss</span>，再爲span設置

position：relative ；left ：10px；
複製代碼

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

一、哪裏有浮動元素，就在其父級元素的中增長一個（做爲最後一個子元素）clear:both; 二、父級元素添加overflow:hidden，注意：子元素超出父元素的範圍，會形成超出的部分被隱藏 .clearfix{overflow:hidden;zoom:1} 三、利用after僞元素

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

六、讓容器居中 一、body {text-align:center;}僅僅只有IE能夠居中 二、margin:auto;僅僅只有IE以外的瀏覽器能夠居中 三、推薦使用的居中方式

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

七、div等容器盒子設置邊框border

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

Flex 佈局

彈性佈局 容器和行內元素均可以聲明Flex佈局。 display: flex; Webkit內核的瀏覽器，必須加上-webkit前綴display: -webkit-flex; /* Safari */ 注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

採用Flex佈局的元素，稱爲Flex容器，它的全部子元素自動成爲容器成員，簡稱」項目」。 一、容器的屬性

//決定主軸方向
.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;
}

複製代碼

二、項目屬性

//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跑碼場

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程