在之前已经说到了html的基础，要是没有看过的可以去点击打开链接看看

超链接介绍：

1，概念：

超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。所谓的超文本链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超文本链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

2，基本的使用：

a,页面的连接：

用HTML创建超文本链接需要使用<A>标记符（结束标记符</A>不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。
在HTML文件中用链接指针指向一个目标。其基本格式为：
<a href = "…">标记超文本链接信息</a>

<span style="font-size:24px;"><span style="white-space:pre"> </span><lable>这是超链接网页</lable><p><a href="http://www.baidu.com" target="_blank">百度链接</a></p></span>

<span style="font-size:24px;">//设置target属性可以出现不同的情况；如</span><span style="font-size: 24px; font-family: Arial, Helvetica, sans-serif;">target="_blank"就是另开一个窗口打开</span>

<span style="font-size:24px;">
</span>

b,本地连接

超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。格式如下：
<a name="标签名">此处创建了一个标签</a>

<span style="color: rgb(255, 0, 0); white-space: pre;">        </span><p><a href="f://">local</a></p>

c,电子邮件链接

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如: <a href="mailto:webmaster@hnu.cn">管理员信箱</a>

d，迅雷连接

<a href="thunder://985256523@qq.com">打开迅雷演示</a>

e,可以出现点击出现其他界面，需要用到onclick

f.在读文章时候我们可以调到指定的位置，我们通过超链接也能实现

就可以实现。

还有很多，就不一一一列举了，但是需要注意的href的默认协议是file协议，所以我们在写超链接时候都是在前面添加http://.....;

3,除了上面的文字超链接，我们还可以使用图片连接：

首先我们必须知道：

图像标签：<img>

属性说明：
src:连接一个文件
align:属性定义图片的排列方式
border用来设置图像的边框
height和width为显示的高宽。

当我们点击图片之后，跳到百度链接；

图像地图：<map>《不常用》

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用。

<span style="font-size:18px;"><img src="Sunset.jpg" alt="图片说明文字" usemap="#map" />
<map ><area shape="rect" coords="50,59,116,104" href="1.html" /><area shape="circle" coords="118,203,40" href="2.html" />
</map>
</span>

基本上的超链接就是用到了这么多。

框架<frameset>的介绍：

框架标签：<frameset> 《不能放在body标签中》

如要进行框架分割，如上下分，然后下面的还要左右分，那个怎么办，那么框架就有很大的作用了，<frame>和<frameset>设置

<frameset rows="10%,*">//上下分，上面占10%,下面占其余的<frame src="1.html" name="top" />//上面的连接src为1.html<frameset cols="30%,*">//下面的左右分，左边占30%，右边其余的<frame src="2.html" name="left" />//左边的连接为2.html<frame src="3.html" name="right" />//右边的为3.html</frameset>
</frameset>

这个在左边点击还可以在右边出现另一个界面《超链接的应用》设置targ et属性就可以实现

画中画标签：<iframe>

frameset标签是把整个窗口划分成不同的子窗体，而iframe标签可以实现在网页中的任意位置显示一个窗体（注意，它不是把整个窗口进行分割）。

表单<form>的介绍：

表单标签是最常用的标签，用于与服务器端的交互。

<input > 输入标签

接收用户输入信息。其中的type属性指定输入标签的类型。

type属性：

文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。

<th>用户注册</th><tr><td>姓名：</td><td><input type="text" name="user" value="" /></td></tr><tr><td>密码：</td><td>   <input type="password" name="psw" value=""></td></tr><tr><td>确认密码：</td><td><input type="password" name="psw2" value=""></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="man" checked="checked">男<input type="radio" name="sex" value="feman">女<input type="radio" name="sex" value="other">其他</td></tr><tr>    <td>掌握技能:</td><td><input type="checkbox" name="teachich" value="java"/>Java<td><td><input type="checkbox" name="teachich" value="html"/>Html<td><td><input type="checkbox" name="teachich" value="css"/>Css<td></tr>

<select>：选择标签

<select name="lang"><option value="none"> --请选择语言--</option><option value="java" selected="selected"> JAVA </option><option value="c"> C语言 </option>
</select>

<span style="white-space:pre">       </span>

<textarea>：多行文本框

表单组件格式化<tabel>

表单提交的页面实现

1）先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。
2）明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

select name="selcet"><option value="none" >请选择</option><option value="china">中国</option><option value="french">法国</option><option value="us">美国</option></select>

表单提交方式(get/post)

两种方式的区别:

1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全
2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。
3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

表单提交方式与乱码问题:

无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码表进行解码即可。
如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表单使用post提交，因为这样编码更方便。

浏览器与服务端的交互方式:

☆客户端(浏览器)与服务端交互的三种方式：

1) get方式地址栏中输入url地址
2)get方式超连接
3) get和post表单

<form method="post">这样设置更安全

头标签 <head>

