ホームページ >ウェブフロントエンド >htmlチュートリアル >02 HTMLリストブロック行要素スクロール字幕テキスト画像アンカーハイパーリンク相対絶対URL画像tag_html/css_WEB-ITnose
02 HTMLリストブロック行要素スクロール字幕テキスト画像アンカーハイパーリンク相対絶対URL画像tag_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:02:381624ブラウズ
定义列表
dc6dce4a544fdca2df29d5ac0ea9906b和45a2772a6b6107b401db3c9b82c049c2
块元素和行内元素
网页颜色表示
滚动字幕标记
计算机进制
计算机编码介绍
超级链接
超级链接的标记3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed，双边标记，是行内元素
URL介绍
绝对URL和相对URL地址
相对URL地址：一般是用于链接本网站中的各个文件的路径。
其它常用的链接
锚点链接：实现在一个网页的不同部分进行跳转
图片标记
定义列表
定义列表的格式：
<dl> <dt>定义标题</dt> <dd>描述信息</dd></dl>
标记的解释说明：
dl，define List
dt，define title
dd，define description
5c69336ffbc20d23018e48b396cdd57a标记中，至少包含一个73de882deff7a050a357292d0a1fca94或67bc4f89d416b0b8236eaa5f43dee742标记，也可以包含多个73de882deff7a050a357292d0a1fca94或67bc4f89d416b0b8236eaa5f43dee742。
73de882deff7a050a357292d0a1fca94定义标题，这个标记是必须的；
67bc4f89d416b0b8236eaa5f43dee742描述信息，可以根据情况使用，如果不需要它，可以不用加。
dc6dce4a544fdca2df29d5ac0ea9906b和45a2772a6b6107b401db3c9b82c049c2
dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114标记，没有任何意义，但在网页中，又是使用最多的标记。
这两个标记，基本上没有太多的属性。
dc6dce4a544fdca2df29d5ac0ea9906b和45a2772a6b6107b401db3c9b82c049c2这两个标记，一般要结合CSS来实现效果，或者说，DIV+CSS来实现各种样式。
块元素和行内元素(详细在CSS中再讲)
块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。
比如：dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee、ff6d136ddc5fdfeffaf53ff6ee95f185c34106e0b4e09414b63b2ea253ff83d65c69336ffbc20d23018e48b396cdd57a、e03b848252eb9375d56be284e690e873、4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da等
行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。
比如：240cb830ca84ebaabbd07850110b414da4b561c25d9afb9ac8dc4d70affff4195a8028ccc7a7e27417bff9f05adf593288f336217b3880082bb52d49b5de60a53499910bf9dac5ae3c52d5ede738348545a2772a6b6107b401db3c9b82c049c2等
<!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>
网页颜色表示
英文单词表示：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万色
6b515229f0e509a8ac43a5dc51919be7e6e38b3c62e8df885fe2e3986461aa63
78ee3fe91d8e72c10b5b6618f8e0789be6e38b3c62e8df885fe2e3986461aa63
0b0b0f3516fb4d8f9715e82046b0d7c6e6e38b3c62e8df885fe2e3986461aa63
注意：10进制在HTML中存在兼容性问题，一般用于CSS中。16进制在HTML和CSS中都可以正常显示。
滚动字幕标记
ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b
常用属性：
是块元素
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>
计算机进制(了解一下)
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 です。つまり、1 つの 16 進数は 4 つの 2 進数で表現できます。
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 |
バイナリ | 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 ビット バイナリ) で表されます。 1 つの文字は合計 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 を拡張して、珍しい中国語の古代文字を表示します。現在約21,000件が登録されています。 1890 の漢字コード ポイントを提供します。 Kは「拡張」を意味します。
Unicodeエンコーディング (均一エンコーディング) : 文字を表すために 4 バイト (32 ビット バイナリ) を使用します。 、アイデアは良いですが、効率が低すぎます。たとえば、文字 A が ASCII で表される場合は 1 バイトで十分ですが、Unicode でエンコードできる場合は 4 バイトで表す必要があるため、スペースが膨大に無駄になります。
A は、0000 0000 0000 0000 0000 0000 01000000 を使用して
UTF-8 (Unicode Transform Format): 文字に応じて、エンコードの長さを選択します。たとえば、文字 A は 1 バイトで表され、漢字は 2 バイトで表されます。
ハイパーリンク
1. コンセプト: ある Web ページから別の Web ページにジャンプしたい場合は、「ハイパーリンク」を使用する必要があります。
2、ハイパーリンク タグ 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed、両面タグはインライン要素です
共通属性:
Href: ターゲット URL (例: href=http://www.sina.com.cn href=“about/index.html”
名前: 主にアンカーポイントの名前を設定するために使用されます。ターゲット: ターゲットページの開き方を設定します。
_blank: 新しいウィンドウでターゲット ファイルを開きます。元のウィンドウは閉じません。
_self: 現在のウィンドウでターゲット ファイルを開きます。元のウィンドウの内容は閉じられません。取り替えられる。
_top:
トップレベル ウィンドウ でターゲット ファイルを開きます。「フレームワーク テクノロジ」でよく使用されます
_parent: 親ウィンドウ内ターゲット ファイルを開きます。「フレームワーク テクノロジ」でよく使用されます例: c45f98d213392095a868d4fc707378db5db79b134e9f6b82c0b36e0489ee08ed
3、URL概要
URL (UniformResource Locator、Uniform Resource Locator)例: http://php.itcast.cn/about/20140706/230.html
URL (Web サイト) は 4 つの部分で構成されます:
最初の部分: プロトコル、例: http:// ftp://
どのサーバーであるかを確認するにはどうすればよいですか?主にどのような種類のサーバー ソフトウェアがインストールされているかによって決まりますか? Apache ソフトウェアは WWW サーバーです
FTP ソフトウェア サーバーがインストールされている場合は、FTP サーバー
ホスト名は、例: php.itcast.cn はホストの第 2 レベルのドメイン名です (第 1 レベルのドメイン名は で始まります)。 WWW）。
3 番目の部分: ディレクトリ名、例: about/20140706/
4 番目の部分: ファイル名、例: 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
アドレス: 通常、この Web サイト内のさまざまなファイルをリンクするために使用されるパスです。 相対 URL アドレスを記述するときは、次の 2 つの条件を決定する必要があります。 1) あなたは誰ですか?現在のファイルは誰で、どこにありますか?
2) 対象ファイルは誰ですか?対象のファイルはどこにあるのでしょうか？
3) 現在のファイルとターゲット ファイルの関係は何ですか?
a）ファイル名。画像/01.gif
c）ターゲットファイルは上位レベルにあります>
5、その他の一般的に使用されるリンク 電子メール リンク: ダウンロード リンク: Web ページ上で直接実行できないファイルには、ダウンロード ダイアログ ボックスが表示されます。 Web ページで直接実行できるファイル: .html .jpg .png .gif .htm 空のリンク: ee7959cc8dd4be16ef633321c03dac32課外活動 100 オンライン フォーラムc66e7bab98fbdfb371180fb070d4138cJS 空リンク5db79b134e9f6b82c0b36e0489ee08ed ヒント: HTML で JS プログラムを記述する場合、通常は「javascript:」で始まり、 void(0) は false 値を返し、何もしません JS で警告ウィンドウがポップアップ表示されます: ヒント:alert() は、文字列メッセージをポップアップする JS Window オブジェクトのメソッドです。 ステップ 1: 最初にアンカーを定義しますポイント（マーク） 674528fe93140c10eeeea5deb56433625db79b134e9f6b82c0b36e0489ee08ed 中间一般不写内容 第二步：链接到定义的锚点所在的位置 66ad767f0f40c00ced942ede3ef2e81d返回顶部5db79b134e9f6b82c0b36e0489ee08ed 地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top HTML的注释：是对某个模块的解释说明，最终在网页中是看不见的。 d3b8bb2881e25b6613d88f8df4fccd1f 单边标记：a1f02c36ba31691bcfe87b2722de723b 常用的属性 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。 280ad6db0c3dc0657e041eb1dbba77088b87a451fcc80686b9448713db1053065db79b134e9f6b82c0b36e0489ee08ed 问答题：一个网页上有100张图片，每张图片1MB，请问网页的大小是多少？ 所有的外部文件，图片、视频、音乐、附件等，都没有真正的插入到网页中，而是写入一个链接的地址，在需要显示文件时，就从服务器上调用该文件。因此，网页的大小，是由文本和标记决定的。 e8e496c15ba93d81f6ea4fe5f55a2244标记 XHTML <!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> 图片标记
<!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>