一、概述
1、Web是基于没有任何特殊格式字符的文本文件创建的。
2、Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容。
3、HTML(HyperText Mark Language,超文本标记语言)是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
4、CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
5、JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
二、标签
(一)概述
1、标签(标记)是由尖括号括起来的词或字符,它会告诉浏览器文本结构和含义。如<head>
、<p>
、<h1>
。
2、html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。如<p></p>
。
3、通过HTML,我们利用标记来标示内容提供结构。把匹配标记以及它们包围的内容称为元素。
元素=开始标记+内容+结束标记。
4、开始标记可以有属性。比如<style type="text/CSS"></style>
中的type属性。
5、标签与标签之间是可以嵌套的,但先后顺序必须保持一致。
6、HTML标签不区分大小写,<h1>
和<H1>
是一样的,但一般都是小写。
7、html文件的一般结构如下:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<style>...</style>
<link>
</head>
<body>
<script>...</script>
</body>
</html>
【注】<!DOCTYPE html>
表示的就是HTML5标准。
(二)一些标签的含义
1、<html></html>
称为跟标签,所有的网页标签都在<html></html>
中。这会告诉浏览器文件内容是HTML。
2、<head>
标签:用于定义文档的头部,它是所有头部元素的容器。
- 文档的头部描述了文档的各种属性和信息,包括文档的标题等。
- 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
- 头部元素有
<title>
、<script>
、<style>
、<link>
、<meta>
等标签。
3、<title>
标签:添加网页的标题信息。
4、<body>
标签:添加网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在这里的标记中的内容会在浏览器中显示出来。
5、<hx>
标签:标题标签一共有6级,<h1>
到<h6>
,字体由大到小,分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。
6、<p>
标签:添加文章段落。
7、代码注释:标注代码的用途。<!-- -->
8、<a>
标签:实现超链接。
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
【说明】
1)默认情况下,链接的网页是在当前浏览器窗口中打开。
使用target可以使链接的网页在新窗口中打开。
<a href="目标网址" target="_blank">click here!</a>
2)使用mailto在网页中链接Email地址。
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
9、<img>
标签:插入图片。图片可以是GIF,PNG,JPEG格式的图像文件。
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
【关于`<img>`和`<a>`中的图片路径问题】
1)当图片位于任意路径时,都使用“绝对路径+图片名+后缀”的形式;
2)当图片位于当前路径下,可以直接使用“图片名+后缀”的形式,可以不用加上路径;
3)当图片位于上一级时,可以使用“../上一级路径名+图片名+后缀”的形式;
4)当图片位于下一级时,可以使用“相对路径+图片名+后缀”的形式。
通常情况下,将网页中所需要的图片放置在同一个文件夹,命名为images,再将images这个文件夹放在建立的总的工程文件夹中。采用这种方式时,属于图片位于下一级的情况,这时可以使用相对路径的形式。
10、<em>
标签:表示强调,用斜体表示。
11、<i>
标签:显示斜体文本效果。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。和 <em>
类似。
12、<strong>
标签:表示更强烈的强调,用粗体表示。
13、<b>
标签:规定粗体文本。
【HTML5规范声明
应该使用<h1>
-<h6>
来表示标题,使用<em>
标签来表示强调的文本,应该使用<strong>
标签来表示重要文本,应该使用<mark>
标签来表示标注的/突出显示的文本。在没有其他合适标签更合适时,才应该把<b>
标签作为最后的选项。
14、<span>
标签:没有语义,它的作用就是为文字设置单独样式。
15、<q>
标签:短文本引用,浏览器会自动添加双引号。
16、<blockquote>
标签:长文本引用,缩进样式。
17、<br>
标签:分行显示文本,相当于Word文档中的回车换行。
xhtml1.0写法:`<br/>`
html4.01写法:`<br>`
18、空格:
(注意末尾必须带有;)。
【注】在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br/>
。
19、<hr>
标签:添加水平横线。
20、<address>
标签:为网页加入地址信息。
21、<code>
标签:一行代码。
22、<pre>
标签:多行代码、大段代码。主要作用是预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
23、<ul>
标签:ul-li是没有前后顺序的信息列表。
在网页中显示的默认样式一般为:每项li前都自带一个圆点。
24、<ol>
标签:制作有序列表。
在网页中显示的默认样式一般为:每项<li>
前都自带一个序号,序号默认从1开始。
25、<div>
标签:划分独立的逻辑部分,相当于一个容器。
26、表格
<table>
<caption>标题文本</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tfoot>
</table>
1)<table>…</table>
:整个表格以<table>
标记开始、</table>
标记结束。
2)不加<thead><tbody><tfooter>
时,table表格加载完后才显示。加上这些表格结构,tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table可以按结构一块块的显示,不等整个表格加载完后显示。)
3)<tr>…</tr>
:表格的一行,所以有几对tr 表格就有几行。
4)<td>…</td>
:表格的一个单元格,一行中包含几对…,说明一行中就有几列。
5)<th>…</th>
:表格的头部的一个单元格,表格表头。
6)<caption>
:为表格添加标题和摘要。
27、表单:作用是实现网站与用户交互。可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form action="服务器文件" method="传送方式"></form>
所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 之间,否则用户输入的信息提交不到服务器上。
- action :服务器脚本URL。
- method : 数据传送的方式(get/post)。
- get:表单数据会追加到URL本身,用户可以看见表单数据。
- post:所有表单数据会作为请求的一部分发送,对用户不可见。
1)文本输入框(单行)
<input type="text" name="名称" value="文本(默认值)"/>
除了基本的文本输入,还可以设置特定的输入类型,比如number、date、password等。
2)文本输入域(多行)
<textarea rows="行数" cols="列数">文本</textarea>
3)单选按钮和复选按钮
<input type="radio" name="名称" value="值" checked/>
<input type="radcheckbox" name="名称" value="值" checked/>
- 所有关联的单选按钮(或复选按钮)应该使用相同的name属性。
- “checked”表示该选项被默认选中,可不写。
4)下拉列表
<select>
<option value="提交值(向服务器提交的值)">选项(显示的值)</option>
</select>
在标签中设置”multiple”属性,可以多项选择。
5)提交/重置按钮
<input type="submit" value="提交">
<input type="reset" value="重置">
6)label标签:不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
<label for="控件id名称">
【补充】
<fieldset>
元素:将表单公共元素组织在一起。
<filedset>
元素包围一组输入(input)元素。<legend>
为这一组提供一个标签。
- 文件输入,将
<input>
元素中的type类型设置为“file”。 - placeholder属性:为表单用户提供一个提示,指出在这个输入域中希望输入的内容。
- required属性:指示一个输入域是必要的,即在提交表单之前,必须输入数据。