Heim > Web-Frontend > HTML-Tutorial > 02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记_html/css_WEB-ITnose

02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:02:38
Original
1617 Leute haben es durchsucht

定义列表

块元素和行内元素

网页颜色表示

滚动字幕标记

计算机进制

计算机编码介绍

超级链接

超级链接的标记,双边标记,是行内元素

URL介绍

绝对URL和相对URL地址

相对URL地址:一般是用于链接本网站中的各个文件的路径。

其它常用的链接

锚点链接:实现在一个网页的不同部分进行跳转

图片标记


 

定义列表

 

定义列表的格式:

<dl>       <dt>定义标题</dt>       <dd>描述信息</dd></dl>
Nach dem Login kopieren

标记的解释说明:

dl,define List

dt,define title

dd,define description

标记中,至少包含一个
标记,也可以包含多个

定义标题,这个标记是必须的;

描述信息,可以根据情况使用,如果不需要它,可以不用加。

标记,没有任何意义,但在网页中,又是使用最多的标记。

这两个标记,基本上没有太多的属性。

这两个标记,一般要结合CSS来实现效果,或者说,DIV+CSS来实现各种样式。

块元素和行内元素(详细在CSS中再讲)

块元素(标记):是块元素的前后,会自动插入一个换行符。块元素会另起一行进行排版。

