HTML和CSS歸檔基礎知識
前端好久沒看找了資料歸檔了下，HTML和CSS基本東西，深入請下載***w3cschool.CHM***
1，HTML基本標籤
<!DOCTYPE html><!-- 文檔類型 -->
<!-- 註釋 --> <!-- -->
<html><!-- 超文本標記語言hyper text mark language -->
<head>
<!-- 字符集標籤，不寫容易瀏覽器解析後出現亂碼 -->
<meta charset="UTF-8">
<title>文本標籤</title>
align="left" <!-- 鍵值對形式，鍵="值"(值一定要用引號裹起來) -->
</head>
<body>
<!-- 文本標籤 -->
<br/><!-- 換行 -->
<h1>標題標籤</h1><!-- 標題標籤 h1-->
<p>段落標籤</p><!-- 段落標籤 p -->
<hr color="red" width="200" size="10" align="left"/> <!--一條水平線-->
<b>加粗</b><!-- 加粗-->
<i>斜體</i><!-- 斜體 -->
<font>字體</font> <!-- 字體標籤-->
<center>居中</center><!-- 居中標籤-->
<img src="image/圖片.jpg"/><!-- 圖片標籤 -->
<ol > <!--有序列表-->
<li>列表1</li>
<li>列表2</li>
</ol>
<ul > <!--無序列表-->
<li>列表1</li>
<li>列表2</li>
</ul>
<a href="http://www.baidu.cn">點我</a> <!--超鏈接-->
<div>塊級標籤</div><!-- 塊級標籤,每一個div佔整行 -->
<span>行內標籤</span><!-- 行內標籤,在一行 -->
<table ><!-- 表格 --><!-- 兩行六個單元格 -->
<tr><!-- 行 -->
<th>姓名</th><!-- 單元格 -->
<th>年齡</th>
<th>愛好</th>
</tr>
<tr><!-- 行 -->
<td>張三</td><!-- 單元格 -->
<td>18</td>
<td>籃球</td>
</tr>
</table >
</body>
<footer>腳</footer>
<html>
2，form表單格式案例
2,<!-- form表單
form：用戶輸入數據，它採集用戶數據
* action：指定提交的URL
* method:指定提交方式（常見有get和post）
* 表單項中的數據要想被提交：必須指定其name屬性,不然提交時無鍵值對參數
-->
<form action="#" method="get/post">
用戶：<input type="text" name="用戶"><br> <!-- input標籤內的屬性（鍵值對形式） -->
密碼：<input name="密碼"><br>
<input type="submit" value="提交" >
<input type="radio" name="gender" value="female" checked>男<!-- 單選按鈕 -->
<input type="checkbox" name="hobby" value="shopping"> 愛好<!-- 多選按鈕 -->
<input type="file" name="file"><!-- 文件選擇 -->
<input type="hidden" name="id" value="aaa"> <!-- 隱藏域 -->
<input type="color" name="color"><!-- 取色器 -->
<input type="date" name="birthday"><!-- 生日 -->
<input type="datetime-local" name="birthday"><!-- 生日 -->
<input type="email" name="email"><!-- 郵件 -->
<input type="number" name="age"><!-- 年齡 -->
<select name="province"><!-- 複選 -->
<option value="">--請選擇--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陝西</option>
</select>
<textarea cols="20" rows="5" name="des"></textarea><!-- 文本域 -->
<input type="submit" value="登錄" ><!-- 提交 -->
<input type="button" value="按鈕" ><!-- 按鈕 -->
<input type="image" src="img/regbtn.jpg"><!-- 圖片 -->
</form>
3，內聯樣式
3,<!--
內聯樣式
* 在標籤內使用style屬性指定css代碼
-->
<div style="color:red;">hello css</div>
<div style="color:red;"></div>
4，內部樣式
4,<!--
內部樣式
* 在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼
-->
<head>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
5，外部樣式
5, <!--
外部樣式
1. 定義css資源文件。
2. 在head標籤內，定義link標籤，引入外部的資源文件
-->
<head>
<link rel="stylesheet" href="css/a.css"><!-- 在head標籤內，定義link標籤，引入外部的資源文件 -->
<style>
@import "css/a.css"; <!-- 定義css資源文件。 -->
</style>
</head>
<body>
<div>hello css</div>
<p>不要憤怒</p>
</body>
<!-- div{
color:green;
}
p{
color: red;
font-size: 30px
} -->
6，選擇器
6，<!-- 基礎選擇器
1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
* 語法：#id屬性值{}
2. 元素選擇器：選擇具有相同標籤名稱的元素
* 語法： 標籤名稱{}
* 注意：id選擇器優先級高於元素選擇器
3. 類選擇器：選擇具有相同的class屬性值的元素。
* 語法：.class屬性值{}
* 注意：類選擇器選擇器優先級高於元素選擇器
-->
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style>
.cls1{
color: blue;
}
div{
color:green;
}
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">世界很美好</div>
<div class="cls1">世界很美好</div>
<p class="cls1">世界很美好</p>
</body>
7，擴展選擇器
7，<!-- 擴展選擇器 -->
<head>
<style>
div p{
color:red;
}
div > p {
border: 1px solid;
}
input[type='text']{
border: 5px solid;
}
a:link{
color: pink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div>
<p>界美好與你環環相扣</p>
</div>
<p>界美好與你環環相扣</p>
<div>aaa</div>
<input type="text" >
<input type="password" >
<br> <br> <br>
<a href="#">界美好與你環環相扣</a>
</body>
8，Css屬性
8，<!-- Css屬性 -->
<head>
<style>
p{
color: #FF0000;
font-size: 30px;
text-align: center;
line-height: 200px;
/*
border 邊框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景
*/
background: url("img/logo.jpg") no-repeat center;
}
</style>
</head>
<body>
<p>界美好與你環環相扣</p>
<div>世界美好與你環環相扣</div>
</body>
9，盒子模型 css屬性
9，<!-- 盒子模型 ，css屬性-->
<head>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*外邊距*/
/* margin: 50px; */
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/*
設置盒子的屬性，讓width和height就是最終盒子的大小
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
</body>