HTML常用標籤及表格、表單、列表

阿新 • • 發佈：2019-02-10

1:HTML常用標籤

<a href=" ">這是一個連結</a>  
        //href="#"空連結
<a href=" " target="_blank">新視窗開啟</a>
<b>加粗文字</b>
<i>斜體文字</i>
<code>電腦自動輸出</code>
<sub>下標</sub> 
<sup>上標</sup>
<base href="//www.w3cschool.cn/images/" target="_blank" 
> 
      //預設連結
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
      //連結到樣式表
<script type="text/javascript" src="js/modernizr.js"></script> 
      //連結到js檔案   
<img src="url" alt="some_text" width="304" height="228">
      //插入圖片，alt指預備替換文字，最好指定寬高

2:表格

HTML 表格的基本結構：
  <table 
>…</table>：定義表格
  <th>…</th>：定義表格的標題欄（文字加粗）
  <tr>…</tr>：定義表格的行
  <td>…</td>：定義表格的列

例：
<table border="1">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td> 

</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

顯示如下：

A	B
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

3：列表

1）無序列表

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

顯示如下：

咖啡
茶
牛奶

2）有序列表

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

顯示如下：

咖啡
茶
牛奶

咖啡
茶
牛奶

4：表單

文字欄位：
<form action="">
Name : <input type="text" name="name"><br>
Age : <input type="text" name="age">
</form>

密碼欄位：
<form action="get">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

單選：
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

複選框：
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

下拉列表：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

文字域：
<textarea rows="10" cols="30">
我是一個文字框。
</textarea>

提交按鈕：
<input type="submit" value="提交">

表單傳送電子郵件：

<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
send time:<br>
<select name=time>
<option  value="2015">2015</option></br>
<option value="2016">2016</option></br>
<option  value="2017">2017</option></br>
</select></br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Name:

E-mail:

Comment:

send time:
2015 2016 2017

5：基本格式：

<!DOCTYPE html>
<html>
<head>
 <title>title of the document</title>
 <link rel="stylesheet" href="css/font-awesome.min.css">
 <script type="text/javascript" src="js/modernizr.js"></script>    
 <style>
 ...css描述
 </style>
 <script>
 ...script描述
 </script>
</head>

<body style="background-color:yellow;">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</body>
</html>

6：meta元素

為搜尋引擎定義關鍵詞:    
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網頁定義描述內容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">

定義網頁作者:    
<meta name="author" content="Hege Refsnes">

每30秒鐘重新整理當前頁面:   
<meta http-equiv="refresh" content="30">

HTML常用標籤及表格、表單、列表

1:HTML常用標籤 <a href=" ">這是一個連結</a> //href="#"空連結 <a href=" " target="_blan

前端html--超連結，表格，表單屬性

1. 圖片與超連結 1. 圖片標籤 <img src=""> 預設按照圖片原始尺寸顯示標籤屬性： 1. width : 取px為單位的畫素值，設定圖片寬度 2. height : 取畫素值，設定圖片的高度 3. title : 用來設定滑鼠懸停於圖片上方時的顯示文字 4. alt : 當圖片載

html常用標籤及特殊字元總結

<p>標籤用於在HTML文件裡定義一個段落。瀏覽器在顯示<p>段落時，將在其前後分別插入一個空白行。這些空白是由瀏覽器在呈現網頁時自動加入的，你也可以用樣式表來指定顯示多少空白。標籤描述 <i> 定義斜體文字 <b> 定

表格和表單、表單的基本結構、表單元素、表單的高階應用、表單語義化

技能目標掌握表格的基本用法掌握表單的用法掌握CSS的高階選擇器的用法表格的基本結構 <table> 行 <tr> 列單元格 <td> 表

HTML常用標籤及屬性

HTML的操作思想網頁中有很多的資料，不同的資料可能需要不同的顯示效果，這個時候需要使用標籤把要操作的資料包起來，通過修改標籤的屬性實現標籤內資料樣式的變化。一個標籤相當於一個容器，想要修改容器內資料的樣式，只需要改變容器的屬性值，就可以實現容器內資料樣式的變化

Web前端-html頁面-01（錨點、表單、個人簡歷）

