概述
       HTML是将内容和内容显示形式结合在一起的语言,它对于内容显示形式的控制,主要是通过标签(元素)的属性,由于它对“内容显示形式”存在着很多的弊端,所以之后就出现了CSS,CSS就相当于HTML标签的属性。

HTML元素的形式
       空元素。例:<br>
       带有属性的空元素。例:<hr color = "blue">
       带有内容的元素。例:<title>http://blog.csdn.net/jiben2qingshan</title>
       带有内容和属性的元素。例:<font color="red">http://blog.csdn.net/jiben2qingshan</title>
       注意:对于<br>这类的标签,我们最好这样写<br />

链接
内部链接
       理论
               1、建立命名锚记,其语法:<a name ="命名锚记名称">
               2、建立链接(链接到相应的锚记),其语法:<a href = "#锚记名称">
       举例(主要代码):
               <a href ="#poem"> A点击这个就会跳转到B </a>
               <!--两行中间相隔一页后的效果会更好-->
               <a name ="poem"> B这个就是跳转后的位置 </a>
       用途
               同一个网页中;打开指定网页的指定位置(href="index.html#1",可以为绝对地址)

外部链接
       链接到外部网站
              <a href ="http://www.baidu.com" target="_blank">百度</a>
       链接到E-mail
              <a href ="mailto:jiben2qingshan@163.com" target="_blank">点击此处会打开默认的电子邮件软件</a>
       链接到FTP
              <a href ="ftp://ftp地址" target="_blank">点击此处可以链接到相应的FTP服务器(一般进入访问FTP服务器需要输入用户名和密码)</a>
       链接到Telnet
              <a href = "telnet://地址" target="_blank">点击此处就可以链接到相应的Telnet服务器</a>
    
 target属性
    取值:_blank,在新窗口中打开被链接文档;_self,默认,在相同的框架中打开被链接文档;_parent,在父框架中打开被链接文档;_top,在整个窗口中打开被链接文档;framename,在指定的框架中打开被链接文档

下载文件

如果超链接指向的不是一个网页文件,而是其他文件例如zip文件等,单击链接的时候就会下载该文件        <a href = "歌名.zip">歌曲名称</a>

图片
       <img src="../1.jpg" alt="无图显示汉字" title="鼠标置顶显示汉字" border="10" vspace="10" hspace="10" width="300" height="300" align="right">
       img便签属性的解释
       src:图片的地址
       alt:当图片不显示时,出现在该位置(原显示图片)的文字
       title:鼠标移至到图片上后出现的文字
       border:图片的边宽,默认为0,边框的颜色黑色,如果是超链接,则和链接文字颜色一致
       vspace:垂直边距,图片在垂直方向上和自己最近的元素的距离
       hspace:水平边距,图片在水平方向上和自己最近的元素的距离
       width,height:如果没有写width和height属性的话,图片就会按照它的原始尺寸显示,有的话就会按它们值的大小显示
       align:图像和“文字”之间的布局
              bottom:图片的底部和当前行的文字底部对齐
              top:图片的底部和当前行的文字顶端对齐
              middle:图片的水平中线和当前行的文字中线对齐
              left:图片左对齐
              right:图片右对齐
              center:图片水平中线和当前行的文字中线对齐(自己试验center和middle的效果一样)

注意        地址一般写成相对地址,尽量不要写绝对地址;“../”表示当前目录的上一级目录,“../../”表示当前目录的上一级的上一级。

表格        表格是网页排版布局不可缺少的一个工具。建立表格一般所用的标签:<table>、<caption>、<tr>、<th>和<td>。主要操作对象:表格,行,单元格,

表格标签<table> </table>

建立表格的整体性标签,其主要属性如下

width,height:设置表格的宽和高,其值可以为数字,也可以为百分数(表格的长宽是相对浏览器的,会随着浏览器大小的改变而改变),如果其值很大的话,系统会自动按照数据量分配空白位置,如果其值很小的话,系统会以显示完整数据为主,该设置值便自动失效;未指定其属性值,则系统会自动计算表格中字段数据的宽度及高度,以能容纳数据的最小单位显示表格

bgcolor,background:设置表格的背景颜色和背景图片。两个属性都是设置背景的,通常只设计其中之一,如果都设置的话,则会显示背景图片

border,bordercolor:设置表格边框宽度和表格边框颜色。

border默认为0,浏览器不显示任何边框(表格四周和单元格),border只能影响表格四周的边框尺寸,并不影响单元格边框的尺寸;

bordercolor默认的颜色为黑色,表格边框(四周和单元格)的颜色都改变

align:设置表格水平方向的对齐方式(left,center和right),只能对整个表格在浏览器页面范围内居中对齐,但是表格里单元格的对齐方式并不会因此而改变,如果要改变单元格的对齐方式,就需要在行、列或单元格内另行定义

cellspacing,cellpadding:设置表格内部每个单元格之间的距离;设置单元格边框与单元格里内容之间的距离,默认情况下,单元格里的内容会紧贴着表格的边框

举例(核心代码):<table width="50%"

height="50%"

bgcolor="red"

background="2.jpg"

border="5"

bordercolor="red"

align="center"

cellspacing="20"

cellpadding="20">

HTML基础知识总结(一)的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识(壹)

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  10. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

随机推荐

  1. 1.4.1 安装Python扩展库

    Python之所以得到各行业领域工程师.策划师以及管理人员的青睐,与涉及各行业各领域开发的扩展库也有很大关系,不仅数量众多.功能强大,关键是用起来很方便.虽然Python标准库已经拥有了非常强大的功能 ...

  2. 优雅到骨子里的Requests

    例子与特性 可以说Requests最大的特性就是其风格的简单直接优雅.无论是请求方法,还是响应结果的处理,还有cookies,url参数,post提交数据,都体现出了这种风格. 以下是一个简单例子: ...

  3. Sencha Toucha 2.1 文件上传

    javascript代码: Ext.onReady(function() { Ext.create('Ext.form.Panel', { title: 'Upload a Photo', width ...

  4. 关于Linux的本地回环路由lo [127.0.0.1 ]

    最近 打算配开发板的socket通讯,打印环境变量发现却没有 127.0.0.1 / # ifconfig -a eth0 Link encap:Ethernet HWaddr 86:43:C9:A1 ...

  5. centos7 安装vsftpd的步骤

    感觉非常坑,依照网上说的没一个都測试了,可一直都报错. 不断的又一次安装不下10次,最后一次最终測试出了正确的方法. #官网配置说明## https://security.appspot.com/vs ...

  6. 查看Linux的CPU信息,核数等

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  7. Linux内核剖析 之 进程简单介绍

    1.概念 1.1  什么是进程?     进程是程序运行的一个实例.能够看作充分描写叙述程序已经运行到何种程度的数据结构的汇集.     从内核观点看.进程的目的就是担当分配系统资源(CPU时间,内存 ...

  8. 在imageView依次加入7个手势, 1.点击哪个button,往imageView上加入哪个手势.(保证视图上仅仅有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女

    // // ControlView.h // HomeworkGestureRecognizer // // Created by lanouhn on 14-8-27. // Copyright ( ...

  9. poj 3498 March of the Penguins(拆点+枚举汇点 最大流)

    March of the Penguins Time Limit: 8000MS   Memory Limit: 65536K Total Submissions: 4873   Accepted: ...

  10. bzoj1699

    st表 我还不会st表 f[i][j]表示[i,i+2^j)区间的最值 构造就像lca一样f[i][j]=f[i][j-1] f[i][j]=max(f[i][j-1],f[i+(1<<( ...