HTML基础
来源：互联网 发布：mac如何现实隐藏文件 编辑：程序博客网 时间：2024/06/14 13:41
客户端⺴⻚编程-HTML
1 HTML简介
1.1 什么是HTML?
1.2 HTML 标签
1.3 HTML 元素
1.4 HTML版本
1.5 HTML⺴⻚结构
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
</head>
<body>
<h1>这是标题</h1>
<p>这是正⽂</p>
<body>
</html>
<!DOCTYPE>声明有助于浏览器中正确显⽰⺴⻚。
⺴络上有很多不同的⽂件，如果能够正确声明HTML的版本，浏览器就能正确显⽰⺴⻚内容。 doctype 声明是不区分
⼤⼩写的
为什么要定义⽂档类型？
1. Web 世界中存在许多不同的⽂档。只有了解⽂档的类型，浏览器才能正确地显⽰⽂档。
2. HTML 也有多个不同的版本，只有完全明⽩⻚⾯中使⽤的确切 HTML 版本，浏览器才能完全正确地显⽰出 HTML
⻚⾯。这就是 <!DOCTYPE> 的⽤处。
3. <!DOCTYPE> 不是 HTML 标签。它为浏览器提供⼀项信息（声明），即 HTML 是⽤什么版本编写的。
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. <meta> 标签提供了 HTML ⽂档的元数据。元数据不会显⽰在客户端，当时会被浏览器解析。
2. META元素通常⽤于指定⺴⻚的描述，关键词，⽂件的最后修改，作者，和其他元数据。 元数据可以被使⽤浏览器
（如何显⽰内容或重新加载⻚⾯），搜索引擎（关键词），或其他 Web 服务调⽤。
1.6 <!DOCTYPE> 声明
1.6.1 HTML5
1.6.2 HTML4.01
1.6.3 HTML1.0
1.7 HTML 标签
<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>
HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.
<h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br>
<p>这是⼀个段落</p>
<a href="www.baidu.com">这是⼀个链接</a>
*创建⼀个描点*
<a href="#C4">查看 Chapter 4。</a>
<h2><a name="C4">Chapter 4</a></h2>
<img src='images/1.jpg' width='100px;' height='200px;'/>
<br> 标签插⼊⼀个简单的换⾏符。
<br> 标签是⼀个空标签，意味着它没有结束标签。
<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 HTML基础
2.1 HTML 标题
2.2 HTML 段落
2.3 HTML 链接
2.4 HTML 图像
2.5 HTML <br> 标签
2.6 HTML <hr> 标签
2.7 HTML <!--...--> 注释标签
<!--这是⼀个注释，注释在浏览器中不会显⽰-->
<abbr> 标签⽤来表⽰⼀个缩写词或者⾸字⺟缩略词，如"WWW"或者"NATO"。
The <abbr title="ZhongGuo">zg</abbr>
如果 <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>
1. 根据 HTML 5 的规范， 标签应该做为最后的选择，只有在没有其他标记⽐较合适时才使⽤它。
<b>my first html</b>
2. 重要的⽂本应该⽤ 标签表⽰。
<strong>html5 should bu use</strong>
3. 被标记的或者⾼亮显⽰的⽂本应该⽤ <mark> 标签表⽰。
<mark>mark text</mark>
4. 被强调的⽂本应该⽤ <em> 标签表⽰，斜体突出强调
<em>被强调的⽂字</em>
提⽰：您也可以使⽤ CSS 的 "font-weight" 属性设置粗体⽂本
<bdo> 标签⽤来覆盖默认的⽂本⽅向。
值：ltr(从左开始)、rtr（从右开始）。
3 HTML格式标签
3.1 HTML 标签
3.2 HTML <address> 标签
3.3 定义粗体的⽂本
3.4 HTML <bdo> 标签
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
<i> 定义与⽂本中其余部分不同的部分，并把这部分⽂本呈现为斜体⽂本。
<p>He named his car <i>The lightning</i>,
because it was very fast.</p>
<ins> 标签定义已经被插⼊⽂档中的⽂本。
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
1. <pre> 标签可定义预格式化的⽂本。
2. 被包围在 <pre> 标签 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体。
3 + 2
=
------
5
<q> 标签定义⼀个短的引⽤。
<p>徐⽼师说:
<q>你们即将引来⼀个痛苦的阶段</q>
但是总能熬过</p>
使⽤ <u> 标签为⽂本添加下划线：
This is a parragraph.
提⽰：尽量避免使⽤此标签，⽤户会把超链接和下划线混淆。
3.5 HTML <i> 标签
3.7 HTML <ins> 标签
3.8 HTML <pre> 标签
3.9 HTML <q> 标签
3.10 HTML <u> 标签
4 HTML表单
4.1 <form> 标签
什么是表单？
1. 表单是⼀个包含表单元素的区域。
2. 表单元素是允许⽤户在表单中（⽐如：⽂本域、下拉列表、单选框、复选框等等）输⼊信息的元素。
First name:
Last name:
Submit
<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>
<input> 标签规定了⽤户可以在其中输⼊数据的输⼊字段。
<input type="text" name="fname"><br>
1. 定义了⼀个多⾏⽂本框
2. 可以通过 cols 和 rows 属性来规定 textarea 的尺⼨⼤⼩，不过更好的办法是使⽤ CSS 的 height 和 width 属性。
3. maxlength，规定⽂本区域允许的最⼤字符数。
4. readonly，规定⽂本区域为只读。
5. disabled，规定禁⽤⽂本区域。
<textarea rows="10" cols="30">
我是⼀个⽂本框。
</textarea>
1. <button> 标签定义⼀个按钮。
2. 在 <button> 元素内部，您可以放置内容，⽐如⽂本或图像。这是该元素与使⽤ <input> 元素创建的按钮之间
的不同之处。
按钮的两种⽅式：
<input type='button'/ value='按钮'>
<button>按钮</button>
属性列表
4.2 <input> 标签
4.3 <textarea> 标签
4.4 <button> 标签
属性 属性值 作⽤
disabled disabled 规定应该禁⽤该按钮。
formaction URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与
type="submit" 配合使⽤。
1. <select> 元素⽤来创建下拉列表。
2. <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 规定下拉列表中可⻅选项的数⺫。
<label> 标签为 input 元素定义标注（标记）。
<label for="male">Male</label>
1. <fieldset> 标签可以将表单内的相关元素分组。
2. <fieldset> 标签会在相关表单元素周围绘制边框。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Personalia:
Name:
4.5 <select> 元素⽤来创建下拉列表。
4.6 <label> 标签
4.7 <fieldset> 标签
Email:
Date of birth:
1. <iframe> 标签规定⼀个内联框架。
2. ⼀个内联框架被⽤来在当前 HTML ⽂档中嵌⼊另⼀个⽂档。
<iframe src="http://www.sina.com"></iframe>
引⼊外部css⽂件的⽅法
<head>
<link rel='stylesheet' type='text/css' href='css/sty.css'></link>
</head>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
1. ⼀个 HTML 表格包括 <table> 元素，⼀个或多个 <tr>、<th> 以及 <td> 元素。
2. <tr> 元素定义表格⾏， <th> 元素定义表头， <td> 元素定义表格单元。
3. 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元
素。
1. 标签定义 HTML 表格中的表头单元格。
2. HTML 表格有两种单元格类型：
表头单元格 - 包含头部信息（由 元素创建）
标准单元格 - 包含数据（由 元素创建）
5 HTML框架
5.1 iframe
6 <link> 标签
7 表格
7.1 table定义⼀个表格
7.2 <th> 标签
3. 元素中的⽂本通常呈现为粗体并且居中。
4. 元素中的⽂本通常是普通的左对⻬⽂本。
5. colspan合并列，rowspan合并⾏。
a
b
f g h
k l m
n o p q
<col> 标签规定了 <colgroup> 元素内部的每⼀列的列属性。
123 457 457
567 678 457
1. 标签定义 HTML ⽂档中的⼀个分隔区块或者⼀个区域部分。
2. 标签常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化。
```<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>```
1. ⽤于对⽂档中的⾏内元素进⾏组合。
<p>我的⺟亲有 <span style="color:blue">蓝⾊</span> 的眼睛。</p>
1 HTML简介
1.1 什么是HTML?
1.2 HTML 标签
1.3 HTML 元素
1.4 HTML版本
1.5 HTML⺴⻚结构
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
</head>
<body>
<h1>这是标题</h1>
<p>这是正⽂</p>
<body>
</html>
<!DOCTYPE>声明有助于浏览器中正确显⽰⺴⻚。
⺴络上有很多不同的⽂件，如果能够正确声明HTML的版本，浏览器就能正确显⽰⺴⻚内容。 doctype 声明是不区分
⼤⼩写的
为什么要定义⽂档类型？
1. Web 世界中存在许多不同的⽂档。只有了解⽂档的类型，浏览器才能正确地显⽰⽂档。
2. HTML 也有多个不同的版本，只有完全明⽩⻚⾯中使⽤的确切 HTML 版本，浏览器才能完全正确地显⽰出 HTML
⻚⾯。这就是 <!DOCTYPE> 的⽤处。
3. <!DOCTYPE> 不是 HTML 标签。它为浏览器提供⼀项信息（声明），即 HTML 是⽤什么版本编写的。
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1. <meta> 标签提供了 HTML ⽂档的元数据。元数据不会显⽰在客户端，当时会被浏览器解析。
2. META元素通常⽤于指定⺴⻚的描述，关键词，⽂件的最后修改，作者，和其他元数据。 元数据可以被使⽤浏览器
（如何显⽰内容或重新加载⻚⾯），搜索引擎（关键词），或其他 Web 服务调⽤。
1.6 <!DOCTYPE> 声明
1.6.1 HTML5
1.6.2 HTML4.01
1.6.3 HTML1.0
1.7 HTML 标签
<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>
HTML 标题（Heading）是通过 <h1> - <h6> 标签来定义的.
<h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br> <h1>这是主标题</h1></br>
<p>这是⼀个段落</p>
<a href="www.baidu.com">这是⼀个链接</a>
*创建⼀个描点*
<a href="#C4">查看 Chapter 4。</a>
<h2><a name="C4">Chapter 4</a></h2>
<img src='images/1.jpg' width='100px;' height='200px;'/>
<br> 标签插⼊⼀个简单的换⾏符。
<br> 标签是⼀个空标签，意味着它没有结束标签。
<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 HTML基础
2.1 HTML 标题
2.2 HTML 段落
2.3 HTML 链接
2.4 HTML 图像
2.5 HTML <br> 标签
2.6 HTML <hr> 标签
2.7 HTML <!--...--> 注释标签
<!--这是⼀个注释，注释在浏览器中不会显⽰-->
<abbr> 标签⽤来表⽰⼀个缩写词或者⾸字⺟缩略词，如"WWW"或者"NATO"。
The <abbr title="ZhongGuo">zg</abbr>
如果 <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>
1. 根据 HTML 5 的规范， 标签应该做为最后的选择，只有在没有其他标记⽐较合适时才使⽤它。
<b>my first html</b>
2. 重要的⽂本应该⽤ 标签表⽰。
<strong>html5 should bu use</strong>
3. 被标记的或者⾼亮显⽰的⽂本应该⽤ <mark> 标签表⽰。
<mark>mark text</mark>
4. 被强调的⽂本应该⽤ <em> 标签表⽰，斜体突出强调
<em>被强调的⽂字</em>
提⽰：您也可以使⽤ CSS 的 "font-weight" 属性设置粗体⽂本
<bdo> 标签⽤来覆盖默认的⽂本⽅向。
值：ltr(从左开始)、rtr（从右开始）。
3 HTML格式标签
3.1 HTML 标签
3.2 HTML <address> 标签
3.3 定义粗体的⽂本
3.4 HTML <bdo> 标签
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
<i> 定义与⽂本中其余部分不同的部分，并把这部分⽂本呈现为斜体⽂本。
<p>He named his car <i>The lightning</i>,
because it was very fast.</p>
<ins> 标签定义已经被插⼊⽂档中的⽂本。
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
1. <pre> 标签可定义预格式化的⽂本。
2. 被包围在 <pre> 标签 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体。
3 + 2
=
------
5
<q> 标签定义⼀个短的引⽤。
<p>徐⽼师说:
<q>你们即将引来⼀个痛苦的阶段</q>
但是总能熬过</p>
使⽤ <u> 标签为⽂本添加下划线：
This is a parragraph.
提⽰：尽量避免使⽤此标签，⽤户会把超链接和下划线混淆。
3.5 HTML <i> 标签
3.7 HTML <ins> 标签
3.8 HTML <pre> 标签
3.9 HTML <q> 标签
3.10 HTML <u> 标签
4 HTML表单
4.1 <form> 标签
什么是表单？
1. 表单是⼀个包含表单元素的区域。
2. 表单元素是允许⽤户在表单中（⽐如：⽂本域、下拉列表、单选框、复选框等等）输⼊信息的元素。
First name:
Last name:
Submit
<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>
<input> 标签规定了⽤户可以在其中输⼊数据的输⼊字段。
<input type="text" name="fname"><br>
1. 定义了⼀个多⾏⽂本框
2. 可以通过 cols 和 rows 属性来规定 textarea 的尺⼨⼤⼩，不过更好的办法是使⽤ CSS 的 height 和 width 属性。
3. maxlength，规定⽂本区域允许的最⼤字符数。
4. readonly，规定⽂本区域为只读。
5. disabled，规定禁⽤⽂本区域。
<textarea rows="10" cols="30">
我是⼀个⽂本框。
</textarea>
1. <button> 标签定义⼀个按钮。
2. 在 <button> 元素内部，您可以放置内容，⽐如⽂本或图像。这是该元素与使⽤ <input> 元素创建的按钮之间
的不同之处。
按钮的两种⽅式：
<input type='button'/ value='按钮'>
<button>按钮</button>
属性列表
4.2 <input> 标签
4.3 <textarea> 标签
4.4 <button> 标签
属性 属性值 作⽤
disabled disabled 规定应该禁⽤该按钮。
formaction URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与
type="submit" 配合使⽤。
1. <select> 元素⽤来创建下拉列表。
2. <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 规定下拉列表中可⻅选项的数⺫。
<label> 标签为 input 元素定义标注（标记）。
<label for="male">Male</label>
1. <fieldset> 标签可以将表单内的相关元素分组。
2. <fieldset> 标签会在相关表单元素周围绘制边框。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Personalia:
Name:
4.5 <select> 元素⽤来创建下拉列表。
4.6 <label> 标签
4.7 <fieldset> 标签
Email:
Date of birth:
1. <iframe> 标签规定⼀个内联框架。
2. ⼀个内联框架被⽤来在当前 HTML ⽂档中嵌⼊另⼀个⽂档。
<iframe src="http://www.sina.com"></iframe>
引⼊外部css⽂件的⽅法
<head>
<link rel='stylesheet' type='text/css' href='css/sty.css'></link>
</head>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
1. ⼀个 HTML 表格包括 <table> 元素，⼀个或多个 <tr>、<th> 以及 <td> 元素。
2. <tr> 元素定义表格⾏， <th> 元素定义表头， <td> 元素定义表格单元。
3. 更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元
素。
1. 标签定义 HTML 表格中的表头单元格。
2. HTML 表格有两种单元格类型：
表头单元格 - 包含头部信息（由 元素创建）
标准单元格 - 包含数据（由 元素创建）
5 HTML框架
5.1 iframe
6 <link> 标签
7 表格
7.1 table定义⼀个表格
7.2 <th> 标签
3. 元素中的⽂本通常呈现为粗体并且居中。
4. 元素中的⽂本通常是普通的左对⻬⽂本。
5. colspan合并列，rowspan合并⾏。
a
b
f g h
k l m
n o p q
<col> 标签规定了 <colgroup> 元素内部的每⼀列的列属性。
123 457 457
567 678 457
1. 标签定义 HTML ⽂档中的⼀个分隔区块或者⼀个区域部分。
2. 标签常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化。
```<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>```
1. ⽤于对⽂档中的⾏内元素进⾏组合。
<p>我的⺟亲有 <span style="color:blue">蓝⾊</span> 的眼睛。</p>
0 0
- HTML 基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- html基础
- HTML基础
- HTML基础
- HTML基础
- NNU_20161008_1TCPL_2_6
- Hibernate中的关联关系一对一映射
- 1622-5 孔富晨 总结《2016年11月28日》 【连续第59天总结】
- 关于两个设计模式的心得----模版方法模式、责任链模式
- [kuangbin带你飞]专题九 连通图 I - Caocao's Bridges（无向图求桥（割边））（并查集）（坑题）
- HTML基础
- JS下两种定义函数的区别
- 1020. Tree Traversals (25)
- 简单线性回归的随机梯度下降算法实现：Linear Regression - SGD
- 【备注】【C25】《大话数据结构》PDF 下载
- MyEclipse字体及代码提示配置方法
- Tree-Based State Tying for High Accuracy Modelling 公式理解
- [LeetCode]Largest Number
- 【BZOJ】1088 [SCOI2005] 扫雷Mine
