客户端网页基础-HTML
客户端网页编程-HTML
1 HTML简介
1.1 什么是HTML?
1. HTML 是用来描述网页的一种语言。
2. HTML 指的是超文本标记语言: HyperText Markup Language
3. HTML 不是一种编程语言,而是一种标记语言
4. 标记语言是一套标记标签 (markup tag)
5. HTML 使用标记标签来描述网页
6. HTML 文档包含了HTML 标签及文本内容
7. HTML文档也叫做 web 页面
1.2 HTML 标签
1. HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
2. HTML 标签是由尖括号包围的关键词,比如 <html>
3. HTML 标签通常是成对出现的,比如 <b> 和 </b>
4. 标签对中的第一个标签是开始标签,第二个标签是结束标签
5. 开始和结束标签也被称为开放标签和闭合标签
1.3 HTML 元素
- "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
1.4 HTML版本
版本 | 时间 |
HTML | 1991 |
HTML+ | 1993 |
HTML2 | 1995 |
HTML3.2 | 1997 |
HTML4.01 | 1999 |
XHTML | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
1.5 HTML网页结构
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title></title> </head> <body> <h1>这是标题</h1> <p>这是正文</p> <body> </html>
1.6 <!DOCTYPE> 声明
- <!DOCTYPE>声明有助于浏览器中正确显示网页。
- 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。 doctype 声明是不区分大小写的
为什么要定义文档类型?- Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
- HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
- <!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
1.6.1 HTML5
<!DOCTYPE HTML>
1.6.2 HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.6.3 HTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.7 HTML 标签
<meta>
标签提供了 HTML 文档的元数据。元数据不会显示在客户端,当时会被浏览器解析。-
META元素通常用于指定网页的描述,关键词,文件的最后修改,作者,和其他元数据。 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
<head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Ståle Refsnes"> <meta charset="UTF-8"> </head>
2 HTML基础
2.1 HTML 标题
HTML 标题(Heading)是通过<h1> - <h6>
标签来定义的. <h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br>
2.2 HTML 段落
<p>这是一个段落</p>
2.3 HTML 链接
<a href="www.baidu.com">这是一个链接</a> *创建一个描点* <a href="#C4">查看 Chapter 4。</a> <h2><a name="C4">Chapter 4</a></h2>
2.4 HTML 图像
<img src='images/1.jpg' width='100px;' height='200px;'/>
2.5 HTML <br>
标签
<br> 标签插入一个简单的换行符。
<br> 标签是一个空标签,意味着它没有结束标签。
2.6 HTML <hr>
标签
是一个分割线
<h1>HTML</h1> <p>HTML is a language for describing web pages.....</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.....</p>
2.7 HTML 注释标签
<!--这是一个注释,注释在浏览器中不会显示-->
3 HTML格式标签
3.1 HTML 标签
<abbr> 标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。 The <abbr title="ZhongGuo">zg</abbr>
3.2 HTML <address>
标签
如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系 信息 <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</ a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
3.3 定义粗体的文本
1.根据 HTML 5 的规范, 标签应该做为最后的选择,只有在没有其他标记比较合适时才使用它,重要的文本应该用 标签表示。
-
<strong>html5 should bu use</strong>
-
被标记的或者高亮显示的文本应该用
<mark>
标签表示。<mark>mark text</mark>
-
被强调的文本应该用
<em>
标签表示,斜体突出强调<em>被强调的文字</em>
提示:也可以使用 CSS 的 "font-weight" 属性设置粗体文本
3.4 HTML <bdo>
标签
<bdo>
标签用来覆盖默认的文本方向。
值:ltr(从左开始)、rtr(从右开始)。
<bdo dir="rtl"> This text will go right-to-left. </bdo>
3.5 HTML <i>
标签
<i>
定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
3.7 HTML <ins>
标签
<ins> 标签定义已经被插入文档中的文本。 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
3.8 HTML <pre>
标签
<pre>
标签可定义预格式化的文本。-
被包围在
<pre>
标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。3 + 2 = ------ 5
3.9 HTML <q>
标签
<q>
标签定义一个短的引用。
<p>徐老师说:
<q>你们即将引来一个痛苦的阶段</q>
但是总能熬过</p>
3.10 HTML <u>
标签
使用 <u>
标签为文本添加下划线:
This is a parragraph.
提示:尽量避免使用此标签,用户会把超链接和下划线混淆。
4 HTML表单
4.1 <form>
标签
什么是表单?
- 表单是一个包含表单元素的区域。
- 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
<form action="demo_form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>
4.2 <input>
标签
<input>
标签规定了用户可以在其中输入数据的输入字段。
<input type="text" name="fname"><br>
4.3 <textarea>
标签
- 定义了一个多行文本框
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。
- maxlength,规定文本区域允许的最大字符数。
- readonly,规定文本区域为只读。
-
disabled,规定禁用文本区域。
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
4.4 <button>
标签
<button>
标签定义一个按钮。-
在
<button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用<input>
元素创建的按钮之间的不同之处。按钮的两种方式:
<input type='button'/ value='按钮'> <button>按钮</button>
属性列表
属性 | 属性值 | 作用 |
disabled | disabled | 规定应该禁用该按钮。 |
formaction | URL | 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。 |
4.5 <select>
元素用来创建下拉列表。
<select>
元素用来创建下拉列表。-
标签定义了列表中的可用选项。<select>
元素中的<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
属性 | 属性值 | 作用 |
disabled | disabled | 规定应该禁用下拉列表。 |
multiple | multiple | 当该属性为 true 时,可选择多个选项。 |
size | number | 规定下拉列表中可见选项的数目。 |
4.6 <label>
标签
<label>
标签为 input 元素定义标注(标记)。
<label for="male">Male</label>
4.7 <fieldset>
标签
<fieldset>
标签可以将表单内的相关元素分组。-
<fieldset>
标签会在相关表单元素周围绘制边框。<form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
4.8 单选按钮 Radio Buttons
<input type="radio"> 标签定义了表单单选框选项 <form> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form>
4.9 复选框(Checkboxes)
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 <form> <input type="checkbox" name="vehicle" value="ball">篮球<br> <input type="checkbox" name="vehicle" value="Car">汽车 </form>
4.10 提交按钮(Submit Button)
<input type="submit">
定义了提交按钮. 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
5 HTML框架
5.1 iframe
<iframe>
标签规定一个内联框架。-
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
<iframe src="http://www.sina.com"></iframe>
6 <link>
标签
引入外部css文件的方法
<head> <link rel='stylesheet' type='text/css' href='css/sty.css'></link> </head>
7 表格
7.1 table定义一个表格
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
- 一个 HTML 表格包括
<table>
元素,一个或多个<tr>、<th>
以及<td>
元素。 <tr>
元素定义表格行,<th>
元素定义表头,<td>
元素定义表格单元。- 更复杂的 HTML 表格也可能包括
<caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody>
元素。
7.2 <th>
标签
- 标签定义 HTML 表格中的表头单元格。
- HTML 表格有两种单元格类型:
- 表头单元格 - 包含头部信息(由 元素创建)
- 标准单元格 - 包含数据(由 元素创建)
- 元素中的文本通常呈现为粗体并且居中。
- 元素中的文本通常是普通的左对齐文本。
- colspan合并列,rowspan合并行。
a | b | ||
f | g | h | |
k | l | m | |
n | o | p | q |
7.3 <col>
标签
<col>
标签规定了 <colgroup>
元素内部的每一列的列属性。
123 | 457 | 457 |
567 | 678 | 457 |
8 样式和布局
8.1 <div>
标签
-
标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
-
标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
<div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>
8.2 <span>
标签
-
用于对文档中的行内元素进行组合。
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
9 列表
9.1 <ul>
标签
<ul>
标签定义无序列表。 将 <ul>
标签与 <li>
标签一起使用,创建无序列表。
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
9.2 <ol>
标签
<ol>
标签定义了一个有序列表. 列表排序以数字来显示。 使用<li>
标签来定义列表选项。
<ol> <li value=‘1’>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
reversed属性指定列表倒序(9,8,7...)。
9.3 <dl>
标签
<dl>
标签定义一个描述列表。 <dl>
标签与 <dt>
(定义项目/名字)和 <dd>
(描述每一个项目/名字)一起使用。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
9.4 <menu>
标签
<menu>
标签定义了一个命令列表或菜单。
<menu>
标签通常用于文本菜单,工具条和命令列表选项。
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="edit_cut()">Cut</button> <button type="button" onclick="edit_copy()">Copy</button> <button type="button" onclick="edit_paste()">Paste</button> </menu> </li> </menu> to