天天看點
傳回

HTML+CSS常用代碼HTML+CSS常用代碼（筆記）

HTML+CSS常用代碼（筆記）

注釋标簽：對代碼進行說明

常用格式标簽 

<b>加粗</b>	
<i>斜體</i>	
<u>下劃線</u>	
<s>删除線</s>	
<p>段落标簽</p>	
<hr>：分割線	
<br>：換行
<sup>上标</sup> 	
<sub>下标</sub> 	
<pre>保留目前格式樣式</pre>
<strong>(粗字型)強調文本</strong>

../：傳回上一級（父級）目錄

标題标簽 

<h1>我是一級标題标簽(最大)</h1>
<h2>我是二級标題标簽</h2>
<h3>我是三級标題标簽</h3>
<h4>我是四級标題标簽</h4>
<h5>我是五級标題标簽</h5>
<h6>我是六級标題标簽(最小)</h6>

清單标簽

無序清單： 

<ul type="disc">	<!--disc:圓點；circle：圓圈；square：方塊-->
   <li>清單項1</li>
   <li>清單項2</li>
   <li>清單項3</li>
</ul>

有序清單： 

<ol type="1">	<!--1，a/A，i/I-->
   <li>清單項1</li>
   <li>清單項2</li>
   <li>清單項3</li>
</ol>

自定義清單：圖文混排 

<dl>
   <dt>标題，圖檔</dt>
   <dd>描述</dd>
</dl>

CSS樣式

  内嵌樣式:放在

<head>

标簽之間

文法：

<style type="text/css">
選擇器名 {
      屬性名:屬性值;
   }
</style>

所有标簽（*） 

* {
     padding:0px;	/*清除預設内邊距*/
     margin:0px;	/*清除預設外邊距*/
   }

文本屬性 

line-height:20px;  		/*行高*/
text-align:center;		/*對齊：Left|right|center|justify*/
text-decoration:none; 	/*文本修飾None：預設|underline：定義文本下的一條線|overline：定義文本上的一條線|line-through：定義穿過文本下的一條線*/
Letter-spacing:5px; 	/*字母之間的間距*/
Text-indent:40px;		/*首行的縮進方式：px/%*/

字型标簽及屬性 

<font>字型标簽</font>

<!--字型CSS屬性-->
<style type="text/css">
    font-size:字型大小（常用機關：px/%/em...）;
	color:顔色;
    font-style:字型樣式;
	font-family:字型系列;
    font-weight:字型粗細;
</style>

例：<font size="6" color="#FF0000" face="微軟雅黑">我是字型标簽</font>

背景相關的屬性 

background-color: red;		/*設定背景顔色*/
background-image: url(圖檔路徑);	/*設定背景圖檔（圖檔路徑沒有引号包裹）*/
background-repeat: no-repeat;	/*設定背景的平鋪方式：Repeat-x、repeat-y、no-repeat*/
Background-attachment: Fixed;	/*設定滾動：Scroll、Fixed*/

background-position: center;	/*設定背景的坐标，偏移量,如left、right、center、button*/
background-position:100px -100px;
/*第一值：左右偏移量，正：向右偏移，負：向左偏移；
 第二值：上下偏移量，正：向下偏移，負：向上偏移*/

background-size:cover;
/*可以為px、%、cover、continue
	cover: 不會造成圖檔失真，會鋪滿整個标簽。
    contain: 不會造成圖檔失真，不會鋪滿整個标簽。
*/

opacity: 0.5;	/*設定透明度，範圍0.0-1.0*/
ontline:0 none;	/*清除預設邊框*/

超連結: 

<a href="網頁的網址" target="_blank">超連結文字或圖檔</a>

_blank:在新視窗打開網頁
_self:在目前自身視窗打開網頁

郵件超連結

圖檔标簽 

<img src="圖檔位址路徑" width="寬度" height="高度" alt="加載失敗提示文字" 
title="滑鼠懸浮提示文字" border="邊框大小" align="圖檔與周圍文字的對齊方式：top/middle/bottom/left/right" 
 vspace="圖檔在垂直方向上與周圍文字的間距"  hspace="圖檔在水準方向上與周圍文字的間距"/>

錨點連結 

<a href="#錨點名">錨點連結：跳轉連結</a>
<a name="錨點名">錨點名:要跳轉到的位置</a>

圖檔滾動 

<marquee scrolldelay="時間延時：毫秒" direction="滾動方向 up down left right">
	