头标签都放在<head></head>头部分之间。包括：title base meta link

<base>href 属性：指定网页中所有的超链接的目录。target 属性：指定打开超链接的方式，如_blank 表示所有的超链接都用新窗口打开显示。修改默认的系统路径，系统默认的存的当前文件的目录，使用base标签之后，就会以base里面的为主

!--    修改默认的系统路径，系统默认的存的当前文件的目录，使用base标签之后，就会以base里面的为主 -->
<base href="../frame/"> <a href="http://www.baidu.com"><img src="../html/img/11.jpg" alt="你好"></a>

<!--    meta标签里面的name=keywords,content后面的关键字都可以搜索到该网页 --><meta name="keywords" content="你好,湖南，大学"><!--       当meta标签里面的http-equiv 属性：模拟HTTP协议的响应消息头,像这个自动刷新3秒， --><meta http-equiv="refresh" content="3" >姓名<input  type="text" name="user" value=""/>

<!--   <span style="white-space:pre">     </span>当meta标签里面的http-equiv 属性：模拟HTTP协议的响应消息头，五秒之后自动跳转到url页面 -->
<!--   <span style="white-space:pre">  </span><meta http-equiv="refresh" content="5 ; url=http://www.hncu.net"/> -->

其他标签：

direction 属性：left right down up
behavior 属性：scroll alternate slide

<marquee direction="left" behavior="scroll"><h1>老赵啊，回家吃饭了！！<h1><img alt="" src="img/11.jpg"><img alt="" src="img/2.jpg"><img alt="" src="img/3.jpg"></marquee>

<pre> 可以将文本内容按在代码区的样子显示在页面上。

☆几个纯数据封装标签：

div标签 span p标签

 <body><div style="border: #ff0 2px solid; height: 200px ;width: 300px">这是测试《div》演示</div><span style="background: #0ff">这是span1区域</span><span style="background: #0f0">这是span2区域</span><span style="background: #0ff">这是span3区域</span>

 <label for="user" accesskey="u">用户名</label><input type="text" id="user" value="">//可以是用快捷键定位到文本框

标签分为两大类：

1) 块级标签(元素)：标签结束后都有换行。font ，span， img， input， select， a
2) 行内标签(元素)：标签结束后没有换行。 div， p ，dl， ol ，ul ，table， title

这个以上的介绍差不多是html的介绍，对于一般的网页解决是没什么问题的。在后面继续更新 CSS模式。

HTML（网页设计）基础到加强相关推荐

html页面自适应是什么意思,什么是自适应网页设计
什么是自适应网页设计导语:移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?自适应网页设计的出现很好的解决了这个问题. ...
html基础实验的实验原理,html网页设计实验报告.doc
html网页设计实验报告.doc 学生实验报告实验课名称 web 应用开发技术实验项目名称静态网页制作专业名称计算机科学与技术班级学号学 ...
《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.3 常用网页设计软件...
本节书摘来自异步社区<Dreamweaver CS6完美网页制作--基础.实例与技巧从入门到精通>一书中的第1章,第1.3节,作者:何新起更多章节内容可以访问云栖社区"异步社区 ...
网页制作代码模板_科普：关于网页设计的4个基础小知识
网站是企业展示形象.引流营销的重要互联网窗口,因此一定要设计得足够吸睛美观,引起顾客兴趣.今天就来教大家如何做好网页设计与制作. 提到网页设计,可能很多小白都要问了:网页设计用什么软件做?网页设计需要 ...
【转】网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正...
[现原文地址]: https://www.cnblogs.com/linjierd/p/10117654.html 最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功 ...
计算机设计网页基础知识,网页设计的基础知识
一. 网页设计的基础知识. 伴随着计算机和网络技术的迅猛发展,互联网网站渗透到全球给个领域,已经已经彻底改变了人们的工作,学习和生活方式.用户可以随时从网上了解所需的各种资讯,如天气,新闻,旅游等,也 ...
网页设计初了解-基础知识篇
为了学习GitHub去下载Git,结果n次下载失败,心态小崩,今天不学编程了,转hTML5换换心情,按大佬们教的,学了一段时间的枯燥编程要换个方向换换口味,不然学习效率会变低.这一篇是基础知识. 学前 ...
网页设计（一）——HTML基础概念
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
动态网页html语言,动态网页设计HTML语言基础.ppt
动态网页设计HTML语言基础 * 动态网页设计(Dreamweaver CS3+ASP.NET) * 3.3 静态网页基础 3.3.4 表格例3-7(3-7.html)DW CS3中的表格制作. 表 ...
HTML网页设计语言入门基础教学视频-赖国荣-专题视频课程
HTML网页设计语言入门基础教学视频-2858人已学习课程介绍本课程为软件相关专业网页设计入门基础课程,课程共18讲,上课代码及PPT课件已经上传,可以直接下载使用. 课程收益 ...

HTML（网页设计）基础到加强