ウェブフロントエンドhtmlチュートリアル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 オンライン フォーラム 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 定义列表
<dl> <dt>定义标题</dt> <dd>描述信息</dd></dl>
标记中，至少包含一个
、
、<h1>、<h2 id="等">等 </h2>
</h1><p>行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。</p> <p> 比如：<font><b><i><u><a><span>等</span></a></u></i></b></font></p> <p> </p> <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 id="定义列表的应用">定义列表的应用</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 id="div-nbsp-和-nbsp-span-nbsp-标记-nbsp-单独使用-没有任何效果">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="/static/imghwm/default1.png" data-src="images/01.gif" class="lazy" style="max-width:90%" border=4 align="right" alt="dasdas" title="214143"hspace=50 /></a>不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，不行！纯数字，<a href="#top">返回顶部</a></div></body></html>
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
