html的基本使用（HTML标签解释）

一、链接
在HTML中超文本的链接非常重要，基本格式如下：
<A HREF="资源地址">链接文字</A>

1、本地链接
①绝对路劲：
<A HREF="C:\images\article.jpg">绝对路劲链接到本地图片</A>
②相对路劲
<A HREF ="article2.jpg"> 相对路劲链接到本地图片</A>
③链接到上一级目录
<A HREF="../test.htm">链接到上一级目录</A>

2、URL链接
形式：协议名：//主机.域名/路劲/文件名
协议包括：
file       本地系统文件
http      WWW服务器
ftp        ftp服务器
telnet     基于TELNET的协议
mailto    电子邮件
news      Usenet新闻组
gopher   GOPHER服务器
wais       WAIS服务器
如：<A HREF="http://www.jb51.net"> 百度一下</A>

3、目录链接
首先把某段落设置为链接位置，格式为：
<A NAME="链接位置名称"></A>
再调用此链接部分的文件，定义链接：
<A HREF="文件名#链接位置名称">链接文字</A>
当然如果在一个文件内跳转，文件名就可以省略不写。

二、多视窗口FRAMES
使用FRAMES结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每个小窗口可分别载入不同的文件，并且可以相互沟通。
1、基本结构：
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<FRAME SRC="url">
...
</FRAMESET>
</HTML>
2、各窗口的尺寸设置
我们将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现。
<frameset cols=#>
<frameset rows=#>
#的值为一对用引号括起来的字符串，字符串中的数字表示每个窗口所占的大小，中间用逗号隔开，其中的数字也可以用"*"来代替，表示由浏览器自动分配大小。如
<frameset cols="100,200,300">
<frameset rows="10%,20%,70%">
<frameset cols="100,*,*">     将100像素以外的窗口平均分配
3、各窗口间的相互操作
①frame的src属性 用来指定要链接的内容，name属性指定该窗口的名字，target属性用来指定所链接的文件出现在哪一窗口，其值可以是name定义的名称，也可以是下面四类值：
<a href=url target=_blank>    显示一个新窗口
<a href=url target=_self>       显示在同一个窗口
<a href=url target=_parent>  显示在Frameset的前一份文件的窗口
<a href=url target=_top>       显示在整个浏览器窗口
②frame的其他属性
<frame frameborder=#> #=yes,no
frameborder指定各窗口边框的设置:yes表示有边框，no表示无边框

<frame marginwidth=# marginheight=#>
#的值为像素点，该属性用来设置窗口的上下左右边界宽度，如不设定，由浏览器自动决定。

<frame scrolling=#>#=yes,no,auto
滚动条设置，yes表示有，no表示没有，auto表示由浏览器自动设置，缺省值是auto。

<frame noresize="noresize">
noresize 属性规定用户无法调整框架的大小。默认地，可以通过拖动框架之间的“墙壁”来改变框架的大小，该属性可以锁定框架的大小。

三、样式表
1.样式表最重要的作用是提供了一种能使所有web页面的样式保持一致的方法。
样式表的三个层次按照从低层到高层的顺序依次是：
①.内置（inline）样式表：适用于单个元素的内容
②.文档层（document level）样式表：适用于整个文档的主体
③.外部（external）样式表：可以应用在多个文档的主体中
在使用时，如果出现冲突，低层次的样式表具有使用上的优先权。
2.使用CSS需要注意的问题：
①有些浏览器可能不支持某些属性值，这时浏览器要么忽略这些属性值要么用一个可选值代替。
②内置样式只适应单个元素，其实违背了样式表的设计初衷，所以应该谨慎使用。
③文档层样式说明出现在文档的头部分，适用于文档的整个主体。所以网站建设的整体风格能够保持一致就是这么实现的。
④外部样式表不属于使用它的文档的一部分，外部样式表需要单独存储，并且使用它时都要进行说明。可以使用MIME类型text/css将外部样式表编写成一些文本文件，它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。网页首部的<link>元素也可用于指定外部样式表，在<link>中，rel属性用于指定被链接的文档与包含改链接的文档之间的关系，而href属性用于指定样式表文档的URL地址。如
<link rel=stylesheet type="text/css" href="themes/AutoTheme/style.css"></link>

四、span和div
<span> 的使用
在有些情况下，要求某些特殊的字体属性只应用于整个段落的部分文本，比如把某个字或词组设置为不一样的字体或背景等等。这是就可以使用<span>元素，比如：
<p>我非常喜欢<span style="font-size:24pt;font-family:黑体;color:red">编程</span>，这是一件非常愉快的事。</p>

<div>的使用
在网页中，节是很常见的形式，每节由若干段落构成，若在设计中，希望不仅是对各个段落，而是可以对网页中的节进行样式设置。这时就可以使用<div>，它的主要用途是指定网页中某节或某区域的外观展示细节。

赞 (0)

