HTML

咱们今天来看一下咱们这HTML能做些什么，例如下图（最低级的小实验）

咱们来看一下图片的最左上角<head> <title></ title></ head>部分

跟原百度网页有什么区别？对，百度得logo没有，这个咱后面会有讲到

上图得标签内容就是在title标记中写入：百度一下，你就知道

这样就会在网页得标签中呈现出来

<head>

<title>百度一下，你就知道</ title>

</ head>

　　

整个网页可以看成一张巨大的表格：table ，其标记是：<table> </ table>

表格当中有行有列

咱们用以下标记来称呼表格当中得行和列

<tr>  </ tr>  ：行

<td>  </ td> ：列

行和列是包含和被包含的关系

代码如下：

 <table>

         <tr>

             <td></ td>

         </ tr>

 </ table>

讲解下，以上代码代表着一张表，表内有一行一列

咱们为了能让大家看的明显点儿，咱们创建一张含有两行两列的表格，代码如下：

        <table width="200px" height="200px" border="1">

                                <tr>

                                         <td></ td>

                                         <td></ td>

                                </ tr>

                                <tr>

                                         <td></ td>

                                         <td></ td>

                                </ tr>

                </ table>

为了给大家展示的比较清晰，特意加了几个明显得标记，这也是咱们必须要知道的

width : " "    宽度

height : " "   高度

border : " "   边线

单位px ： 像素  显示器包括浏览器都是按照像素px来丈量高度和长度的

呈现效果如下：

咱们现在看到的就是上面代码的呈现效果

大家可以看的出来，每个小方框之间包括距离外层的大表格之间都有一个间距和边距

其实咱们可以消除这个间距和边距

         <table width="200px" height="200px" border="1" cellpadding="0" cellspacing="0">

                 <tr>

                         <td></ td>

                         <td></ td>

                 </ tr>

                 <tr>

                         <td></ td>

                         <td></ td>

                 </ tr>

           </ table>table>

这里又用到两个代码

cellspacing=" "  单元格之间的间距

cellpandding=" "  边距

单位px ： 像素  显示器包括浏览器都是按照像素px来丈量高度和长度的

呈现效果如下：

现在就是消除了间距和边距，只有border=1px的情况下呈现出来的table效果，两行两列

         <table width="200px" height="200px" border="1">

                 <tr>

                         <td></ td>

                         <td></ td>

                 </ tr>

                 <tr>

                         <td></ td>

                 </ tr>

           </ table>

呈现效果如下：

大家也发现了问题所在了，这可能也算是用table做网页的一个小小的弊端，只是比较麻烦，相比较而言，用<div></ div>做起来可能就不会这样子了，不过很多时候都会用到CSS样式表，这个咱们以后会讲

现在表格创建好了，咱们可以在表格得<td> </ td>中间填入你所想要呈现给大家的内容，像是文字、图片、超链接等等

那咱们现在就来讲一下文字同时变成可点击得超链接（单纯的呈现文字很简单，在两个标记中输入你所想要呈现得文字即可）

在这里咱们用到一组很简单的标记

<a href=" "></ a>

咱们简单的称这对标记为 a 标记，a标记中的 href=“ ”  需要填充的是你所想要跳转的链接地址，必须是完整的链接地址（一定别忘了协议）

         <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" >

                 <tr>

                         <td width="350px" height="100px"></ td>

                         <td width="350px" height="100px"></ td>

                 </ tr>

                 <tr>

                         <td width="350px" height="100px"></ td>

                         <td width="350px" height="100px">

                         <a href="http://www.baodu.com">这是文字的跳转超链接</a>

                         </ td>

                 </ tr>

           </ table>

效果图：

大家一定要记得给每个单元格添加长度和宽度，不然就会出现大小不一，如下

超链接的字体下方会出现下划线，并且鼠标移入后会变成可点击得小手样子，这个没办法截图，大家自己动脑想象

上面是文字超链接，现在咱们做一个图片的超链接，很多网站都会有，最常见得淘宝、京东等等，点击图片就会进行链接跳转，代码如下：

         <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" >

                 <tr>

                         <td width="350px" height="100px">

                             <a href="http://www.baidu.com"><img src="../0000000000.png"/></a>

                         </ td>

                         <td width="350px" height="100px"></ td>

                 </ tr>

                 <tr>

                         <td width="350px" height="100px"></ td>

                         <td width="350px" height="100px">

                         <a href="http://www.baodu.com">这是文字的跳转超链接</a>

                         </ td>

                 </ tr>

           </ table>

