htmlcss新手入門?Html<link />導入外部資源，現在小編就來說說關于htmlcss新手入門?下面内容希望能幫助到你，我們來一起看看吧!

htmlcss新手入門

Html

<link />導入外部資源

塊狀标簽：<p>,<h1>到<h6>,<table>,<ul>,<div>等等<span>

行内标簽: <a>,<img>,<span>等等

<br />換行

<hr align="對齊" color="顔色" size="粗細" width="寬度" />水平線

<b></b>,<strong></strong>粗體

<i></i>斜體

特殊字符

用來顯示空格

表單

<form name="表單名稱" action="提交的服務器的路徑" method="提交的方式"></form>

1）action用來指示由誰來處理表單，默認為當前頁面

2）post方式是将數據打包成一個數據快來發送，所以比較安全并且可以發送大量數據;

get方式不打包數據，隻能發送少量數據，但是速度快；默認為get;

輸入控件

<input type="類型" size="顯示寬度" name="名稱" />

注意：

1）同名的單選框會自動形成一組，一個組中隻能選一個

2）在一個組中的複選框最好也同名

屬性說明：

1）type取值可以有多個，eg:

text:默認值,單行文本框

password:密碼框

radio:單選框

checkbox:複選框

file:文件域(用于上傳文件)

button:普通按鈕

submit:提交按鈕

reset:重置按鈕

image:圖像按鈕

2）value:提交的值

3）maxlength:允許輸入的最大長度

4）readonly:設置為隻讀

5）disabled:設置為禁用

<textarea name="名稱" cols="列數" rows="行數></textarea>文字域

<buttom></buttom>定義按鈕

select下拉框

1）格式

<select name="名稱">

<option value="值1">選項1</option>

<option value="值2">選項2</option>

...

</select>

注意：

選項1和2不會提交，真正提交給服務器的是value屬性的值;

selected表示下拉框的選項被選中;

checked表示複選框或單選框被選中;

表單驗證

1.required必填驗證

2.表單匹配驗證

<input type="email"/>

<input type="date"/>

3.驗證輸入範圍

<input type="number" min="18" max="35" step="5"/>

4.設置自定義的提示信息

<input type="email" oninvalid="setCustomValidity('提示信息')"/>

表單end

<img alt=“提示信息” title=“提示信息” src=”圖片路徑”"align="對齊方式"

border="邊框大小" width="寬度" height="高度" />插入圖片

音頻标簽

1）格式：

<audio width="寬" height="高" src="路徑" controls="controls">

您的浏覽器不支持audio标簽

</audio>

視頻标簽：将audio換成video即可

超鍊接

<a href=”鍊接位置”target="目标窗口" ></a>

注意：

_self:表示在當前窗口打開;

_blank：表示在新窗口中打開

a:link 未點擊的超鍊接樣式

a:hover 鼠标懸停在超鍊接上的樣式

a:active 點擊時未釋放的超鍊接樣式

a:visited 訪問後的超鍊接樣式

<ul><li></li></ul>無序列表

<ol><li></li></ol>有序列表

<dl></dl>自定義列表<dt></dt>标題<dd></dd>标題的描述

<table></table>表格

1）border:邊框

2）cellspacing:設置格子之間的距離

3）cellpadding:設置格子邊框和内容的

<caption></caption>總表頭

<tr></tr>行

<td colspan="列數" rowspan="行數></td>單元格

<thead></thead>表頭

<tbody></tbody>表格内容

<tfoot></tfoot>表注

<style></style>css樣式

Css

背景

background複合屬性

background-color:關鍵字 | rgb()| #6個十六進制的數 背景顔色

background-image:url(圖片路徑)背景圖片

background-position:參數1 參數2;背景圖片位置

參數1控制水平方向x定位

參數2控制垂直方向y定位

background-repeat:repeat | no-repeat |repeat-x | repeat-y背景圖片如何重複

background-size背景圖片大小

1.線性漸變

1）不重複

background:linear-gradient(角度或方向,顔色1，顔色2...);

2）重複

background:repeating-linear-gradient(...)

2.徑向漸變(注意：當容器是正方形時，徑向漸變永遠是正圓形)

1）不重複 radial-gradient(...)

2）重複 repeating-radial-gradient(...)

邊框

border複合屬性

border-style: solid/dashed/none邊框樣式

border-width:邊框的寬度

border-color:邊框的顔色

border-bottom下邊框

border-left左邊框

border-right右邊框

border-top上邊框

border-radius圓角矩形

border-image邊框圖片

盒子

box-shadow:水平距離 垂直距離 模糊半徑 顔色；盒子陰影

Color

opacity透明度

尺寸

height元素高度

max-height最大高度

min-height最小高度

width元素寬度

max-width最大寬度

min-width最小寬度

列表

list-style列表屬性

list-style-image:url(圖片路徑)列表圖像

list-style-position列表項位置

list-style-type列表項形狀

外邊距

margin複合屬性

margin-bottom下邊距

margin-left左邊距

margin-right右邊距

margin-top上邊距

内邊距

padding複合屬性

padding-bottom下邊距

padding-left左邊距

padding-right右邊距

padding-top上邊距

定位屬性

bottom下距離

top上距離

right右距離

left左距離

cursor光标顯示形狀

display轉變元素類型

1）block:塊狀

2）inline:行級

3）none:無（隐藏并且不占據位置）

float：left/right/none浮動

overflow當元素溢出時發生事件

position定位類型

1.static靜态定位(默認值)

1)保持在标準文檔流中默認的位置，不做任何移動

2)left,top等屬性無效

2.relative相對定位

1)相對于原來的位置進行偏移，可以用left,top,right,bottom設置偏移量

2)不會脫離标準文檔流

3.absolute絕對定位

1)默認以浏覽器的左上角為坐标原點，水平向右是X正軸,垂直向下是Y正軸線

2)會脫離标準文檔流

3)z-index決定元素的疊放次序,值越大越在上面

4.fixed固定定位

1)脫離了标準文檔流

2)始終以浏覽器左上角為坐标原點

vertical-align垂直對齊方式

visibility設置元素是否可見

z-index元素堆疊順序

字體

font-family字體

font-size字體大小

font-weight字體粗細

color: 字體顔色

文本屬性

direction書寫方向

letter-spacing字符間距

line-height行高

text-align文本水平對齊方式

text-decoration設置文本修飾(下劃線)

text-indent首行縮進

text-shadow:水平距離 垂直距離 模糊半徑 顔色; 文本陰影

text-transform文本的大小寫

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!