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

JavaWeb の HTML の基本学習を詳しく紹介します。

黄舟
黄舟オリジナル
2017-07-24 13:49:061284ブラウズ

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 までご連絡ください。