截至到这里，大家可以猜想一下，以上代码会出现什么问题，动动脑子，插入这张带有链接得图片后，网页上的呈现效果回是什么样子

很明显，型变，表和发生了型变，为了防止这种型变得发生，只需要在图片上加上一组约束即可

         <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" >

                 <tr>

                         <td width="350px" height="100px">

                             <a href="http://www.baidu.com"><img src="../0000000000.png"  width="100%" height="100%"/></a>

                         </ td>

                         <td width="350px" height="100px"></ td>

                 </ tr>

                 <tr>

                         <td width="350px" height="100px"></ td>

                         <td width="350px" height="100px">

                         <a href="http://www.baodu.com">这是文字的跳转超链接</a>

                         </ td>

                 </ tr>

           </ table>

是的，你没有看错，可以用百分比来给宽、高赋值，但是还是按照px（像素）来计算

以上就是文字和图片的超链接制作方式

不知道大家有没有发现一个问题，每次咱们制作好超链接，点击之后都会刷新本页面，然而在工作或者是逛淘宝得时候我不想刷新本页面，因为我还要在本页面买东西或者是两个页面我想对比下

这个时候怎么办？？？

咱们只需要添加如下代码就好

 <a href="http://www.baodu.com" target="new">这是文字的跳转超链接</a>

target="new" 在新的页面打开链接

呈现效果没办法放一个动图，但是可以看标签

截止到这儿是不是还有人在发懵，明明是baidu.com，怎么出来一个宝都钢构呢？请仔细看一下上面得代码

强调多少遍了，要仔细仔细仔细，严谨严禁严谨，看错的俯卧撑50个，麻溜的，沙棱的，做不完不许啪啪啪

现在咱们补充一点，鼠标指到图片上就显示文字和图片无法加载的时候显示的文字

 <img src="../0000000000.png"  title="枫叶" width="100%" height="100%"/>

title="XXXXXX"  鼠标移入显示文字

上面是鼠标移入显示文字

下面是图片无法加载显示文字

 <img src="../0000000.png"  alt="图片加载失败！" width="100%" height="100%"/

上面的代码已经把图片的地址修改成错误地址了，也就说程序找不到原图片了

alt=" XXXXXX" 图片加载失败显示文字

现在还有一些好学得同学会问到：不是超文本么，那文档可以么，txt，doc可以么

答案是：可以！！！

不过不是这种形式出现，而是以下载的方式呈现出来，而txt是可以打开看到的

咱们新建一个名字为Hello的txt放到桌面作为测试用

         <table width="700px" height="200px" border="1" cellspacing="0" cellpadding="0" >

                 <tr>

                         <td width="350px" height="100px">

                             <a href="http://www.baidu.com"><img src="../0000000.png"  alt="图片加载失败！" width="100%" height="100%"/></a>

                         </ td>

                         <td width="350px" height="100px"><a href="../Hell.txt">点击打开Hello.txt</a></ td>

                 </ tr>

                 <tr>

                         <td width="350px" height="100px">

                         <a href="../补刀技巧.docx">点击下载补刀技巧.docx</a>

                         </ td>

                         <td width="350px" height="100px">

                         <a href="http://www.baodu.com" target="new">这是文字的跳转超链接</a>

                         </ td>

                 </ tr>

           </ table>

呈现效果如下

点击打开Hello.txt，呈现效果如下

下图是Hello.txt里面得内容

一次不差

咱们再来看下HTML是怎么打开  .doc这些文件的

创建一个.docx文件，如下

继续

点击下载补刀技巧.docx，会出现以下打开方式

对，是通过下载的方式来打开的

好，今天的课程咱们先讲到这里，新的HTML内容明天再讲

