重溫html和css

時間 2019-11-18

標籤重溫 html css 欄目 HTML 简体版

原文原文鏈接

----------------------------------------------------------------普通html標籤-------------------------------------------------------------------------php

一、p標籤css

<p>段落內容</p>具備分行的做用html

二、strong和em強調瀏覽器

strong用於加粗強調。em用於斜體強調服務器

三、span標籤post

span標籤是沒有語義的，它的做用就是爲了設置單獨的樣式用的，在head中定義格式後直接調用優化

四、q標籤引用（如圖）ui

五、blockquote標籤spa

瀏覽器對<blockquote>標籤的解析是縮進樣式。以下圖所示：3d

六、 標籤輸入空格

在html中直接輸入space空格鍵在瀏覽器上是不會顯示的，需用 效果如圖；

七、<hr />水平橫線標籤

<hr/>和<br />標籤同樣也是一個空標籤，因此只有一個開始標籤，沒有結束標籤。效果如圖

八、<address>標籤

通常用於對地址進行瀏覽器上的斜體顯示，如<q>標籤，如圖

九、<code>一行代碼顯示標籤

用法：<code>代碼語言</code>

下圖一未加入了code的效果圖，圖二爲代碼加了code效果圖

十、<pre>多行代碼顯示標籤

如圖：

十一、<ul>新聞信息列表標籤

如圖：

十二、<ol>順序排列標籤

1三、<div>標籤

在網頁製做過程過中，能夠把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的做用就至關於一個容器。

div就是把整個網頁劃分紅每個小小的部分，CSS在對每個小部分美容美化。

①給div命名

<div id="版塊名稱">…</div>，最右圖爲效果圖對比

------------------------------------------------------------------------------------------------------------------------------------------------------------

表格

1四、<table>標籤

<tr>決定行數爲大標籤，<th>爲表格表頭標籤，做用於文字，<td>爲表格的一個單元格

<table>做用對比：無table狀況

對於<thead><tbody> 和<tfooter>的理解

【轉】爲了讓大表格(table)在下載的時候能夠分段的顯示,就是說在瀏覽器解析HTML時，table是做爲一個總體解釋的，使用TBODY能夠優化顯示。若是表格很長，用tbody分段，能夠一部分一部分地顯示，不用等整個表格都下載完成。下載一塊顯示一塊，表格巨大時有比較好的效果。
    tbody、tfoot、thead通常來講用得不是不少，對於比較複雜的頁面，頁面的排版用到了不少的表格，表格的結構也就相對的複雜了，因此又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別用: thead, tbody, tfoot來標註。
thead　表格的頭        用來放標題之類的東西
tbody　表格的身體    放數據本體
tfoot　表格的腳       放表格的腳註之類
我以爲最直接的用處是：
TBODY包含行的內容下載完優先顯示，沒必要等待表格結束.另外，還須要注意一個地方。表格行原本是從上向下顯示的。可是，應用了thead/tbody/tfoot之後，就「從頭到腳」顯示，無論你的行代碼順序如何。也就是說若是thead寫在了tbody的後面，html顯示時，仍是以先thead後tbody顯示。

1五、用css對錶格進行邊框處理

1六、<caption>爲表格添加標題和摘要

①一樣也能夠用css對caption等標籤進行樣式設定 ②<caption>標籤不固定擺放位置，但最好是固定存放於某個位置

1七、summary標籤

summary 屬性規定表格內容的摘要。
summary 屬性不會對普通瀏覽器中產生任何視覺變化。
簡單的說就是表格的解釋這個表格主要用來存什麼的作什麼的
可是在瀏覽器中看不到任何效果只有查看源代碼的時候能看到也就至關因而一個解釋說明這個表格是用來作什麼的

----------------------------------------------------------------我是表格和連接的分界線------------------------------------------------------------------------ 連接

1八、<a>標籤的連接

<a  href="目標網址"  title="鼠標滑過顯示的文本">連接顯示的文本</a>
①其中的title並非虛設，做用見下圖；

（使用 title 屬性，只是可讓鼠標懸停在超連接上的時候，顯示該超連接的文字註釋。

該屬性是可選的，建議加上，該屬性能夠輔助用戶更好的理解你的超連接用處。）

②target="_blank在新窗口打開連接

<a href="目標網址" target="_blank">click here!</a>

1九、用mailto在網頁中連接email地址

用法示例

1九、<img>標籤爲網頁加入圖片

一、src：標識圖像的位置；

二、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

三、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

四、圖像能夠是GIF，PNG，JPEG格式的圖像文件。

--------------------------------------------------------------------我是連接和數據交互的分界線---------------------------------------------------------------

數據交互

20、用表單數據與用戶進行交互------<form method="傳送方式" action="服務器文件">

交互：表單是能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據。------------------------------如何處理？

1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。

2.action ：瀏覽者輸入的數據被傳送到的地方,好比一個PHP頁面(save.php)。

3.method ：數據傳送的方式（get/post）。

4.text爲文本框password爲密碼框

2一、<textarea>文本域

一、<textarea rows="行數" cols="列數">文本</textarea>

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

如圖：

2二、用戶選擇、單選/複選框

用法：<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

一、radio單選框， checkbox複選框

二、value：提交數據到服務器的值（後臺程序PHP使用）

三、name：爲控件命名，以備後臺程序 ASP、PHP 使用

四、checked：當設置 checked="checked" 時，該選項被默認選中,下圖爲check效果

注意:同一組的單選按鈕，name 取值必定要一致，好比上面例子爲同一個名稱「radioLove」，這樣同一組的單選按鈕才能夠起到單選的做用。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、複選框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>性別:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender"   />
</form>
</body>
</html>

2二、注：關於label標籤

<label> 標籤爲 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

注：<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

試用代碼：

<html>
<body>

<p>請點擊文本標記之一，就能夠觸發相關控件：</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

2三、select下拉列表框

下圖爲select默認選擇設置，如checked=「checked」

2四、select multiple多個下拉選擇

用法以下

2五、submit 提交數據

用法：<input   type="submit"   value="提交">

①type：只有當type值設置爲submit時，按鈕纔有提交做用

②value：按鈕上顯示的文字

2六、reset重置信息

2七、form表單中的label標籤

<label for="控件id名稱">

22點處對此有解釋

注：用於與用戶交互的value的做用不同

------------------------------------------------------------------表單交互結束---------------------------------------------------------------------------------------------------------------------------------------------------下一篇css----------------------------------------------------------------------------------

1. 重溫HTML和CSS3
2. 重溫HTML
3. html css重點
4. HTML和CSS簡介重點總結
5. 36、重新複習html和css之二
6. HTML 和 CSS基礎大綱重點
7. Day6:html和css
8. Day2:html和css
9. HTML和CSS
10. html和css
更多相關文章...
• Web 品質 - 重要的 HTML 元素 - 網站品質教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• IntelliJ IDEA 代碼格式化配置和快捷鍵
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。