検索
ホームページウェブフロントエンドhtmlチュートリアルJavaWeb の HTML の基本学習を詳しく紹介します。

JavaWeb01_html 基本

html 操作アイデア

  • タグを使用して操作するデータをラップし、タグの属性値を変更することでタグ内のデータ スタイルを変更します

フォント タグ

  • 属性:サイズ 値の範囲 1 ~ 7 色: 英単語、16 進数 #ffffff

タイトルタグ <h1></h1>

<h1> </h1> ... <h6> </h6>

  • 从h1到h6越来越小,自动换行

注释

  • <!-- html的注释 -->

列表标签

  • <dl> <dt></dt> <dd></dd> </dl>

  • 有序

  • 无序

图像标签

  • <img src="/static/imghwm/default1.png" data-src="图片的路径" class="lazy" style="max-width:90%" height="" alt="">

  • alt:浏览器的兼容性很差

路径(相对路径)

  • 在同一级目录:直接写

  • 在下一层目录:images/1.jpg

  • 在上层目录: ../

超链接标签

<a href="%E8%B7%AF%E5%BE%84">显示在页面上的内容</a>

  • 打开方式 target=”_self _blank”

  • 默认是在当前页面打开

表格标签



    
        
           
    

html的五个规范

  • 一个html文件开始标签和结束的标签

  • html包含两部分内容

    • 设置相关信息

    • 显示在页面上的内容都写在body里面

  • html的标签是成对的

  • html的代码不区分大小写

  • 有些标签,在标签内结束。比如换行:<br> 分割线:<hr>

表单标签

  • 可以提交数据到服务器,这个过程可以用表单标签实现

  • <form></form>

    • get请求地址栏会携带提交的数据,post不会携带

    • get请求安全级别较低,post较高

    • get请求数据大小的限制,post没有限制

    • 常用的有两种 get和post get默认就是get请求

    • action:提交到地址,默认提交到当前页面

    • method:表单的提交方式

    • enctype: 一般请求下不需要这个属性,做文件上传时候需要设置这个属性

    • 面试题目:get和post区别

  • 输入项:可以输入内容过选择内容的部分

    • 普通输入项:<input type="text">

    • 密码输入项:<input type="password">

    • 单选输入项:<input type="radio"><br>-> 在里面需要属性name<br>-> name的属性值必须要相同<br>-> 必须有一个value值

    • 复选输入项:<input type="checkbox"><br>-> 在里面需要属性name<br>-> name的属性值必须要相同<br>-> 必须有一个value值

    • 文件输入项(在后面上传时侯用到)<br>-> <input type="file">

    • 下拉输入项(不是在input标签里面的)<br>

      <select name="birth">
          <option value="0">请选择</option>
          <option value="1991">1991</option>
          <option value="1991">1992</option>
          <option value="1991">1993</option>
          <option value="1991">1994</option>
      </select>
    • 文本域<br>

    • <textarea cols="10" rows=""></textarea>
    • 隐藏项(不会显示在页面上,但是存在于html代码里面)<br>

    • <input type="hidden"/>
    • 提交按钮<br>

    • <input type="submit"/>
      <input type="submit" value="注册"/>
    • 使用图片提交<br>

    • <input type="image" src="a.jpg"/>
    • 大部分的输入项使用 <input type="输入项的类型">

