HTML&CSS基础-超链接
HTML&CSS基础-超链接
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.如下图所示，有三个网页
<!DOCTYPE html> <!--Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。html这种模式兼容浏览器是最好的-->
<html lang="en">
<head name="尹正杰" age="25"> <!--标签的开头,其里面的内容（name="尹正杰"）是标签的属性,其属性可以定义多个。-->
<meta charset="UTF-8"/> <!--指定页面编码，我们称这种标签类型为自闭和标签，因为我们需要在标签的结尾写上“/”，为了方便我们识别标签类型。-->
<meta http-equiv="refresh" content="30; Url=http://www.cnblogs.com/yinzhengjie/"> <!--这是做了一个界面的跳转，表示30s不运行的话就跳转到指定的URL-->
<title>尹正杰的个人主页</title> <!--定义头部(标签)的标题-->
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> <!--“content”定义关键字，其作用就是让浏览器通过搜索关键字时，会匹配该网站，这就是说如果你没有单独给百度钱的话，这些关键字就尤为重要啦！-->
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" /> <!--定义描述字符,其作用就告诉客户你的这个网站是干嘛使用的。-->
<link rel="shortcut icon" href="https://baike.baidu.com/pic/%E9%82%93%E7%B4%AB%E6%A3%8B/6798196/0/d1a20cf431adcbef011db9bba6af2edda3cc9f66?fr=lemma&ct=single#aid=0&pic=d1a20cf431adcbef011db9bba6af2edda3cc9f66" type="image/x-icon" /> <!--定义头部图标-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--这个是IE的浏览器生效的规则，如果你用的是谷歌，360等浏览器的话，这行规则不生效，如果你用的是IE浏览器的话，表示用IE最新的引擎去渲染HTML-->
</head> <!--标签的结尾，结合该标签的开头，这种标签类型我们称之为主动闭合标签。-->
<body>
<h1>尹正杰</h1><!--定义文件的内容，其中“h1”标签中-->
<h2>尹正杰</h2>
<h3>尹正杰</h3>
<h4>尹正杰</h4>
<h5>尹正杰</h5>
<h6>尹正杰</h6>
<h1>You are a good boy!</h1>
<div style="width: 4000px"> <!--是其缩进代码的父级标签，给其定义宽度属性是200像素大小-->
<h1>尹正杰</h1><!--块级标签：也叫父级标签，即自己单独占了一行空间，或者说是占它父级标签的100%。作用：定义文件的内容-->
<h1>You are a good boy!</h1>
</div> <!--div的标签的结尾-->
<p>素胚勾勒出青花笔锋浓转淡<br/>瓶身描绘的牡丹一如你初妆<br/>冉冉檀香透过窗心事我了然<br/>宣纸上走笔至此搁一半<br/>釉色渲染仕女图韵味被私藏<br/>而你嫣然的一笑如含苞待放</p> <!--其中<br/>表示换行符的意思，<p></p>表示一个段落的意思。-->
<a>yinzhengjie</a> <!--内联标签，以a开头的标签都是内联标签，这些标签的内容时连接在一起的。:-->
<a>2017</a>
<a href="http://www.cnblogs.com/yinzhengjie/" target="_blank">尹正杰博客</a> <!--a标签特有的性能，重定向，通过href属性定义需要跳转的网站，通过target="_blank"表示新打开一个标签页并打开新的URL地址--> <a href="#Y1">Golang第一章</a> <!--a标签特有的性能，做锚，找ID为"Y1"的标签并跳转过去-->
<a href="#Y2">Golang第二章</a> <!--找ID为"Y2"的标签-->
<a href="#Y3">Golang第三章</a> <!--找ID为"Y3"的标签--> <div id="Y1" style="height:700px;background-color:antiquewhite"> <!--用id来定义标签为"Y1"（一般要具有唯一性，即尽量不要让标签的id的值相同）,用style来定义高度为700像素，颜色用background-color来定义。-->
Golang进阶之路Day1<br/>
Go语言官方自称,之所以开发Go 语言,是因为“近10年来开发程序之难让我们有点沮丧”。 这一定位暗示了Go语言希望取代C和Java的地位,成为最流行的通用开发语言。博客地址：http://www.cnblogs.com/yinzhengjie/p/6482675.html
</div> <div id="Y2" style="height:700px;background-color:rebeccapurple;">
<br/>Golang进阶之路Day2<br/>
前者大家应该都很熟悉，因为我在上一篇（http://www.cnblogs.com/yinzhengjie/p/6482675.html）关于GO的博客中用"go build"命令编译不同的版本，但是在这里我们还是要演示一下go build的花式用法。博客地址：http://www.cnblogs.com/yinzhengjie/p/7000272.html
</div> <div id="Y3" style="height:700px;background-color:brown;">
Golang进阶之路Day3<br/>
当然我这里只是介绍了Golang的冰山一角，对Golang感兴趣的小伙伴，可以看一下Golang官网的文档说明。毕竟官方才是最权威的，给出国内地址：https://golang.org/pkg/!博客地址：http://www.cnblogs.com/yinzhengjie/p/7043430.html
</div> <!--功能最少的标签，最纯洁的易于加工的标签,即他们没有“h1”和"a"标签那么多的属性。-->
<div>我是块标签</div>
<span>我是内联标签</span> <!--列表-->
<ul> <!--打印字符穿前面带个小黑点-->
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul> <ol> <!--打印字符串前面有数字标识-->
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol> <ol>
<dd>北京</dd> <!--自带缩进，可以用于写新闻的标题-->
<dt>朝阳区</dt>
<dt>亦庄经济开发区</dt>
<dt>丰台区</dt>
<dt>海淀区</dt>
<dd>河北</dd>
<dt>石家庄</dt>
<dt>保定</dt>
<dd>陕西</dd>
<dt>西安</dt>
<dt>安康</dt>
</ol> <!--表格-->
<table border="1"> <!--定义一个表格，其属性是border="1"，表示加边框的意思。-->
<thead> <!--定义表头信息-->
<tr> <!--'tr'表示定义一行的数据，里面的内容由子标签<th></th>实现-->
<th>姓名</th> <!--'th'定义同一行每一列的内容,也就是说只要带有这个标签的且在其父标签"tr"标签中就是写的同一行内容。-->
<th>年龄</th>
<td>性别</td>
</tr>
</thead>
<tbody> <!--定义表格的内容-->
<tr> <!--'tr'表示每一行的数据，其定义的是行的操作。-->
<td>尹正杰</td> <!--td用来定义当前行的每一列的内容，与thead中的'th'用法相同。只不过'th’有加粗效果！-->
<td>25</td>
<td>boy</td>
</tr>
<tr> <!--'tr'表示每一行的数据-->
<td>尹正杰</td> <!--‘<td></td>’标签定义的是列的操作-->
<td colspan="2">26</td> <!--注意，'td'标签的colspan属性表示向右占锯的空间，我们给的值是“2”，就表示会从当前列往后在占一个列，共计当前行的两列空间！-->
</tr>
<tr> <!--'tr'表示每一行的数据-->
<td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->
<td rowspan="2">26</td> <!--注意，'td'标签的rowspan属性表示向下占据的空间，我们这里给的是还是“2”，即从当前行的当前列，向下扩充空一列内容。-->
</tr>
<tr> <!--'tr'表示每一行的数据-->
<td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->
<td >26</td> <!--表示这个'td'标签占两列的空间-->
</tr>
</tbody>
</table>
</body>
</html>
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尹正杰</title>
</head>
<body>
<label for="user">用户名</label> <input id="user" type="text"> <!--这个input标签和label标签就建立关联关系了，只要用户点击label的文字就会将光标投入到input标签里面哟。需要注意的是要给label标签设置for属性的值等于input标签id的值方能生效。-->
<fieldset> <!--创建一个框，把内容都输入到该框内-->
<legend>登录</legend> <!--在该框的最外侧（左上）的提示符-->
<p>Q Q 账号：</p> <!--定义一行的内容-->
<p>用户密码：</p>
</fieldset>
<a href="http://www.xiaohuar.com"> <!--由于img标签只是加载图片的，无法实现跳转，因此我们可以在外面给他添加一个a标签来实行点击图片就跳转到指定的网站！-->
<img src="尹正杰.jpg" alt="该图片加载失败，你咬我啊！" title="我是尹正杰"> <!--用img标签来定义打印一张图片在网页上，src表示文件的url(可以是绝对路径，也可以是相对路径)，
alt表示当图片不存在或是加载失败时会提示给用户的报错信息，而title表示当你把鼠标移动到图片上时，会有提示信息，就是title的内容！-->
</a> <from action="url" method="GET" enctype="multipart/form-data"> <!--接受from传来的数据，用action指定将参数传给谁（可以是一个URL地址），用method指定以哪种形式传参数，这里是以GET形式传参数，还可以用POST方法；
【GET传参会将传来的值放在URL上发送，而POST传参会将传来的值放在请求体上发送，不会被用户在URL直接看到，但是这2种传参方式都不安全，post我们可以用自带的浏览器查看数据】一个html可以有多个from用来接收用户输入的值.用enctype="multipart/form-data"属性使得用户通过浏览器上传文件才能成功。-->
<div>
<span>用户名：</span>
<input type="text" name="username" value="yinzhengjie"/> <!--定义一个输入框，类型指定为文本类型（普通文本框），表示输入的字符串是明文显示给用户，用name定义一个变量username存放着用户输入的用户名;
用value来定义name的默认值。-->
<input type="email" name="em"> <!--定义邮箱格式的文本框，用于检测是否有@符号，一般适用于高版本浏览器，建议不要轻易使用，如果要验证可以用js来写，这样兼容性会比它自带的要好。-->
<input type="text" name="sex" placeholder="请输入内容"> <!--表示会在输入框用浅色提示用户输入信息,但是placeholder也是高版本浏览器支持，低版本就够呛了，建议用js自己写。-->
</div>
<div>
<span>密码：</span>
<input type="password" name="pwd"/> <!--定义一个密码格式的文本框，类型指定为密文（密码格式文本框），表示输入的字符串是，密文显示给用户，用name定义一个变量pwd存放着用户输入的密码。--> <div> <!--同一个div标签可以占一整行，定义一个单选框,需要用到关键字“radio”-->
<input type="radio" name="yinzhengjie" value="1" checked>男 <!--type="radio"定义出一个可选的按钮,如果在同一个div标签的两个值要二选一的话，可以定义其name的值相等，这样的话就只能从中选出一个啦！checked表示默认选择的类型，所以这里如果你自己不选的话系统会默认选择你是男。-->
<input type="radio" name="yinzhengjie" value="0">女 <!--要注意的是提交按钮是，发送这个标签的不是发送的"男"或者"女",而是value的值.也就是说你选择的是男就会把value的值（即：“1”）发送给后端，反之亦然。--> <div> <!--定义一个复选框，即多选框，需要用到关键字“checkbox”-->
<input type="checkbox" name="habby" value="100" />男
<input type="checkbox" name="habby" value="200" />女
<input type="checkbox" name="habby" value="300" />男女通吃
</div> <div> <!--需要from有enctype="multipart/form-data"属性才能把文件成功提交。-->
<input type="file" name="data" >
<textarea name="memo">我是默认值</textarea> <!--定义一个表格可以多行输入，默认值都在2两个标签之间-->
</div> </div>
<input type="submit" value="Submit提交" /> <!--"submit"用于定义提交内容的按钮-->
<input type="button" value="Button提交" onclick="alert(123);" /> <!--"button"默认是什么功能都没有,用onclick="alert(123);"来定义当用户输入了123就会出现一个小的对话框，更多功能得用js来开发。我们提交数据用"submit"即可。-->
<input type="reset" value="重置"> <!--表示清空用户的选择，恢复默认状态--> </div> <dir>
<select name="city"> <!--定义一个下拉框-->
<option value="bj" selected="selected">北京</option> <!--用selected="selected"定义默认北京北选中了，最终传至也不是传的“北京”字符串而是value所对应的值，即“bj”。-->
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select> <select name="city2" multiple> <!--定义多个下拉框，我们可以用关键字multiple属性来定义可以多选。-->
<option value="bj" selected="selected">朝阳</option> <!--定义默认北京和上海被选中，因为他们都有selected="selected"-->
<option value="sh" selected="selected">海淀</option>
<option value="sz">亦庄</option>
</select>
</dir> </from>
</body>
</html>
index2.html文件
二.demo.html源代码如下
<!DOCTYPE html>
<html>
<head>
<title>尹正杰的网页</title>
<head> <body>
<!--
跳转到id为bottom的元素所在的位置，直接在href中写"#id"属性值。
-->
<a href="#bottom">去底部</a>
<h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1> <!--
使用超链接可以让我们从一个网页跳转到另一个页面,使用a标签来创建一个超链接
属性:
href:
指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整路径。
target:
可以用来指定打开链接的位置，有以下几个可选值:
_self:
表示在当前窗口中打开(默认值)
_blank:
在新的窗口中打开链接 -->
<a href="https://www.cnblogs.com/yinzhengjie/" >我是一个超链接</a><br /><br /> <a href="https://www.cnblogs.com/yinzhengjie/" target="_blank" >我是一个超链接</a><br /><br /> <!--
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
-->
<a href="index2.html" target="jason">我是一个超链接</a><br /><br />
<iframe src="./index.html" width="800px" height="600px" name="jason"></iframe> <!--
center标签中的内容，会默认在页面中居中显示，我们可以将要居中的元素，全都放到center中
该标签不推荐使用，因为咱们完全可以使用css来布局即可。
-->
<center>
<h1><p>我是一个P标签</p></h1>
</center> <p>素胚勾勒出青花笔锋浓转淡<br/><br/>
瓶身描绘的牡丹一如你初妆<br/><br/>
冉冉檀香透过窗心事我了然<br/><br/>
宣纸上走笔至此搁一半<br/><br/>
釉色渲染仕女图韵味被私藏<br/><br/>
而你嫣然的一笑如含苞待放
</p> <!--
如果将链接地址设置为"#"，则点击超链接以后，会自动跳转到当前页面的顶部 html中有一个属性，每个元素都可以设置，该属性可以作为标签的唯一标识，这个属性就是id。
-->
<a id="bottom" href="#">回到顶部</a> | <!--
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的客户端
语法格式:
href="mailto:邮件地址"
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址。
-->
<a href="mailto:admin@yinzhengjie.org.cn">联系我们</a>
</body>
</html>
三.浏览器打开以上代码渲染结果
HTML&CSS基础-超链接的更多相关文章
- 学习笔记（一） HTML+CSS基础课程
这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- HTML3/CSS基础
1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...
- 两天学会css基础（一）
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
随机推荐
- java 方法传值浅拷贝验证
source code import org.junit.Test; public class SigmoidTruncatedSuit { @Test public void main_test() ...
- [转帖]征服诱人的Vagrant！
征服诱人的Vagrant! https://www.cnblogs.com/hafiz/ 一.背景 最近要开始深入学习分布式相关的东西了,那第一步就是在自己的电脑上安装虚拟机,以前在Windows ...
- C++ STL学习总结
1.vector //最好给它一个初始化大小 #include <iostream> #include <vector> using namespace std; int ma ...
- ubuntu 安装和配置 GitLab
一.概述 GitLab 是一个基于 Web 的开源 Git 软件仓库管理器,用 Ruby 编写,包括 wiki,问题管理,代码审查,监控以及持续集成和部署.它使开发人员能够创建,审查和部署他们的项目. ...
- C++11 新特性之智能指针（shared_ptr, unique_ptr, weak_ptr)
这是C++11新特性介绍的第五部分,涉及到智能指针的相关内容(shared_ptr, unique_ptr, weak_ptr). shared_ptr shared_ptr 基本用法 shared_ ...
- CapsLock魔改大法——变废为宝实现高效编辑
前言 CapsLock,也就是键盘左边中间那个大写锁定.平时很少会用到,跟shift功能重复不谈,更多的时候还会带来各种额外的麻烦. 一直以来的都是一个非常碍事讨厌的存在.就是这么一个垃圾键,偏偏却占 ...
- JVM 参数调优配置
在 tomcat 配置文件 tomcat/bin/catalina.sh 中 配置 JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xss1024K -XX ...
- IIS err_connection_timed_out（响应时间过长）
场景:我在服务器的IIS上部署了一个网站,服务器上可以正常打开,然后我用自己的电脑访问,出现如下错误: 原因:服务器的防火墙对入站规则进行了一些限制. 解决方法:1.打开服务器的防火墙-----> ...
- angular复习笔记3-组件
组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...
- MVC中根据后台绝对路径读取图片并显示在IMG中
数据库存取图片并在MVC3中显示在View中 根据路径读取图片: byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); ...