HTML基本代码教学，第二天的更多相关文章

  1. delphi 线程教学第二节：在线程时空中操作界面（UI）

    第二节:在线程时空中操作界面(UI)   1.为什么要用 TThread ?   TThread 基于操作系统的线程函数封装,隐藏了诸多繁琐的细节. 适合于大部分情况多线程任务的实现.这个理由足够了吧 ...

  2. HTML基本代码教学，第三天

    HTML 今天由于个人情况,身体不适,但是为了大家的学习进度,咱们以纯文字得形式来简单了解下今天的学习内容 今儿咱们来了解下表单 <form id=" "  name=&qu ...

  3. 傻瓜式Spring教学第二课

    什么是依赖注入 先说什么是依赖 如下: class A{ B b; } class B{ } 则称A依赖B. 依赖:A的某些业务逻辑需要B的参与,如果不对A中的参数b进行实例化,那么A中的某些业务逻辑 ...

  4. delphi 线程教学第一节：初识多线程

    第一节:初识多线程   1.为什么要学习多线程编程?   多线程(多个线程同时运行)编程,亦可称之为异步编程. 有了多线程,主界面才不会因为耗时代码而造成“假死“状态. 有了多线程,才能使多个任务同时 ...

  5. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. Ukulele 调音

    正常的持琴姿势时,从上到下依次是:4,3,2,1弦,音从上往下是:G,C,E,A: 3弦 - C - Do - D - Re 2弦 - E - Mi - F - Fa 4弦 - G -So 1弦 - ...

  7. 少儿编程|Scratch编程教程系列合集，总有一款适合你

    如果觉得资源不错,友情转发,贵在分享!!! 少儿编程Scratch: 少儿编程Scratch第一讲:Scratch完美的初体验少儿编程Scratch第二讲:奇妙的接球小游戏少儿编程Scratch第三讲 ...

  8. 2019年春季学期《C语言程序设计II》课程总结

    2019年春季学期<C语言程序设计II>课程总结 1.课程情况 教学内容 课堂小结 作业安排 优秀作业 备注 1.开学谈心 2.测验数据类型.运算符与表达式的自学情况,并讲解测验题目3.第 ...

  9. C语言程序设计II—第二周教学

    第二周教学总结(4/3-10/3) 教学内容 根据邹欣老师的建议,临时修改教学计划,将最后一周的内容:第十二章 文件,提前讲授. 课前准备 在博客园发布作业:2019春第二周作业 作业根据本周讲授的& ...

随机推荐

  1. 《metasploit渗透测试魔鬼训练营》学习笔记第九章--meterpreter

    七.强大的meterpreter  7.1再探metasploit的攻击载荷模块     7.1.1典型的攻击载荷模块     metasploit涵盖了各大主流操作系统和平台,其中绝大部分是远程漏洞 ...

  2. 机器学习基石笔记：Homework #2 decision stump相关习题

    原文地址:http://www.jianshu.com/p/4bc01760ac20 问题描述 程序实现 17-18 # coding: utf-8 import numpy as np import ...

  3. Css绘制箭头

    IE6不支持transparent,因此上面的代码在IE6加一点处理透明的hack,修改后的代码如下 IE6下处理transparent   border-left:100px solid trans ...

  4. 404 Note Found队-现场编程

    目录 组员职责分工 github 的提交日志截图 程序运行截图 程序运行环境 GUI界面 基础功能实现 运行视频 LCG算法 过滤(降权)算法 算法思路 红黑树 附加功能一 背景 实现 附加功能二(迭 ...

  5. String系列01 - String 60%

    1.String简介 String类实现CharSequence接口.(同时,实现Serializable, Comparable 接口). String类使用final修饰符,为final类,不可被 ...

  6. C#中如果用await关键字来await一个为null的Task对象会抛出异常

    await & async模式是C#中一个很重要的特性,可以用来提高异步程序(多线程程序)的执行效率.但是如果尝试用await关键字来await一个为null的Task对象,会导致程序抛出Nu ...

  7. SSAS 度量值中的distinct count局聚合方式会数为null的值

    我们来看一个例子 Analysis Services: For Distinct Count measure NULL = 0 If you are to look at the table of v ...

  8. Linux 防止rm -rf 误删Shell脚本

    #!/bin/bash #:set ff=unix #:set nobomb #-*- coding:utf-8 -*- ####################################### ...

  9. 求1!+2!+3!+4!+5!+6!+7!+8!+9!+10!+...+N! N阶阶乘求和算法 JAVA C Python

    一行代码算出1!+2!+3!+4!+5!+6!+7!+8!+9!+10!+...+N!   N阶阶乘求和 时间复杂度为O(n) 空间复杂度为O(1) 对于任意正整数N  求1!-N!一行算出和给定求1 ...

  10. 3.Spring Cloud初相识--------Ribbon客户端负载均衡

    前言: 在生产环境中,未避免单点故障,每个微服务都会做高可用部署. 通白的说,就是每一个一模一样的服务会根据需求提供多分在多台机器上. 那么在大并发的情况下,如何分配服务可以快速得到响应,就成为了我们 ...