html中其它的常用标签的使用

  • b –加粗

  • s –删除线

  • u –下划线

  • i –斜体

  • pre –原样输出

  • subsup

    🎜 h1 から h6 までどんどん小さくなり、自動行折り返し🎜🎜🎜🎜 comments🎜🎜🎜🎜<!--html comments-->🎜🎜🎜🎜タグのリスト🎜🎜 🎜🎜<dl> <dt></dt> </dl>🎜🎜🎜注文済み🎜🎜🎜 🎜画像タグ🎜🎜🎜🎜<img src="/static/imghwm/default1.png" data-src="画像パス" class="lazy" style="max-width:90%" height="" alt="">🎜🎜🎜🎜alt:Browse サーバーの互換性は非常に貧弱です 🎜🎜🎜🎜パス(相対パス) 🎜🎜🎜🎜を同じレベルのディレクトリに:直接書きます 🎜🎜🎜🎜を下位のディレクトリに:images/1.jpg 🎜🎜🎜🎜を上位のディレクトリに: 。 . /🎜🎜🎜🎜ハイパーリンク タグ🎜🎜<a href="path">ページに表示されるコンテンツ</a>🎜🎜🎜🎜 target="_self _blank" で開きます 🎜🎜 🎜🎜デフォルトは現在のページで開きます🎜🎜🎜🎜テーブルタグ🎜rrreee🎜htmlの5つの仕様🎜🎜🎜🎜HTMLファイルの開始タグと終了タグ >🎜🎜🎜🎜html にはコンテンツの 2 つの部分が含まれています🎜🎜
      🎜🎜関連情報を設定します🎜🎜🎜🎜本文にはページに表示される内容が記述されます🎜🎜🎜🎜🎜html タグはペアになっています🎜🎜🎜🎜html コードでは大文字と小文字が区別されません🎜🎜🎜🎜一部のタグはタグ内で終了します。たとえば、改行: <br> 区切り行: <hr>🎜🎜🎜🎜フォームタグ🎜🎜🎜🎜は、このプロセスは、フォームタグ🎜🎜🎜🎜<form></form>およびを使用して実現できます🎜🎜
        🎜🎜get リクエストのアドレス バーには送信されたデータが含まれますが、post にはデータが含まれません🎜🎜🎜🎜get リクエストのセキュリティ レベルは低く、post のセキュリティ レベルは高くなります🎜🎜🎜🎜 get リクエストのデータ サイズ制限、post には制限はありません🎜🎜🎜🎜 一般的に使用される get と post の 2 つがデフォルトで Get リクエストです🎜🎜🎜🎜 アクション: アドレスに送信し、現在のページに送信します。 default🎜🎜🎜🎜method: フォーム送信メソッド🎜🎜🎜🎜enctype : この属性は一般的なリクエストには必要ありません🎜🎜🎜🎜インタビューの質問: get と post の違い🎜🎜🎜 🎜🎜入力項目:内容を入力し、内容部分を選択できます🎜🎜
          🎜🎜通常の入力項目:&lt ;input type="text"/>🎜🎜🎜🎜パスワード入力項目: <input type="password">🎜🎜🎜🎜ラジオ入力項目: <input type="radio"><br>-> 内には属性名が必要です。<br>-> 名前の属性値は同じである必要があります。 >-> 値が必要です 🎜🎜🎜🎜入力項目を確認してください: <input type="checkbox"><br>-> 属性名が必要です。 br/>-> name の属性値は同じである必要があります。<br>-> ファイル入力項目 (後でアップロードするときに使用します) が必要です。<br>-> <input type="file">🎜🎜🎜🎜ドロップダウン入力項目 (input タグ内ではありません)<br>🎜rrreee🎜🎜🎜テキストフィールド<br>🎜🎜🎜rrreee 🎜🎜🎜非表示の項目 (ページには表示されませんが、HTML コードには存在します)<br>🎜 🎜🎜rrreee🎜🎜🎜送信ボタン<br>🎜🎜🎜rrreee🎜🎜🎜画像送信を使用する<br>🎜🎜🎜rrreee🎜🎜🎜入力項目のほとんどは<input type="入力項目「/>」を使用しています🎜🎜🎜🎜🎜HTMLでの他の一般的なタグの使用🎜 🎜🎜🎜b – 太字🎜🎜🎜🎜s – 取り消し線🎜🎜🎜🎜u – 下線🎜🎜🎜🎜i< /code> – イタリック体 🎜🎜🎜🎜<code>pre – そのまま出力 🎜🎜🎜🎜 sub および sup – 下付き文字と上付き文字 🎜
        • div – 自動行折り返し div –自动换行

        • span –在一行显示

        html头标签的使用

        • 可以使用link标签引入css文件

        • 可以统一设置超链接的打开方式<base target="_blank"> –设置全文超链接以新窗口打开

        • <meta name="keywords" content="学习,熊出没"> –以前的搜索引擎检索方式

        • <meta http-equiv="refresh" content="3; url="> –三秒跳转

        • 在head里面的标签就是头标签

        • title标签:表示在标签上显示的内容

        • 标签:设置页面的一些相关的内容

        • base标签:设置超链接的基本设置

        • link标签:引入外部文件

      框架标签的使用

      使用框架标签的时候,不能写在body里面,使用了框架标签,需要把body去掉

      • <frameset></frameset>标签

        • rows:按照行进行划分 <frameset rows="80, *"></frameset>

        • cols:按照列进行划分 <frameset cols="80, *"></frameset>

      • <frame>标签

        • <frame name="lower_left" src="b.html">

        • span – 1 行で表示

        • HTML ヘッダー タグの使用

          html は頭と体の 2 つの部分で構成されます🎜🎜
            🎜🎜 link タグを使用して CSS ファイルを導入します 🎜🎜🎜🎜 はハイパーリンクの開き方を統一的に設定できます <base target="_blank"> – 新しいウィンドウで開くように全文ハイパーリンクを設定します🎜🎜🎜🎜<meta name="keywords" content="調査、クマが出没しています"> – 以前の検索エンジンの検索方法 🎜🎜🎜🎜<meta http-equiv="refresh" content="3; url= "> - 3 秒ジャンプ🎜🎜🎜🎜head 内のタグが head タグです🎜🎜🎜🎜title タグ: に表示される内容を示しますタグ🎜🎜🎜🎜 タグ: 設定 ページのいくつかの関連コンテンツ🎜🎜🎜🎜ベースタグ: ハイパーリンクの基本設定を設定します🎜🎜🎜🎜リンクタグ: 外部ファイルを導入します🎜🎜🎜🎜

            フレームタグ

            🎜フレームタグを使用する場合、ボディに記述することはできません、フレームタグが使用されているため、ボディを削除する必要があります🎜
              🎜🎜&lt ;frameset> タグ🎜🎜
                🎜🎜rows: 行に従って分割します<frameset rows="80, *"></frameset>🎜🎜🎜🎜cols: 列で分割 <framesetcols></framesetcols>🎜🎜🎜🎜🎜<frame>ラベル 🎜🎜
                  🎜🎜🎜🎜🎜🎜詳細表示🎜🎜🎜🎜のページ

    以上がJavaWeb の HTML の基本学習を詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

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

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

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

    テキストからウェブサイトへ: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の理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

    webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

    HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

    HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

    HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

    htmlisaspecifictypeofcodefocuseduructuringwebcontent

    HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

    HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

    HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

    HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

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

    ホットツール

    VSCode Windows 64 ビットのダウンロード

    VSCode Windows 64 ビットのダウンロード

    Microsoft によって発売された無料で強力な IDE エディター

    EditPlus 中国語クラック版

    EditPlus 中国語クラック版

    サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 最新バージョン

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、