相关推荐

  • HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage(HTML5本地存储技术)

    WebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data.Flash Cookie.Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用cookie.有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念? Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业

  • HTML服务器控件和WEB服务器控件的区别和联系介绍

    HTML服务器控件和WEB服务器控件的区别和联系介绍

    学习asp.net的时候,视频中总是做例子,这当然是一件好事,可是一会用Html服务器控件,一会用Web服务器控件,起初做起例子来也挺迷糊的,不知道怎么选择这个控件,心里别着这个扣也是很不舒服,决定先把它研究研究再继续学习,当时只是做了笔记但是没有好好的总结,今天把这部分知识重新整理一下拿出来与大家分享一下. 1.什么是Html服务器控件? 是HTML元素的一种演变,通过将HTML元素转换为HTML服务器控件,也就是添加Runat="Server"属性,这样就使得HTML元素组件可以在

  • HTML页面滚动时获取离页面顶部的距离2种实现方法

    方法一:DOM 复制代码 代码如下: <script> window.onscroll = function() { console.info(window.scrollY); } </script> 注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px) 方法二:jQuery 复制代码 代码如下: $(function() { $(window).scroll(function() { console.info($(window).scro

  • 使用Java获取html中Select,radio多选的值方法

    复制代码 代码如下: //jsp中的select多选代码<select name="selectvalues" size="4" multiple="multiple">  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option val

  • HTML Color Picker(js拾色器效果)

    File Name : colorpicker.html Requirement : Internet Explorer or Mozilla Author : Jean-Luc Antoine Submitted : 26/03/2005 Category : 4K 复制代码 代码如下: <form name="recherche" method="post" action="yourpage.html"><input typ

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • [js高手之路]HTML标签解释成DOM节点的实现方法

    [js高手之路]HTML标签解释成DOM节点的实现方法

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick

  • html的基本使用（HTML标签解释）

    一.链接在HTML中超文本的链接非常重要,基本格式如下:<A HREF="资源地址">链接文字</A> 1.本地链接①绝对路劲:<A HREF="C:\images\article.jpg">绝对路劲链接到本地图片</A>②相对路劲<A HREF ="article2.jpg"> 相对路劲链接到本地图片</A>③链接到上一级目录<A HREF="../test

  • python实现简易自习室座位预约系统

    python实现简易自习室座位预约系统

    目录 0 效果 1 关于所需库 2 关于座位选择框 3 关于申请表和座位被占情况 3.1 orderList.json: 3.2 occupied.json: 4 关于命令行参数 4.1 slotCard_in 4.2 slotCard_out 4.3 cmd_order 4.4 cmd_leave 5 关于命令行输出 5.1 cmd_order 预约 5.2 slotCard_in 刷卡进入 5.3 cmd_leave 申请离开或暂离 5.4 slotCard_out 刷卡离开或暂离 6 关于

  • 解决@Autowired注入static接口的问题

    目录 @Autowired注入static接口问题 @Autowired自动注入普通service很方便 但是如果注入static修饰的service则注入不了 后来网上百度了一下,看到了一个方法 标签解释 导致@Autowired注入失败的问题 背景 原因 @Autowired注入static接口问题 @Autowired自动注入普通service很方便 如: @Component public class WarningMatterUtil { //报警表 @Autowired privat

  • 如何用Python实现大学座位预约

    如何用Python实现大学座位预约

    在大学,有很多喜欢的课是需要抢的.但是,这个课的人数和座位都是有限的,今天这个教程教你如何抢到座位,有座位了还怕听不到课吗?赶紧学起来吧,真的很有用噢! 0. 效果 座位选择框 1. 关于所需库 Python 环境中需要安装下列 python 包: 1.PySide2 2.datetime 3.json 4.argparse 2. 关于座位选择框 选择框内桌子数量,大小,样式以及每个椅子位置都是可变的,例如我们可以将桌子颜色和是否圆角改变: 这主要依靠seatInf.json内的信息,展示如下:

  • 使用Python实现大学座位预约功能

    使用Python实现大学座位预约功能

    目录 0. 效果 1. 关于所需库 2. 关于座位选择框 3. 关于申请表和座位被占情况 3.1 orderList.json: 3.2 occupied.json: 4. 关于命令行参数 4.1 slotCard_in 4.2 slotCard_out 4.3 cmd_order 4.4 cmd_leave 5. 关于命令行输出 5.1 cmd_order 预约 5.2 slotCard_in 刷卡进入 5.3 cmd_leave 申请离开或暂离 5.4 slotCard_out 刷卡离开或暂

  • HTML <!DOCTYPE> 标签

    在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页没有声明DOCTYPE,它就会以默认的DOCTYPE解释下面的HTML.在同 一种标准下,不同浏览器的解释模型都有所差异,如果声明标准不同,不用我说,您自己想就可以了.学习网页标准,浏览器兼容,从哪里开始您自己决定,但是, 请认识DOCTYPE: 一.什么是DOCTYPE DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本.要想制作符合标准的页面,一个必不

  • html label标签的使用教程

    在Dreamweaver8中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释:  Label 中有两个属性是非常有用的,一个是FOR.另外一个就是ACCESSKEY了.  FOR属性  功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点.  用法:<Label FOR="InputBox">姓名</Label

  • PHP实现HTML标签自动补全代码

    一般情况下先用PHP的 strip_tags 函数去掉所有html标签,再去掉空格等,然后再用substr或者自己实现的cn_substr函数来实现截取.因为如果不先去掉html标签,直接截取出来的字符串就会有没有闭合的标签出现,有时甚至会截取在标签上面比如 复制代码 代码如下: </di ... 今天遇到一个内容翻页截取问题: 正文是用富文本编辑器写入的,编辑器上有个分页按钮,点击之后就往当前光标位置插入一个蓝色的 复制代码 代码如下: <hr /> 横线.然后php直接存入数据库.显

  • 解决Angular.Js与Django标签冲突的方案

    前言 大家应该都知道,Django和Angular的模板系统使用了非常相似的标签系统,比如说,都是使用{{ content }}表示变量名字.所以Django和Angular配合使用的时候,会引起冲突.我在网上找到了一些解决方法.现在总结后分享给大家,下面来一起看看吧. 一. 改变AngularJs的默认标签 下面的代码可以将Angular原来的标签改成{[{ content }]} . 修改Angular的标签 myModule.config(function($interpolateProv

随机推荐