HTML常見標籤
頭標籤
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="1"/>每一秒自動刷新
<meta http-equiv="refresh" content="1;url=http://www.baidu.com"/>每一秒自動跳轉到url地址
</head>
普通標籤
<p>:段落標籤
<h1>
<h6>以次減小，成段展示，加粗
<strong>加粗</strong>
<em>斜體
<del>中劃線
容器，可以綁定操作
<div>
<span>
空格，回車：文本分隔符
 ；空格
<<
>>
<br>回車
<hr> 水平線
圖片，超鏈接
<img src="" alt="" title="">
作用：插入圖片
src:url，相對路徑，絕對路徑
alt:當網速不好時，圖片加載不出來便會顯示其屬性值
title:當鼠標放在圖片上時，會顯示其屬性值
<a href="" target="_blank"></a>
target：_blank是在新空白頁打開
<a href="tel:電話號碼"></a>
撥打電話
<a href="mailto:郵件地址"></a>
發郵件
<a href="#id"></a>
當作錨點，連接到id區域
form表單
- 類型，屬性名，屬性值
- 對於多選和單選以及下拉菜單，設置默認值爲checked=“checked”
<form action="" method="get/post">
<p>
<!--輸入框的值就是值，value-->
username:<input type="text" name="" value="輸入框中的默認值"
</p>
<p>
password: <input type="password" name="">
</p>
<p>
<input type="submit" value="login">
</p>
<p>
<!--單選,同一個單選題目的name屬性值相同-->
<input type="radio" name="uname" value="">
</p>
<p>
a <input type="radio" name="uname"
value="a" checked="checked"><!--默認選中-->
</p>
<p>
b <input type="radio" name="uname"value="b">
</p>
<p>
c<input type="radio" name="uname" value="c">
</p>
<p>
<!--多選,同一個多選題目的name屬性值相同-->
<input type="checkbox" name="uname" value="">
</p>
<p>
a <input type="checkbox" name="uname" value="a">
</p>
<p>
b <input type="checkbox" name="uname"value="b">
</p>
<p>
c<input type="checkbox" name="uname" value="c">
</p>
</form>
下拉菜單
<form>
<select name="qqq">
<option value="111">111</option>
<option value="222">222</option>
</select>
<input type="submit">
</form>
小案例
onfocus 事件：當 input 輸入框獲取焦點時執行一段 Javascript代碼：
onblur 事件：當用戶離開input輸入框時執行一段Javascript代碼：
實例
當 input 輸入框獲取焦點時執行一段 Javascript代碼：
<html>
<head>
<meta charset ="utf-8">
<title>msn</title>
<script>
function jujiao(x)
{
if(x.value=='請輸入關鍵字')
{
x.value='';
x.style.color='#424242';
}
}
function likai(x)
{
if(x.value=='')
{
x.value='請輸入關鍵字';
x.style.color='#999999';
}
}
</script>
</head>
<body>
<form action="" method="">
<input type="text"
value="請輸入關鍵字"
style="color: #999999"
onfocus="jujiao(this)"
onblur="likai(this)">
</form>
</body>
</html>
主流瀏覽器及其內核
| 主流瀏覽器 | 內核 |
|---|---|
| IE | trident |
| Firefox | Gecko |
| Google Chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
css
- 三種引入方式
- 同步與異步
- 選擇器4種
- 選擇器優先級
- 引入方式的優先級
- 權重
- css屬性
1、選擇器優先級
<div id="a"></div>
<div class="b"></div> <div class="c d"></div>//兩個class
<!-- 屬性選擇器 -->
<!-- [屬性] --> 或者<!-- [屬性="屬性值"] -->
<!-- 屬性和class優先級相同 -->
<!-- 標籤選擇器 -->
<!-- 通配符選擇器 * -->
！important
2、css權重，並且權重之間是256進制
!imporant infinity
行間樣式 1000
id 100
class|屬性|僞類 10
標籤選擇器|僞元素 1
通配符選擇器 0
3、border
4、text文本
- text-align
- line-height 實現水平垂直居中
- text-decoration:四個值
- text-indent:首行縮進
text-indent: 2em;單位：em 是相對單位， 1em=1 font-size; - cursor
cursor: pointer;
5、僞類選擇器
- 在標籤後加上僞類選擇器，比如’:hover’選擇器
a:hover{
backgroung-color:#f40;
}
6、inline 壓縮
7、先定義功能
符合模塊化開發，提高效率，複用性，適合團隊合作
8、開發前對一些標籤初始化，可以修改一些標籤的功能。初始化時，可以使用通配符，因爲通配符的權重爲0（不明白）。
9、行級元素和航機塊元素有文字特性，文字分隔符，解決圖片間隔問題
<img src="../qq截圖/n.jpg"><img src="../qq截圖/n.jpg">
10、position
<!-- <em>1</em> -->
<!-- 爲什麼通配符好 -->
<!-- 盒子模型 四個屬性，三個屬性，盒模型計算問題
盒子的寬高不包括margin-->
<!-- body有一個margin=8px -->
<!-- opacicy -->
<!-- 層模型，absolute,relative,想對於原來位置平移 ;fixed;居中-->
<!-- margin是在原有位置上移動。position是按照規則移動 -->
小案例
五環，實現居中，並且隨着窗口改變
<html>
<head>
<meta charset="utf-8">
<title>msn</title>
<style>
*{
margin: 0px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid black;
}
.circle1{
border-color: crimson;
position: absolute;
left: 0px;
top:0px;
}
.circle2{
border-color: darkgoldenrod;
position: absolute;
left:130px;
top:0px;
}
.circle3{
border-color: yellow;
position: absolute;
left:260px;
top:0px;
}
.circle4{
border-color: aquamarine;
position:absolute;
top: 70px;
left: 65px;
}
.circle5{
border-color: purple;
position:absolute;
top: 70px;
left: 195px;
}
.contain{
/* border: 2px solid black; */
width: 380px;
height: 190px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -95px;
}
</style>
</head>
<body>
<div class="contain">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
效果圖
11、margin
- 相對於父容器進行調整
- Margin塌陷：通過除法pfc解決
- float,position,inline-block,overflowa;hidden會觸發bfc
12、float
- 清除浮動可以使塊級元素作爲父級元素時被浮動的子元素撐開,利用僞元素。
- 設置position或者float之後，會變成行級塊元素
- 自動變成行級塊元素
- 可以寫出文字環繞圖片的效果
- 清除浮動：
僞元素時行級元素
ul::after{
float: left;
content: '';
display: block;
clear: both;
}
13、單行文本溢出
.container{
width: 500px;
height: 30px;
border: 1px solid #f40;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本…
14、背景圖片 background-image: url();
- 圖片代替文字應該如何代替？
<html>
<head>
<meta charset="utf-8">
<title>圖片代替文字</title>
<style>
a{
display: inline-block;
width: 270px;
height: 0px;
padding-top:129px;
line-height: 30px;
background-image: url(https://www.baidu.com/img/bd_logo1.png?where=super);
overflow: hidden;
background-size: 270px 129px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -185;
margin-top:-64.5px;
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.baidu.com">百度</a>
</div>
</body>
</html>
15、塊級元素可以套任何元素，行級元素只能套行級元素。但是p標籤不能套塊級元素
16、文本類元素和文字底對齊。如果文本類元素中有文本，則文本和裏面的文本底對齊。
調節對齊線：
17、水平漸變
linear-gradient(方向,color1,color2,.....);
只寫顏色：默認從上到下
方向有：to top,to bottom,to left,to right
可以添加透明度，color使用rgba(r,g,b,0~1)
0代表透明，1代表不透明
18、徑向漸變
background-image: radial-gradient(shape size at position,
start-color, ..., last-color);