</marquee>

分隔視窗 

<frameset cols="20%,*"></frameset>		<!--左右分割,将左邊架構分割大小為20%右邊架構的大小浏覽器會自動調整-->
<frameset rows="20%,*"></frameset>		<!--上下分割,将上面架構分割大小為20%下面架構的大小浏覽器會自動調整-->
<frameset cols="20%,*"></frameset> 		<!--分割左右兩個架構-->
<frameset cols="20%,*,20%"></frameset> 	<!--分割左中右三個架構-->
<frameset rows="20%,*"></frameset> 		<!--分割上下兩個架構-->
<frameset rows="20%,*,20%"></frameset> 	<!--分割上中下三個架構 -->

例：
<frameset cols="20%,*">
    <frame src="1.html">
    <frame src="2.html">
</frameset>

塊級元素和行内元素

塊級元素：凡是預設自動占滿網頁整行的元素（自動換行），稱為塊級元素

<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...

行内元素：不能占滿網頁整行的元素

<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...

表格标簽

tr:行； td：單元格

<table align="表格對齊方式" border="邊框" bgcolor="背景顔色" height="高度" width="寬度" background="背景圖檔" bordercolor="邊框顔色" cellspacing="單元格外邊距" cellpadding="單元格内邊距" colspan="合并欄(使用數字)" rowspan="合并列(使用數字)">
    <tr align="文本對齊方式">
        <th>姓名</th>
        <th>編号</th>
    </tr>
    	<td>1</td>
        <td>2</td>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

優先級：td > tr > table

跨行：<td rowspan="2">跨2行</td>
跨列：<td colspan="2">跨2列</td>

盒子模型

  網頁中所有的元素都是盒子

盒子組成部分：

HTML+CSS常用代碼HTML+CSS常用代碼（筆記）
content:内容	padding:内邊距
border:邊框		margin:外邊距

居中對齊：

text-align: center;	/*文本居中*/
margin: 0px auto;	/*盒子水準居中*/

盒子屬性 

height:高度		width:寬度

padding、border、margin:都有四個方向：top、bottom、left、right;

例:
<style type="text/css">
    padding-top:50px;
    border-left:50px;
    margin-right:50px;
</style>
           
<style type="text/css">
   width:200px;/*内容寬度*/
   height:150px;/*内容高度*/
   border-width:25px;/*邊框寬度*/
   border-radius: 10px;	/*設定盒子圓角*/
   box-sizing: border-box;	/*設定觸發怪異盒子模型（預設為：content-box）*/
   border-color:red;/*邊框顔色   transparent：透明*/
   border-style:solid;/*邊框樣式 soild：實線，dashed：線虛線，dotted：點虛線*/
</style>

<style type="text/css">
	border:10px red solid;
	等價于：
	border-width:10px;
	border-color:red;
	border-style:solid;


	padding-top:50px;
	padding-bottom:100px;
	padding-left:50px;
	padding-right:100px;

	padding:50px;	/*内邊距上下左右各50px*/
	padding:50px 100px;		/*第一個值:上下  第二個值:左右*/
	padding:50px 30px 100px;	/*第一個值:上  第二個值:左右  第三個值：下*/
	padding:10px 30px 50px 100px;	/*第一個值:上  第二個值:右  第三個值:下  第四個值:左  (順時針方向)*/
</style>

如何標明網頁中某些或某個元素

選擇器：

1、标簽選擇器：标簽名，網頁中所有這樣的标簽都具有相同的屬性

<style type="text/css">
div {
	  width:300px;		/*寬度*/
	  height:250px;		/*高度*/
	  border-width:10px;	/*邊框寬度*/
	  border-color:red;		/*邊框顔色*/
	  border-style:solid;	/*邊框樣式 solid：實線 dashed：虛線  dotted：點虛線*/
  }

2、ID選擇器：#+ID名，選擇網頁中唯一進制素，命名規則同C語言 ，關鍵字：id

#box2	{
	  border-color:blue;
  }

3、類選擇器：.+類名，選擇網頁中具有相同類名的元素 ，關鍵字：class

.style2 {
	  background-color:green;
	  border-color:black;
	  border-style:dashed;
  }

4、僞類選擇器:

a:link		/* 未通路的連結 */
    a:visited	/* 已通路的連結 */
    a:hover		/* 滑鼠移動到連結上 */
    a:active	/* 點選時的連結 */
    這四種不同的狀态必須按照固定的順序寫：
    	:link  :visited  :hover  :active

