HTML常用標籤及表格、表單、列表
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()事件 <!--方法1--> <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不能設