HTML基础

最新推荐文章于 2024-12-16 16:52:23 发布

原创最新推荐文章于 2024-12-16 16:52:23 发布 · 694 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #标签 #编程 #web #javaweb

原创专栏收录该内容

42 篇文章

订阅专栏

客户端网页编程-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	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	disabled	规定应该禁⽤下拉列表。
multiple	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	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> 标签