ウェブフロントエンド
htmlチュートリアル
02 HTMLリストブロック行要素スクロール字幕テキスト画像アンカーハイパーリンク相対絶対URL画像tag_html/css_WEB-ITnose
02 HTMLリストブロック行要素スクロール字幕テキスト画像アンカーハイパーリンク相対絶対URL画像tag_html/css_WEB-ITnose
定义列表
块元素和行内元素 网页颜色表示 滚动字幕标记 计算机进制 计算机编码介绍 超级链接 URL介绍 绝对URL和相对URL地址 相对URL地址：一般是用于链接本网站中的各个文件的路径。 其它常用的链接 锚点链接：实现在一个网页的不同部分进行跳转 图片标记 定义列表的格式： 标记的解释说明： dl，define List dt，define title dd，define description 这两个标记，基本上没有太多的属性。 块元素和行内元素(详细在CSS中再讲) 块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。 比如： 、 英文单词表示：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中存在兼容性问题，一般用于CSS中。16进制在HTML和CSS中都可以正常显示。 常用属性： 是块元素 Direction：滚动的方向，取值：left、 right、up、 down Behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次) bgColor：背景颜色 width：滚动的宽度 height：滚动的高度 align：水平对齐方向，取值：left center right scrollAmount：滚动的步长值，值越大，滚动的越快。 scrollDelay：两次滚动间的停留时间 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 ページにジャンプしたい場合は、「ハイパーリンク」を使用する必要があります。 共通属性: Href: ターゲット URL (例: href=http://www.sina.com.cn href=“about/index.html”<🎜) > トップレベル ウィンドウ でターゲット ファイルを開きます。「フレームワーク テクノロジ」でよく使用されます 3、URL概要 ホスト名は、例: php.itcast.cn はホストの第 2 レベルのドメイン名です (第 1 レベルのドメイン名は で始まります)。 WWW）。 3 番目の部分: ディレクトリ名、例: about/20140706/ 4 番目の部分: ファイル名、例: 230.html 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 へのアクセスは常に固定された開始点から始まります。簡単に言うと、開始点は固定されており、ターゲットは可変です。 アドレス: 通常、この Web サイト内のさまざまなファイルをリンクするために使用されるパスです。 相対 URL アドレスを記述するときは、次の 2 つの条件を決定する必要があります。 1) あなたは誰ですか?現在のファイルは誰で、どこにありますか? 2) 対象ファイルは誰ですか?対象のファイルはどこにあるのでしょうか？ 3) 現在のファイルとターゲット ファイルの関係は何ですか? a）ファイル名。画像/01.gif c）ターゲットファイルは上位レベルにあります> 電子メール リンク: ダウンロード リンク: Web ページ上で直接実行できないファイルには、ダウンロード ダイアログ ボックスが表示されます。 Web ページで直接実行できるファイル: .html .jpg .png .gif .htm 空のリンク: 課外活動 100 オンライン フォーラム< /a> ; JS 空リンク: JS 空リンク ヒント: HTML で JS プログラムを記述する場合、通常は「javascript:」で始まり、 void(0) は false 値を返し、何もしません JS で警告ウィンドウがポップアップ表示されます: ヒント:alert() は、文字列メッセージをポップアップする JS Window オブジェクトのメソッドです。 ステップ 1: 最初にアンカーを定義しますポイント（マーク） 第二步：链接到定义的锚点所在的位置 地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top HTML的注释：是对某个模块的解释说明，最终在网页中是看不见的。 注释的内容--> 单边标记： 常用的属性 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。 问答题：一个网页上有100张图片，每张图片1MB，请问网页的大小是多少？ 所有的外部文件，图片、视频、音乐、附件等，都没有真正的插入到网页中，而是写入一个链接的地址，在需要显示文件时，就从服务器上调用该文件。因此，网页的大小，是由文本和标记决定的。 标记 XHTML リアルなヌード写真を作成する AI 搭載アプリ 写真から衣服を削除するオンライン AI ツール。 脱衣画像を無料で AI衣類リムーバー AIヘンタイを無料で生成します。 使いやすく無料のコードエディター 中国語版、とても使いやすい 強力な PHP 統合開発環境 ビジュアル Web 開発ツール 神レベルのコード編集ソフト（SublimeText3）定义列表
<dl> <dt>定义标题</dt> <dd>描述信息</dd></dl>
标记中，至少包含一个
、
、<h1>、<h2>等</p> <p>行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。</p> <p> 比如：<font><b><i><u><a><span>等</p> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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>网页颜色表示
滚动字幕标记
<!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>计算机进制(了解一下)
コンピュータコーディング入門 (文字セット)
ハイパーリンク
<!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>
ホットAIツール
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
人気の記事
ホットツール
メモ帳++7.3.1
SublimeText3 中国語版
ゼンドスタジオ 13.0.1
ドリームウィーバー CS6
SublimeText3 Mac版
ホットトピック
7341
9
1627
14
1352
46
1265
25
1210
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
