HTML 要素を理解する_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML 要素を理解する_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:47 AM

フロントエンドはますます人気が高まっており、昨年流行した言葉「風に乗った豚」で表現できます。この連載が「基礎がないけどフロントエンドに転職したい人」の助けになれば幸いです。

HTML ドキュメントの基本構造を理解します。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Here is title</title></head><body>    Here is content.</body></html>

HTML ドキュメントは HTML 要素 によって定義され、HTML 要素は開始タグ ) を参照します。終了タグ。

まず、HTML 要素は終了属性の観点から 2 つのカテゴリに分類できます:

自己終了タグとタグ

自闭和标签在html元素中的比例不大，常用的就以下几个：<img  / alt="HTML 要素を理解する_html/css_WEB-ITnose" > <br /> <input /> <hr />从上面的标签可以看出，自闭合标签形如： <标签名 />（建议：/和前面的标签名之间空一格）

手動終了タグ

html元素中大多数标签都是需要我们手动闭合的。手动闭合的意义就是——告诉浏览器，我这个标签里的内容起始位置和结束位置。常用的标签：<h1></h1><h2></h2>...<p></p><div></div><a></a><button></button><span></span><label></label><textarea></textarea><table></table><thead></thead><tbody></tbody><tr></tr><th></th><td></td><ul></ul><li></li><dl></dl><dt></dt><dd></dd><form></form>

今後毎日使用されるいくつかのタグに焦点を当てましょう

img

<img src="" alt="" /><img  / alt="HTML 要素を理解する_html/css_WEB-ITnose" >标签具体两个常用的属性：src (source) 属性是必需的:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；alt 属性是非必需的：它指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容；（备注：我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。）

Paste_Image.png

<br /> 可插入一个简单的换行符。注释：请使用 <br> 来输入空行，而不是分割段落。

入力

<input /> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式:输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

1. テキストボックス

<input type="text" value=""  placeholder="" /><input type="text" value="这是value"  placeholder="" /><input type="text" value=""  placeholder="这里是提示文字" />value代表此文本框中显示的值,placeholder设置的值表示当value为空时，给用户的提示文字。

Paste_Image.png

2. パスワードボックス

<input type="password" value="" /><input type="password" value="123456" /><input type="password" value="" placeholder="请输入密码" />

Paste_Image.png

3. ラジオボタン

<input type="radio" value="male" checked name="gender" /> 男<input type="radio" value="female" name="gender" /> 女value:在界面上不会显示出来；checked:如果存在，则表示默认选中；name： 当多个<input type="radio" />的name属性值相同时，表示这多个单选框，同时只能有一个选中；

Paste_Image.png

4. チェックボックス

<input type="checkbox" value="footballl" checked name="hobbies" /> 足球<input type="checkbox" value="basketball" name="hobbies" /> 篮球多个复选框的name即使相同，也可以同时选中；

Paste_Image.png

テキストエリアelement

<textarea rows="10" cols="30">在这篇文章中，你可以对html元素有基本的了解。</textarea><textarea> 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

Paste_Image.png

a タグ

<a href="http://www.coderyin.com/" target="" title="点击这里可以跳转到我的个人网站">我的个人网站</a>

href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；

Paste_Image.png

タグを選択

<select>  <option value="">请选择学院名称</option>  <option value="1">风景园林学院</option>  <option value="2">家具设计学院</option>  <option value="3">林学院</option>  <option value="4">艺术设计学院</option>  <option value="5">信息科学与技术学院</option></select><select></select> 元素可创建单选或多选菜单；select元素中的<option></option>标签用于定义列表中的可用选项。

Paste_Image.png

画像を貼り付けます。 png

テーブル要素

<table border="1"><thead>  <tr>    <th>姓名</th>    <th>性别</th>  </tr></thead><tbody>   <tr>    <td>abcdefg</td>    <td>男</td>  </tr>  <tr>    <td>殷晓飞</td>    <td>男</td>  </tr></tbody></table>表格一般由多个子元素构成：<table></table>：最外层容器（可以通过设置border属性来控制表格边框）；<thead></thead>：表格头——用于包裹表格的顶部信息;<tbody></tbody>: 表格主题内容;<tr></tr>表示一行记录；<td></td>表示一列，但嵌套在tbody标签的tr标签内；<th></th>也表示一列，但嵌套在thead标签的tr标签内；注意：一个表格只有一个table标签；一个table标签内只有一个thead和一个tbody;一个thead内只有一个tr,thead中的tr中可以有多个th（可以有多列）;一个tbody中可以有多个tr（可以有多行记录）,每个tr中可以有多个td（可以有多列）；

Paste_Image.png

ボタン要素

<button type="button">提交按钮</button>

Paste_Image.png

ラベル要素

<label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /><label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

Paste_Image.png

ul タグ

<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ul></ul> 标签定义无序列表。

Paste_Image .png

ol タグ

<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol type="A"><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol> </ol>标签定义有序列表。ol上有以下几个常用属性：start规定有序列表的起始值，默认为1。type规定在列表中使用的标记类型。

Paste_Image.png

dl タグ

<dl> <dt>各个学院</dt> <dd>风景园林学院</dd> <dd>家具设计学院</dd> <dd>林学院</dd> <dd>艺术设计学院</dd> <dd>信息科学与技术学院</dd></dl><dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。

Paste_Image.png

p タグ

<p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。

h1- h6 タグ

<h1 id="这是标题">这是标题 1</h1><h2 id="这是标题">这是标题 2</h2><h3 id="这是标题">这是标题 3</h3><h4 id="这是标题">这是标题 4</h4><h5 id="这是标题">这是标题 5</h5><h6 id="这是标题">这是标题 6</h6><h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。

Paste_Image.png

div タグ

<div>这里面可以只放文本，也可以放其他任何标签，当然可以放自己</div><div class="news"><h2 id="News-headline">News headline 1</h2> <p>some text. some text. some text...     </p><div>   <a href="#">这是链接</a></div></div><div> 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

Paste_Image.png

スパンタグ

<p><span>殷晓飞</span> <span>web前端</span>  尽己力，听天命。</p><span></span>标签可以放在任何元素中，行内元素，多个span可以在同一行。

Paste_Image.png

フォームタグ

<form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。

これらの基本的な HTML 要素をマスターして、独自のフロントエンド学習の旅を始めましょう~

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版

中国語版、とても使いやすい

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。