5、通配符選擇器（*）

/* 清除網頁預設樣式 */
    *{
    	margin: 0;
    	padding: 0;
    }

選擇器優先級：

  !important > ID選擇器 > 類選擇器 > 标簽選擇器 > 通配符選擇器 > 繼承 > 浏覽器預設屬性

樣式有三種使用方式：

内嵌樣式：定義在該标簽裡面的

<div style="width:300px; height:200px; border:5px solid blue; margin:0px auto;">
    <!-- 我是一個盒子 -->
</div>

内部樣式：定義在網頁的

<head>

裡面的

<style type="text/css">
    p{ 
        background: green;
    }
</style>
<body>
    <P>Hello World!</P>
</body>

外部樣式：定義在網頁之外的CSS文本裡面的

樣式使用的優先級為：

   行内樣式表 > 内嵌樣式表 > 外部樣式表

字元實體

HTML+CSS常用代碼HTML+CSS常用代碼（筆記）

表單元素： 

<form action="要送出的網頁" method="post/get"> </form>

post：送出的資料不會在位址欄顯示，安全性好，不限制送出資料的大小。
get：送出的資料會在位址欄顯示，完全性差，限制送出資料的大小。

  常見的表單元素包括文本框、按鈕和下拉清單等。除下拉清單框、多行文本域等少數表單元素外，大多數表單元素均使用

<input>

标簽，隻是他們的屬性設定不同，其統一用法如下：

<input name="表單元素名稱" type="類型" value="值" size="顯示寬度" maxlength="能輸入的最大字元長度" checked="是否選中"/>

文本框： <input type="text" value="jack" maxlength="8" name="account" size="10" readonly="readonly"/>

密碼框：<input type="password" maxlength="8" name="pwd" size="10"/>

  若要實作多個單選按鈕，隻選中一個，前提是保證name屬性值是一樣的，若多個單選按鈕都有checked=“checked”，以最後一個單選按鈕為準。

單選按鈕：<input type="radio" name="sex" value="男" checked="checked"/>

複選框：<input type="checkbox" name="hobby" value="籃球" checked="checked"/>

檔案域：<input type="file" name="photo"/>

下拉清單 

<select name=”指定清單的名稱”size=”行數”>
<option value=”可選擇的值” selected=“selected”>顯示項的内容</option>
<option value=”可選擇的”>顯示項的内容</option>
	……
</select>

多行文本域 

<textarea name=”指定名稱” cols=”列數” rows=”行數”>
	//文本域的内容
</textarea>

重置、送出與普通按鈕，圖像按鈕： 

<input type="submit"  value="送出按鈕的顯示值" name="名稱"/>
<input type="reset"   value="重置按鈕的顯示值" name="名稱"/>
<input type="button"  value="普通按鈕的顯示值" name="名稱"/>
<input type="image" src="imags/Logo.png"/>

去掉頁面中的滾動條 

<body scroll="no">   <!--去掉全部滾動條-->
<body style="overflow-y:hidden">   <!--去掉頁面右邊的滾動條-->
<body style="overflow:scroll; overflow-y:hidden">
<body style="overflow-x:hidden">   <!--去掉頁面底部的滾動條-->
<body style="overflow:scroll; overflow-x:hidden">

自定義滾動條 

body {
	Scrollbar-3DLight-Color: #999999;    /*滾動條亮邊的顔色*/
	Scrollbar-Arrow-Color: #CCCCCC;      /*上下按鈕上三角箭頭的顔色*/
	Scrollbar-Base-Color: #E1E1E1;       /*滾動條的基本顔色*/
	Scrollbar-Shadow-Color: #CCCCCC;     /*立體滾動條陰影的顔色*/
	Scrollbar-DarkShadow-Color: #333333; /*滾動條動條陰影的顔色*/
	Scrollbar-Face-Color: #999999;       /*滾動條凸出部分的顔色*/
	Scrollbar-Highlight-Color: #F2F2F2;  /*滾動條空白部分的顔色*/
	Scrollbar-Track-Color: #F2F2F2;      /*滾動條的背景顔色*/
}
html css web前端
上一篇: GPT-3.5作為目前最先進的自然語言處理模型之一，具備強大的語言了解和生成能力，被廣泛應用于各個領域。然而，受限于技術
下一篇: ·Iamocorinstallmentspecidlist，我是一個汽車分期專員，10yeorsin，10yeorsin

繼續閱讀