HTML學習筆記
1) 結構標籤<html>;<body>;<head>;<title><title>——標題
2) 防亂碼標籤<metacharset="UTF-8">
3) 標題標籤<h1>——<h6>
4) 段落標籤<p>
5) 下劃線<u>
6) 刪除標籤<s>
7) 列表標籤無序列表<ul>有序列表<ol>
8) 表格標籤內容
9) <table>表格標籤
10)<border>表格線標籤
n 1線框solid-實線dotted-點線dashed-短橫線doubt-雙線
n 2邊框顏色
n 3邊框寬度
n <align>在網頁中位置標籤
n <width>寬度
n <height>高度
n <cellpadding>單元格間距
n <cellspacing>表格線間
n <tr>行
n <td>列
n <th>__表格裡標題標籤—有加粗,和居中效果可充當<td>
插入圖片
colspan="5"是合併五列的意思,表示這個單元格要佔五列
rowspan="3"是合併三行的意思,表示這個單元格要佔三行
<imgsrc="圖片名稱"/>
<tr><tdrowspan="">合併單元格——行
<tr><tdcolspan="">合併單元格——列
p{color:;
width:____段落長度
text-indent:首行縮排大小
font-size:字型大小
text-decoration:underline;-段落下劃線
line-height:行高
text-align文字對齊方式centerorleft、reight
html表單標籤:
<inputtype="text"/><inputtype="button"value="我是按鈕"/>
搜尋框
Value後加標籤名稱
Button按鈕
Type=”text”—文字框
滑鼠屬性:手型cursor:pointer;
CSS知識點
內部樣式表
<styletype="text/css"></style>
body{
color:color前可加下面的文字前標籤名來確定顏色
font-size:________字型大小列入
h1{color:"";
}
類選擇器<h1class="小的類名">
font-family:"字型"
font-weight:bold;粗細
font-style:italic;傾斜
margin=0auto
overflow:hidden?
*{margin=0
Padding=0}
position=absolute——絕對定位在瀏覽器中右上角為(0,0)lefttop
position=relative——相對定位相對於之前的位置做出移動,以圖形本來位置的右上
角為(0,0)
——————在上一級中相對定位可以,可以改變下一級的絕對定位的原點
}
外部樣式表標籤style.css---外部表格
<linkhref="style.css"rel="stylesheet"type="text/css">
行內元素:加粗,傾斜
塊級元素(可設定寬高):標題標籤,塊級標籤
一、塊級標籤
1.獨佔一行,不和其他元素待在同一行給定要居中的塊級元素的寬度。塊級標籤居中的不同方式margin0auto
2.能設定寬高
常見的塊級標籤:div,p,h1-h6,ul,li,dl,dt,dd
程式碼:<p>我們是p標籤</p>
<p>我們是p標籤</p>
<p>我們是p標籤</p>
在瀏覽器開啟顯示。
二、行級標籤
1.能和其他元素待在同一行
2.不能設定寬高①設定display:block;②給定要居中的行內元素的寬度。(行內元素設定成塊級元素後可以對其寬高進行設定)行內元素text-align文字方式對齊
常見的行級標籤:a,span,strong,u,em-->
程式碼:<ahref="">hello</a>
<ahref="">hello</a>
<ahref="">hello</a>
三、行內塊標籤
1.能和其他元素待在一行
2能設定寬高:設定display:block。(如input、button、img等元素,自頻寬度可以不用設定其寬度)
常見的行內塊標籤:img,input,textarea
程式碼:<imgsrc="meinv.jpg"/>
<imgsrc="liang.jpg"/>
overlow:hidden;div達不到你想要的結果
margin:0auto;在不同場景下生效條件如下: