HTML基础

来源：互联网发布：黑龙江省快乐十分软件编辑：程序博客网时间：2024/06/15 18:27

客户端网页编程-HTML
1 HTML简介

1. HTML 是⽤来描述网页的⼀种语⾔。
2. HTML 指的是超⽂本标记语⾔: HyperText MarkupLanguage
3. HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔
4. 标记语⾔是⼀套标记标签(markup tag)
5. HTML 使⽤标记标签来描述网页
6. HTML ⽂档包含了HTML标签及⽂本内容
7. HTML文档也叫做 web网页面
1. HTML 标记标签通常被称为HTML标签(HTML tag)。
2. HTML 标签是由尖括号包围的关键词，⽐如<html>
3. HTML 标签通常是成对出现的，⽐如<b>和</b>
4. 标签对中的第⼀个标签是开始标签，第⼆个标签是结束标签
5. 开始和结束标签也被称为开放标签和闭合标签
"HTML 标签"和"HTML 元素"通常都是描述同样的意思.

版本

时间

HTML

1991

HTML+

1993

HTML2

1995

HTML3.2

1997

HTML4.01

1999

XHTML

2000

HTML5

2012

XHTML5

2013

客户端网页编程-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//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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><aname="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 describingweb pages.....</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTMLelements.....</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 <abbrtitle="ZhongGuo">zg</abbr>
如果<address> 元素位于<body> 元素内部，则它表⽰该⽂档作者/所有者的联系信息
<address>
Written by <ahref="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 buuse</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>Thelightning</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: <inputtype="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

规定应该禁⽤该按钮。

formaction

URL

规定当提交表单时向何处发送表单数据。覆盖form元素的action属性。该属性与
type="submit"配合使⽤。

1. <select>元素⽤来创建下拉列表。
2. <select>元素中的
<select>
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="mercedes">Mercedes</option>
<optionvalue="audi">Audi</option>
</select>

属性

属性值

作⽤

disabled

规定应该禁⽤下拉列表。

multiple

当该属性为true时，可选择多个选项。

size

number

规定下拉列表中可⻅选项的数⺫。

<label> 标签为input元素定义标注（标记）。
<labelfor="male">Male</label>
1.<fieldset> 标签可以将表单内的相关元素分组。
2. <fieldset>标签会在相关表单元素周围绘制边框。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <inputtype="text"><br>
Email: <inputtype="text"><br>
Date of birth: <inputtype="text">
</fieldset>
</form>
Personalia:
Name:
4.5<select> 元素⽤来创建下拉列表。
4.6 <label> 标签
4.7 <fieldset> 标签
Email:
Date of birth:
1.<iframe> 标签规定⼀个内联框架。
2. ⼀个内联框架被⽤来在当前HTML⽂档中嵌⼊另⼀个⽂档。
<iframesrc="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合并⾏。

<col> 标签规定了<colgroup>元素内部的每⼀列的列属性。

123

457

567

678

457

1. 标签定义HTML⽂档中的⼀个分隔区块或者⼀个区域部分。
2. 标签常⽤于组合块级元素，以便通过CSS来对这些元素进⾏格式化。
```<divstyle="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>```
1. ⽤于对⽂档中的⾏内元素进⾏组合。
<p>我的⺟亲有<span style="color:blue">蓝⾊</span>的眼睛。</p>
7.3<col> 标签
8 样式和布局
8.1 <div> 标签
8.2 <span> 标签

0 0