フロントエンドHTMLのナレッジポイントのまとめ

1. HTML概要

htyperテキストマークアップ言語はハイパーテキストマークアップ言語です

ハイパーテキスト: ページに画像、リンク、さらには音楽やプログラムなどの非テキスト要素も含めることができることを意味します。

マークアップ言語：マーク（ラベル）から構成される言語

Web ページ == ブラウザによって解析され、表示に使用される HTML ドキュメント

静的 Web ページ: xxx.html などの静的リソース

動的 Web ページ: HTML コードは、ユーザーのリクエストに基づいて特定の開発言語によって動的に生成されます

以下はHTMLファイルのツリー構造図です

レーベルのコンセプト:

• は、山かっこで囲まれた 2 つの単語で構成されます。例: *すべてのタグ内の単語を数字で始めることはできません。
タグでは大文字と小文字が区別されません。
タグは開始タグ と終了タグ の 2 つの部分に分かれています。 2 つのタグの間の部分はタグ本体と呼ばれます。
• 一部のタグ関数は、1 つのタグを使用するだけです。たとえば、

  ---

  
• タグはネストできますが、

タグ属性:

通常は、name="alex" などのキーと値のペアの形式で表示されます。

属性は開始タグまたは自己終了タグにのみ使用できます。
属性名はすべて小文字です。*属性値は二重引用符または一重引用符で囲む必要があります (例: name="alex")。
• 属性値と属性名が全く同じ場合は、例えばreadonly
のように属性名を直接記述します。
• 2. headの主なタグの紹介

メタ タグの構成: メタ タグには、http-equiv 属性と name 属性の 2 つの属性があり、これらの異なるパラメータ値により、異なる Web ページ機能が実現されます。 。

1 name 属性は主に Web ページを記述するために使用され、対応する属性値は content であり、コンテンツ内のコンテンツは主に検索エンジンのロボットが情報を検索し、情報を分類するために使用されます。

2 http-equiv は、名前が示すように、http のファイル ヘッダー関数と同等であり、Web ページのコンテンツを正確かつ正確に表示するのに役立ついくつかの有用な情報をブラウザーに返すことができます。 content in content 実際には、各パラメータの変数値です。

(秒の前と URL の後ろの引用符に注意してください) )

• 3. ボディタグ

基本タグ:

: n の値の範囲は 1 ～ 6 で、タイトルを表すために使用されます。

: 段落タグ。折り返されたコンテンツも、上部と下部のコンテンツの間に空白行が入ります。

: 太字のラベル。

: テキストに中心線を追加します。

: テキストは斜体になります。

^{と _{: 上付き文字と下付き文字。}}

: 改行。

---

: 水平線

　　

　　块级标签和内联标签

　　块级标签：

　　内联标签：_{^{><span></span>}}

　　block（块）元素的特点
　　① 总是在新行上开始；

　　
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

　　inline元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

　　对行内元素，需要注意如下 
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

 

　　特殊字符：

      < >；"；©®

　　图形标签：　　

　　src: 要显示图片的路径.

　　alt: 图片没有加载成功时的提示.

　　title: 鼠标悬浮时的提示信息.

　　width: 图片的宽

　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

　　超链接标签:　

　　href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

 

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

 

　　name: 定义一个页面的书签.

 

　　用于跳转 href : #书签名称.

 

　　列表标签:　　

　　

: 无序列表

　　

:有序列表

     

1. :列表中的每一项.

   　　

   定义列表

        

   列表标题

        

   列表项

   　　表格标签

：
　　

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素 百分比.（最好通过css来设置长宽）

　　

: table row

         　　

(不常用): 为表格进行分区

　　表单标签

　　

　　表单用于向服务器传输数据。

      表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label 元素。

　　1、表单的属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get 默认取值 就是 get（信封）

　　 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　 get/post是常见的两种请求方式.

　　2.表单元素

　　

　　     type:     text 文本输入框

passwordパスワードパスワード入力ボックス

ラジオラジオボタン

O チェックボックス - 複数選択ボックス

提 送信ボタン

Button ボタン (js で使用する必要があります。) button と submit の違いは何ですか?

ファイル送信ファイル: フォームフォームには属性 enable = "multipart/form-data" を追加する必要があります

リーリー

コードを表示

Name: フォーム送信アイテムのキー。id 属性との違いに注意してください。name 属性はサーバーとの通信時に使用される名前であり、この属性は主にブラウザーで使用されます。クライアントプログラミングの利便性と cssとjavascriptで使用されます。

value: フォーム送信項目の値。入力タイプが異なると、value 属性の使用方法も異なります。

type="button", "reset", "submit" - ボタンに表示されるテキストを定義します

type="text", "password", "hidden" - 入力フィールドの初期値を定義します

type="checkbox", "radio", "image" - 入力に関連付けられた値を定義します

チェック済み: ラジオとチェックボックスはデフォルトでチェックされています

読み取り専用: テキストとパスワード

無効: 使用されるすべての入力に対して正常に動作します。

ドロップダウンでラベル属性を選択します:

を通して

サイズ: オプションの数

複数: 複数

O & lt; オプション & gt; ドロップダウンの各属性: 値: フォーム送信項目の値。 選択内容はデフォルトで選択されます。 O

テキストエリア名: フォーム送信項目のキーcols: テキストエリアのデフォルトの列数 rows: テキストエリアのデフォルトの行数

>

>ログイン

> type="text"> >

: table head cell	: table data cell 　　rowspan: 单元格竖跨多少行 　　colspan:  单元格横跨多少列（即合并单元格）	: table header