Web前端學習中-01 先來幾張圖鎮樓! 1.錨點連結 2.單選框圖片背景更換 3.巢狀表格 4.HTML版個人簡歷 5.表單輸入框 6.郵箱登錄檔單程式碼

HTML高階標籤（3）————表單的應用

在HTML開發中，標籤的種類和數量很多，不可能說每一種都研究透。很多可以用CSS來控制的標籤，我們基本沒有必要在上面浪費時間。所以，我們只要掌握在HTML開發中比較常用的標籤就完全可以了。首先，先寫一個最簡單的登入表單。 <html> <head&

前端之路——第三篇：列表、表單、提交按鈕、html佈局、css的display，製造第一個表單提交案例

第三課了，今天知識點至關重要。網頁常用的表單提交！！！就這樣羅列下第三課的知識點吧，不搞水印圖片了。 1.有序列表：語法（<ol><li></li></ol>），<ol>標籤能讓瀏覽器預設帶出排序，教為少用

【第一天】django快速開發——環境部署、表單、數據庫操作、模板、文件學習

django 開發自動化運維系統技術 web開發安裝django1、安裝 setuptoolsyum install python-setuptools2、完成之後，就可以使用 easy_install 命令安裝 djangoeasy_install django註意：django對

HTML5基礎（列表、塊、佈局、表單、實體）

列表常用列表標籤 <ol> 有序列表 <ul> 無序列表 <li> 列表項 <dl> 列表 <dt> 列表項 <dd> 描述無序列表標籤: <ul&g

jQuery——事件篇( 滑鼠、表單、鍵盤、事件繫結和解綁、事件物件、自定義事件)

滑鼠事件 click()與dbclick()事件  <div id="test">點選觸發<div> $("ele").click(function(){ alert('觸發指定事件')

HTML基本標籤、表單相關標籤

HTML基本標籤標題標籤及水平線：標題標籤 <h1></h1>~<h6></h6>標籤在HTML頁面中建立標題，標題預設加粗，換行。水平線在 HTML 頁面中建立一條水平分隔線，用於定義內容中的主題變化

Html-超連結、表格、表單

一. 超連結（a 標籤） 1. 超連結：用來進行頁面之間的跳轉，其中href=“”需要指定要跳轉的連結頁面 target: _self:在當前頁面進行重新整理(預設) _blank:開啟一個新的頁面進行重新整理 _parent:在

第3天：CSS浮動、定位、表格、表單總結

特性 input 器）用戶 style line ie瀏覽器練習 doctype 今天學的是浮動、定位、表格、表單等內容，這些是CSS中最容易混淆的知識，有許多小技巧在寫代碼過程中需要註意。下面是主要知識點：一、float浮動1、塊元素在一行顯示2、內聯元素支持寬高3

【HTML基礎】表格和表單

天津 adding 文字最小 words 常見 jpg checked 搜索引擎本次博客的主要內容如下： meta和link 表格表單 meta和link meta meta的屬性有兩種：name和http-equiv。 name屬性主要用於描述

web前端【第二篇】HTML基礎二（表單、div）

ebe add 渲染 efi end 文件 ctype 發送 type 一、表單功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含text

html基礎筆記-表單、鏈接

包含 color ans 自動刷新 cti 間隔下拉 htm cap <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

HTML+CSS第四課：表單標籤的使用-製作登錄檔單

知識點：表單標籤、表單元素表單在網頁中應用比較廣泛，如申請qq賬號、電子郵箱等，使用者需要首先填寫註冊資訊，然後才能提交；通俗講，表單就是一個將使用者資訊組織起來的容器，將使用者填寫的內容放置在表單容器中，當用戶單擊提交按鈕的時候，表單會將資料統一發送給伺服器！表單的作用

HTML常用元素及標籤

以下內容為HTML的一些基本的操作，掌握這部分內容就可以開始進行網頁的搭建~ HTML基本文件 <!DOCTYPE html> <html> <head> <title>文件標題</title> </hea

HTML表格與表單

表格標籤table tr 代表一行 td 代表一列，以下是一個一行兩列的標籤 <table> <tr> <td></td> <td></td> </tr> </table> tr不能設

HTML常用標籤及表格、表單、列表

1:HTML常用標籤

2:表格

3：列表

1）無序列表

2）有序列表

4：表單

表單傳送電子郵件：

5：基本格式：

6：meta元素

相關推薦