HTML超链接

TML超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示

HTML链接语法

href 属性描述了链接的目标。.

HTML链接-target属性

使用 target 属性，你可以定义被链接的文档在何处显示。

HTML 链接- id 属性

图片链接

在当前页面链接到指定位置

跳出框架

邮箱地址

tml概述和基本结构

html概述

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。

此版本文档用sublime text创建方法： html:xt + tab

文档示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab

文档示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段注释 -->

html标题标签

通过

、

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题，其后是

，再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

html段落标签、换行标签与字符实体

html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html换行标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入

来强制换行，代码如下：

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html块标签、含样式的标签

html块标签

1、

标签块元素，表示一块内容，没有具体的语义。

2、标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、 标签行内元素，表示语气中的强调词

2、标签行内元素，表示专业词汇

3、 标签行内元素，表示文档中的关键字或者产品名

4、标签行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

html图像标签、绝对路径和相对路径

html图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性定义图片的引用地址

alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址

相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接标签

标签可以在网页上定义一个链接地址，它的常用属性有：

href属性定义跳转的地址

title属性定义鼠标悬停时弹出的提示文字框

target属性定义链接窗口打开的位置

target="_self" 缺省值，新页面替换原来的页面，在原来位置打开

target="_blank" 新页面会在新开的一个浏览器窗口打开

.HTML基本标签

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。

HTML文档的结构

HTML标签由标签、属性、内容组成，属性与内容可选。
包含内容的标签以<…>开始，</…>结束，不包含内容的标签可以是如下格式：<…/>
属性的值尽量用双引号或单引号修饰
标签中的内容可以是其他的标签，称为原标签的子标签，子标签必须在父标签结束之前结束

2.页面背景色或背景图像

<body background="back_image.GIF" >

Hello World！

</body>

（网页背景图像）

<body bgcolor="#FFCCFF">

Hello World!

</body>

（网页背景色彩）

3.文本相关标签

标题标签<h1>－<h6>，<font>标签。

行的控制

段落标签<p>，换行标签<br>。

标题标签

<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （说明：<h1>到<h6>字体大小依次递减）

<sub>下标文字，<sup>上标文字，<del>删除线。

段落标签<p>，换行标签<br>。

内容分隔<HR>标签

<HR> 标签用于在页面上绘制水平线。

图像标签

图像的基本语法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在线报名” >

页面链接<A>标签

要链接到同一目录 (C:\HTML) 下的页面，可编写 <A HREF=“Doc1.htm”> 或 <A HREF=“C:\html\Doc2.htm”>

链接到本页面：

图像链接

</a>

滚动<marquee>标签

滚动文字或图像

</marquee>

说明：scrolldelay：表示滚动延迟时间，默认值为90；direction：表示滚动的方向，默认为从右向左。

2.HTML/CSS基础

目标：掌握列表的用法
使用表格的基本结构实现简单表格
使用表格相关标签实现跨行、跨列的复杂表格
会使用表单的基本结构制作表单页面
会使用各种表单元素实现注册页面
能理解post和get两种提交方式的区别

无序列表标签<ul>用于页面中没有顺序的列举项。

格式： <ul type=“”>

type属性设置标号的类型，值可以取：

1 disc ：实心圆点

2 circle ：空心圆点

3 square ：实心方块

无序列表

有序列表<ol>用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。

格式：<ol type=“” start=“”>

type设置标号的类型，值可以取：

1 1：显示数字

2 A：显示大写字母

3 a：显示小写字母

4 I：显示大写罗马数字

5 i：显示小写罗马数字

有序列表

嵌套列表：一个列表作为另一个列表的一部分，即多层列表。

嵌套列表

表格<table>应用场合

门户网站应用表格

表格的基本语法

<table>...</ table >定义表格

如何创建表格

创建表格

表格表现

表头与标题

域名数量报表的创建

域名数量报表

什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何创建跨行跨列的表格

表格的尺寸和边框

品牌商城表的创建

width用来设置表格的宽度；height用来设置表格的高度；border用来设置表格边框尺寸大小；bordercolor用来设置表格边框颜色。

品牌商城表

背景：background属性用来设置表格的背景图片；bgcolor属性用来设置表格、行、列的背景色。

对其方式：align属性用来设置表格、行、列的对齐方式。

文本框基本语法

文本框的建设

文本框

密码框基本语法

密码框的建设

密码框，22个字符宽度

单选按钮基本语法

单选按钮的建设

单选按钮框

复选框基本语法

列表框基本语法

多行文本框基本语法

按钮基本语法

其他表单元素：<input type=“hidden”/>表单隐藏域
<input type=“image”/>表单图片按钮
<input type=“file”/>文件浏览

<label>标签

<label>标签可以绑定某个表单元素，用于扩展可以相应点击等事件的区域

如：当点击复选框右边的提示文字时，该复选框也可被选中。

内容有限，关于css，div和网页布局的部分就下次在和大家分享吧！

在线咨询

上一篇：后浪搞的在线版 Windows 12「GitHub
下一篇：HTML简单的 <style&

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商