web基礎
阿新 • • 發佈：2020-09-02
Web網頁：
結構 表現 行為
html：標記 語義
  空格
< <小於號
> >大於號
& &號
" 雙引號
文字標籤
<body>
==============文字標籤=============
<h> </h> 標題標籤
<br> 換行
<p> </p> 段落
<span> </span> ？？
----可通過css實現----
<sup> </sup> 上註腳
<sub> </sub> 下注腳
<b> </b> 加粗
<u> </u> 下劃線
<del> </del> 刪除線
=============圖片==============
<img src="圖片路徑" alt="圖片沒顯示時出現的內容"title="滑鼠懸停時顯示內容"> 圖片
----樣式屬性----
width：寬度 px
height：高度 px
==============超連結==============
<a href="要跳轉資源的"></a> 超連結
target：目標顯示的視窗，預設當前視窗
---可以做錨點---
href=#top 跳轉頁面頂部
a有預設顏色和下劃線
============列表==========
1.無序列表
<ul> 前面有黑點 list-style-trpe:square 把黑點改成方形
<li>巢狀文字或超連結</li>
</ul>
2.有序列表
<ol> 前面有序列號
<li></li>
</ol>
3.自定義列表
<dl>自定義列表
<dt>列表項</dt>
<dd>說明</dd>
===========表格=========
<table>
<tr> 行
<th>表頭單元格</th> 文字自動加粗居中
<td> 每行的單元格
</td>
</tr>
</table>
----------屬性----------
1.width：寬 table td
height： 高 table tr td
2.border：加邊框 可=1
-collapse 合併邊框線
-top 上邊框
-radius 做圓角
-bottom 下邊框
3.align：水平方向
valign：垂直方向
=center 居中
=left
=right
4.rowspand: 跨行 =2 向下侵佔兩行
colspand：跨列 =2 向後侵佔兩列
5.bgcolor 背景色
6.cellpadding 內容到邊框的距離
cellspacing 單元格之間間隙
caption 給表格起名字
=============表單===========
<form action="後臺url地址">
method 提交請求方式
預設get：不安全，url直接拼接請求引數
post：相對安全
<input type="">
1.1=text 文字框
1.2=password 密碼框
1.3=submit 提交按鈕
1.4=checkbox 複選框
1.5=radio 單選按鈕 name屬性值相同，value不同實現2選1
1.4，1.5 checked 預設選中
1.6=reset 重置按鈕
1.7button 普通按鈕
屬性：name 表示請求引數
value 表示對應引數值
<select name="" id=""> 下拉框
<option value="">下拉框內的值</option>
selected 預設選中
</select>
<button> 註冊</button> 按鈕
<textarea name="" id="" cols="列" rows="行">文字域</textarea>
</form>
</body>
CSS ：Cascading Style Sheet 層疊樣式表
註釋 /* */
樣式格式
樣式名:值
多個樣式之間;分割
使用：
1.內聯式 在標籤內部 style="樣式1;樣式2;"
2.內部式 <style></style> 一般把style放在head中
使用選擇器寫樣式表
3.外部式 連結使用css html head中通過<link/>引用外部樣式檔案 (.css) css檔案寫選擇器樣式
4.匯入式 style 標籤中 @import 引入外部樣式
優先順序：同一個元素同一個樣式進行設定
行內樣式>內嵌樣式>連結樣式>匯入樣式
開發中 主要通用樣式css檔案+style
選擇器：篩選元素
基本選擇器
標籤選擇器：按照標籤名選擇
標籤名{樣式表}
類選擇器
定義
.類選擇器名{樣式表}
使用 標籤使用class屬性 class屬性值可以相同
一個標記可以使用多個類選擇器 class="selector1 selector2 "
id選擇器
定義 #選擇器名字{}
使用 id屬性 id屬性值唯一
其他選擇器：
後代（掌握）
兄弟
+:相鄰
~:向下兄弟
並集（掌握）
*（掌握）
a的選擇器：
a:link{}
a:visited{}
a:hover{滑鼠懸停是的樣式
}
a:active{}
樣式：
基礎樣式
文字：
1.font-
family :字型 常用字型是微軟雅黑 宋體
style：風格 斜體顯示
weight：加粗效果 取值 bold bolder
size:字號 px 預設16px
連寫 font：
font-style font-weight font-size font-family
2.顏色 ：color 取值：16進位制顏色值
文字
3.文字樣式
text-
indent：首行縮排 單位em
shadow： 水平方向 垂直方向 [模糊值] [顏色]
text-decoration:裝飾線
text-align: center; 文字水平居中
line-height:行高
4.背景：
背景色：background-color
/*背景圖片*/
background-image:url("images/bgimg.jpg");/*路徑*/
background-size: cover;/*背景大小*/
background-position: center;/*位置 水平方向 垂直方向*/
background-attachment: fixed;/*背景圖固定*/
background-repeat:no-repeat;/*背景圖不重複顯示*/
連寫：
background: greenyellow url("images/bgimg.jpg") no-repeat center fixed;
background-size: 50%;
5.常用樣式：
a預設有顏色 、下劃線
列表：list-style：列表項的符號 none
width:寬度 px
height:高度 px
不是所有的標籤都可以設定寬高
border:邊框
display：標籤的顯示模式（行塊變化）inline-block
按鈕：
標籤分類：
1.行標籤 a span
共享一行
width height 不起作用
2.塊標籤 ul li p div
獨佔一行 width height 有效
3.行內塊 input img
共享一行 width height 有效