比如:

      、<h1>、<h2>等</p>   <p>行内元素(标记):行内元素的高度和宽度由内容决定。多个行内元素将排在同一行,不会另起一行进行排版。</p>   <p>       比如:<font><b><i><u><a><span>等</p>   <p> </p>   <pre class="scode"><!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />       <title>定义列表</title>        <style type="text/css">              div,p,span,b{border:1pxsolid #993300;background-color:#f0f0f0;}        </style></head> <body ><h2>定义列表的应用</h2> <p><font color="red"size=4>说明文字:小试牛刀!</font></p> <hr color="green" size=2> <dt><b>HTML简介</b></dt>       <dd>html是超文本链接</dd> <dt><b>CSS介绍</b></dt>       <dd>层叠样式表</dd>  <h2>div 和 span 标记 ,单独使用,没有任何效果</h2> <hr color="green" size=2>  <div>从“众筹之王”破产看无人机创业必须要迈的四道坎不过就在上周,Zano无人机,这个2014年年底Kickstarter的众筹冠军,未坚持到自己的一周年生日便宣布倒闭,15000多台订单大多无法交货,支持者的340万美元打了水漂。</div>  <div>从“众筹之王”破产看无人机创业必须要迈的四道坎不过就在上周,Zano无人机,这个2014年年底Kickstarter的众筹冠军,未坚持到自己的一周年生日便宣布倒闭,15000多台订单大多无法交货,支持者的340万美元打了水漂。</div><div></div><div>块元素会自动另起一行</div><p>p标记也是块元素,比如:div、p、ul ol dl  pre h1 h2等 </p><span>span标记1,行元素</span><span>span标记2,内容多宽,就占用多宽</span><span>span标记3,不会自动换行</span><b>b标记也是行元素</b><b>b标记 2</b><b>b标记 3</b>  </body></html>
      Nach dem Login kopieren

      网页颜色表示

      英文单词表示:red、green、blue、yellow等。

      10进制表示:

      有10基本数:0、1、2、3、4、5、6、7、8、9

      红色:rgb(255,0,0)

      绿色:rgb(0,255,0)

      蓝色:rgb(0,0,255)

      16进制表示:

      有16个基本数:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F

      红色:#FF0000

      绿色:#00FF00

      蓝色:#0000FF

      RGB色彩模式(理解)

      自然界中所有的颜色,都可以通过红、绿、蓝三种光的不同波长,来混合而成。共可以混合约1670万种颜色。

      RGB色彩模式也叫加色模块,任何两种色加在一起,可以产生第三种颜色。

      红+绿=黄

      红+蓝=紫色

      绿+蓝=青色

      在计算机中,每一种基本色用0-255之间的亮度值来表示。

      黑色:RGB(0,0,0) #000000

      白色:RGB(255,255,255) #FFFFFF

      每一种基本色,都是用1个字节(8位二进制,10101010)来表示(2^8=256)。256*256*256=1670万色

      注意:10进制在HTML中存在兼容性问题,一般用于CSS16进制在HTMLCSS中都可以正常显示

      滚动字幕标记

      常用属性:

      是块元素

      Direction:滚动的方向,取值:left、 right、up、 down

      Behavior:滚动的方式,取值:alternate(弹动)、scroll(滚动)、slide(滚动一次)

      bgColor:背景颜色

      width:滚动的宽度

      height:滚动的高度

      align:水平对齐方向,取值:left center right

      scrollAmount:滚动的步长值,值越大,滚动的越快。

      scrollDelay:两次滚动间的停留时间

      <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /><title>滚动字幕</title><styletype="text/css">marquee{border :1pxsolid #F00}</style></head><marqueedirection="up" height="200" bgcolor="#CCCC33"behavior="scroll" scrollamount="5"scrollamount="2">    <ul>        <li>Hello World !</li>        <li>Hello World !</li>        <li>Hello World !</li>        <li>Hello World !</li>        <li>Hello World !</li>        <li>Hello World !</li>     </ul></marquee><body></body></html>
      Nach dem Login kopieren


      计算机进制(了解一下)

      10进制:基本数0、1、2、3、4、5、6、7、8、9 运算规则:逢十进一

      2进制:基本数0、1 运算规则:逢二进一 例如:11 加1后 100

      8进制:基本数0、1、2、3、4、5、6、7,运算规则:逢八进一

      八进制的基数R=2^3=8,也就是说:一位8进制可以用3位二进制来进行表示。

      16进制:基本数0、1、2、3、4、5、6、7、8、9、A、B、C、D、E F,运算规则:逢16进一

      16进制的基数R=2^4=16,也就是说,一位16进制可以用4位二进制来进行表示。

      10进制

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      8进制

      1

      2

      3

      4

      5

      6

      7

      10

      11

      12

      13

      14

      15

      16

      17

      20

      21

      22

      23

      16进制

      1

      2

      3

      4

      5

      6

      7

      8

      9

      A

      B

      C

      D

      E

      F

      10

      11

      12

      13

      2进制

      1

      10

      11

      100

      101

      110

      111

      1000

      1001

      1010

      1011

      1100

      1101

      1110

      1111





      计算机编码介绍(字符集)

      (1)什么是计算机编码

      计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符,我们定义一套规则来表示。假如:A用110表示,B用111表示等。

      (2)常用的字符编码

      ASCII码:美国发布的,用1个字节(8位二进制)来表示一个字符,共可以表示2^8=256个字符。

      美国的国家语言是英语,只要能表示0-9、a-z、A-Z、特殊符号。

      ANSI编码:每个国家为了显示本国的语言,都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字,共可以表示2^16=65536个汉字。

      中国的ANSI编码是GB2312编码(常用汉字的编码) 对6763汉字进行编码,600多特殊字符。

      日本的ANSI编码是JIS编码;

      台湾的ANSI编码是BIG5编码;

      ……

      GBK对GB2312进行了扩展,用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

      Unicode编码(统一编码):用4个字节(32位二进制)来表示一个字符,想法不错,但效率太低。例如,字母A用ASCII表示的话一个字节就够,可用Unicode编码的话,得用4个字节表示,造成了空间的极大浪费。

      A 用0000 0000 0000 0000 0000 0000 01000000表示

      UTF-8(Unicode Transform Format):根据字符的不同,选择期编码的长度。比如:字符A用1个字节要以,一个汉字用2个字节表示。

      超级链接

      1、概念:要想从一个网页跳转到另一个网页,就需要使用“超级链接”来实现。

      2、超级链接的标记,双边标记,是行内元素

      常用属性:

      Href:目标URL,如:href=http://www.sina.com.cn href=“about/index.html”

      Name:主要用于设置一个锚点的名称。

      Target:设置目标页面打开方式。

      _blank:在新窗口中来打开目标文件,原来的窗口不关闭

      _self:在当前窗口中来打开目标文件,原来窗口中的内容将被替换掉。

      _top:在最顶层窗口中来打开目标文件,常用于“框架技术”中

      _parent:在父级窗口中来打开目标文件,常用于“框架技术”中

      例如:

      3URL介绍

      URL(UniformResource Locator,统一资源定位器)

      例如:http://php.itcast.cn/about/20140706/230.html

      一个URL(网址)由四个部分构成:

      第一部分:协议,比如:http:// ftp://

      如何判断是什么服务器?主要是看安装了什么样的服务器软件?Apache软件是WWW服务器

      如果安装了FTP的软件的服务器,FTP服务器;

      如果安装了邮箱服务器的软件,那就是“邮件服务器”;

      如果安装了MySQL软件的服务器,那就是“数据库服务器”;

      第二个部分:主机名,比如:php.itcast.cn就是一个主机的二级域名(一级域名是以WWW开头的)。

      第三部分:目录名,比如:about/20140706/

      第四部分:文件名,比如:230.html

      4、绝对URL和相对URL地址

      绝对URL地址:一般是以主机名或IP地址开始的一个路径。比如:

      http://www.sina.com.cn/index.html

      http://www.sina.com.cn/about/index.html

      http://www.sina.com.cn/news/20140706/230.html

      http://www.sina.com.cn/users/register.php

      提示:绝对URL的访问,总是从一个固定的起点开始,它们是访问的目标文件不相同,简单说:起点是固定的,目标是可变的。

      相对URL地址:一般是用于链接本网站中的各个文件的路径。

      在写相对URL地址时,要确定两个条件吧:

      1) 你是谁?当前文件是谁,在哪里?

      2) 目标文件是谁?目标文件在哪里?

      3) 当前文件和目标文件是什么关系?

      a) 平级关系的路径,直接目标文件名即可

      b) 目标文件在下一级,先写同级的文件名称,再加一个斜线,后跟目标文件名。images/01.gif

      c) 目标文件在上一级,往上一级先写“./”

      i. ../ 代表上一级文件夹

      ii. ../../ 代表上二级文件夹 如:../day1/images/01.png

      5、其它常用的链接

      E-mail链接:给我发邮件

      下载链接:任何网页不能直接执行的文件,都会出现下载对话框。

      网页可以直接执行的文件:.html .jpg .png .gif .htm

      空链接:课外100网论坛

      JS空链接:JS的空链接

      提示:在HTML中写JS程序时,一般是以“javascript:”开头,void(0)返回一个假值,什么也不做

      JS的弹出一个警告窗口:请点我!

      提示:alert()是JS的Window对象的一个方法,弹出一个字符串信息。

      6、锚点链接:实现在一个网页的不同部分进行跳转

      第一步:先定义一个锚点(记号)

      中间一般不写内容

      第二步:链接到定义的锚点所在的位置

      返回顶部

      地址栏中的地址显示:http://www.sina.com.cn/about/index.html#top

      HTML的注释:是对某个模块的解释说明,最终在网页中是看不见的。

      注释的内容-->

      <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /><title>无标题文档</title><style type="text/css">div{       width:200px;/*宽度*/       margin:0pxauto;  /*居中显示*/       font-size:18px;   /*文字大小*/       line-height:180%;/*行高是原来的1.8倍*/      }</style></head> <body><!--定义一个锚点--><a name="top"></a><div>!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,<a href="#top">返回顶部</a></div></body></html>
      Nach dem Login kopieren

      图片标记

      单边标记:02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记_html/css_WEB-ITnose

      常用的属性

      Src:指图片的路径,如:src=“images/bg.gif”

      Width:指图片的宽度,不加单位。Width=400

      Height:指图片的高度。

      Align:指图片的水平对齐方式,取值:left center right

      Border:图片的边框线的粗细

      Alt:如果图片不显示时,将显示alt指定的内容

      Hspace:指图片左右的边距

      Vspace:指图片上下的边距

      Title:指定图片的提示信息,有利于SEO优化(关键字优化)

      说明:title是一个公共的属性,任何标记都有title属性。

      注意事项:

      (1) 如果要想保证图片等比例缩放,请只设置width和height其中一个。

      (2) 如果想实现图文混排的效果,请使用align属性,取值为left或right。

      dasdas

      <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /><title>无标题文档</title><style type="text/css">div{       width:800px;/*宽度*/       margin:0pxauto;  /*居中显示*/       font-size:18px;   /*文字大小*/       line-height:180%;/*行高是原来的1.8倍*/      }</style></head> <body><!--定义一个锚点--> <a name="top"></a>  <div>!纯数字,<a href="images/01.gif"target="_blank"><img src="images/01.gif"width="300" border=4 align="right" alt="dasdas" title="214143"hspace=50 /></a>不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,不行!纯数字,<a href="#top">返回顶部</a></div></body></html>
      Nach dem Login kopieren

       

       

       

       

       

       

       

      问答题:一个网页上有100张图片,每张图片1MB,请问网页的大小是多少?

      所有的外部文件,图片、视频、音乐、附件等,都没有真正的插入到网页中,而是写入一个链接的地址,在需要显示文件时,就从服务器上调用该文件。因此,网页的大小,是由文本和标记决定的。

       

       

      标记

      XHTML

       

       

       

       


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage