HTML+CSSの知識ポイントのまとめ

フロントエンド開発ワークフロー全体

1. プロダクトマネージャーがプロジェクト要件を提案

2. UIデザインドラフト

3. フロントエンドスタッフは静的ページの開発を担当します（バックエンドスタッフは同期している）フロントエンドはデータを準備中です)

4. フロント バックエンドのインタラクション

5. テスト

6. 製品オンライン (プロジェクト後のメンテナンス)

インターネット原理

1. ユーザーがブラウザにアクセスすると、URL をリクエストするために対応するサーバーに送信されます。対応する Web ページ情報

2. サーバーは、URL に対応する Web リソースをコンピューターの一時フォルダーにダウンロードします

3. 一時フォルダー内のリソースフォルダーがブラウザー経由で表示されます (つまり、2 回目の Web サイトのリクエストの速度が大幅に速くなります)

要素

• インライン要素: 行内に複数のインライン要素があり、幅はインライン要素の高さと高さは設定できません

• ブロック要素: 単独で 1 行を占めるブロック要素です。

• インライン ブロック要素: 1 行に複数のインライン ブロック要素を含めることができますが、幅と高さは変更できます。 set

htmlスケルトン構造

• !DOCTYPE.. 文書宣言ヘッダー(html5、html4.01、XHTML)

• html4.01と

htmlには3つの小さな仕様があります
html:ハイパーテキストマークアップ言語; すべての「タグペア」がその中で使用されます

3. head

• meta (charset: UTF-8, GB2312)

1. <meta name="keywords" content="キーワード、キーワード"/ >(上記の 2 つのメタは SEO 最適化のためのものです)

• <title>ページのタイトル</title>meta（charset:UTF-8,GB2312）

• <meta name="description" content="要描述的内容"/>

• <meta name="keywords" content="关键字，关键词"/>
  (以上两个meta都是为了SEO优化)

• <title>页面的标题</title>

body

• 标题<h1></h1><h2></h2>

• 段落 p:虽然p是块元素，但是他里面放的也是图片，文字；

• span:里面用来放文本：图片，文字；

• a链接<a href="要跳往的地址">

• 图片<img src="相对地址/绝对地址"

body

• title <h1></h1><h2></h2>
  🎜🎜🎜段落 p: p はブロック要素ですが、画像も含まれていますとテキスト; 🎜🎜🎜🎜: テキストを配置するために使用されます: 写真とテキスト; 🎜🎜🎜🎜a リンク <a href="ジャンプ先のアドレス"> 🎜image<img src="相対アドレス/絶対アドレス"🎜🎜🎜🎜🎜🎜🎜css: 🎜🎜🎜で書かれています

  内部のスタイルの基本構文

• :
  selector (div) {
  key: value
  }

  p{
  height:40px;
  line-height:40px;
  background-color:red;
  }

• selector:

1. tag selector: div, h, p, a , img、span

2. クラスセレクター: .xinxi
   (クラス名として漢字や数字で始めないでください。必ず英語を使用してください)

htmlさらなる解釈

• html ラベルのネストのみが考慮されます、タブやスペースに関係なく、無数のスペースは 1 つとしてのみカウントされます
  

• 画像タグ <img src="相対パス/絶対パス"/> <img src="相对路径/绝对路径"/>
  

• 相对路径：以当前页面为出发点查找的；(./ 或 不写,找到父级../)

• 绝对路径：都是以http开头的；例如：

• 图片标签上有两个常用属性，src属性：引入图片地址; alt标签：图片无法正常加载时，用来替代的文字；(alt也可以省略)

• a链接常用的属性

1. href:'要跳往的地址',href的作用

• 可以填写绝对路径，跳到直到的网页

• 可以写#：1）不确定地址的时候 2)简单的回到顶部效果

• 利用锚点进行页面切换

title:鼠标以上时的提示

target:打开方式(默认的_self当前页面打开; _blank新页面打开)

这些属性中，title和target都可以省略；

• a链接的锚点使用

1. 本页面各个模块之间的相互跳转
   <div id="#div1"></div>   <a href="#div1"></a>
   2 实现不同页面之间，不同模块的相互跳转
   <a href="detail.html#detail1"></a>

列表

• 无序列表:无序列表中的li也是容器；

  <ul>
  <li></li>
  <li></li>
  </ul>

• 有序列表

  <ol>
  <li></li>
  <li></li>
  </ol>

• 定义列表：dl,dt,dd都是容器

  <dl>
  <dt>表头</dt>
  <dd>详情介绍</dd>
  </dl>

表单

• 表单用

• 输入文本框 <input type="text" placeholder="默认提示"/>

• 输入密码 <input type="password" placeholder="默认提示"/>

• 单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；

  <input type="radio" name="sex"/>男
  <input type="radio" name="sex"/>女

• 多选框 <input type="checkbox" checked/>

• 下拉单

  <select>
  <option name="city" value="bj">北京</option>
  <option name="city" value="sh">上海</option>
  <option name="city" value="sz">深圳</option>
  <select>

• name和value主要用于前端向后台提交数据；

• id：

1. 设置样式(不建议)

2. 在JS阶段，用来获取元素

3. id配合a链接，进行锚点设置；

• 留言框：<textarea name="" value="" cols="" rows=""></textarea>

按钮

• 普通按钮 type=button

• 提交按钮 type=submit

• 重置按钮 type=reset

选择器

• 标签选择器：div h1~h6 p span a img ul li ol dl dt dd input select

添加一个小icon的步骤：

• 到官网上去取图片（以京东为例）：

1. 
   

2. 把以上图片另存为，存到电脑中

3. 注意：把icon图标放到文件夹的"根目录"；

4. 在html页面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>

🎜相対パス: 現在のページに基づいて検索します (./ または書かずに親を見つけます../)🎜🎜🎜🎜 絶対パス: すべて http で始まります: 🎜🎜🎜🎜 よく使用される属性が 2 つあります。画像タグの src 属性: 画像アドレスを導入します。 alt タグ: 画像が正常に読み込めない場合に使用されるテキスト (alt は省略することもできます) 🎜🎜🎜🎜 🎜🎜 🎜🎜href: 'ジャンプ先のアドレス'、href🎜🎜🎜🎜🎜絶対パスを入力してウェブページにジャンプすることができます🎜🎜🎜🎜 #: 1) そうでない場合アドレスを確認してください 2) 返信するだけです 先頭に移動します🎜🎜🎜🎜アンカーポイントを使用してページを切り替えます🎜🎜🎜🎜🎜title: マウスオーバー時にプロンプ​​トを表示します🎜🎜🎜🎜target: 開くメソッド (default _self 現在のページが開きます) ; _blank 新しいページが開きます)🎜🎜🎜 🎜これらの属性のうち、タイトルとターゲットの両方を省略できます🎜🎜🎜🎜🎜🎜a リンクのアンカーポイントが使用されます🎜🎜🎜🎜🎜このページの各モジュール間をジャンプします🎜<div id=" #div1"></div> <a href="#div1"></a>🎜2 異なるページ間の相互ジャンプを実現modules🎜<a href="detail.html#detail1"></a>🎜🎜🎜🎜list🎜🎜🎜🎜順序なしリスト: 順序なしリストの li もコンテナです。 🎜rrreee🎜🎜🎜順序付きリスト🎜rrreee🎜🎜🎜定義リスト: dl、dt、ddはすべてコンテナです🎜rrreee🎜🎜🎜フォーム🎜🎜🎜🎜フォーム使用🎜🎜🎜🎜入力テキストボックス< ;入力タイプ= "text" placeholder=" デフォルトのプロンプト"/>🎜🎜🎜🎜パスワードを入力 <input type="password" placeholder="デフォルトのプロンプト"/>🎜🎜🎜🎜ラジオ ボタン: ラジオ ボタン グループには名前を追加する必要があります。そうしないと、ラジオ選択効果を得ることができません。 🎜🎜🎜ドロップダウンリスト🎜 rrreee🎜🎜🎜の名前と値は、主にフロントエンドがバックエンドにデータを送信するために使用されます🎜🎜🎜🎜id: 🎜🎜🎜🎜🎜🎜 設定スタイル (推奨されません) 🎜🎜 🎜🎜要素を取得するために使用されるJSステージ内🎜🎜🎜🎜 IDはアンカーポイントを設定するリンクと一致します🎜🎜🎜🎜🎜🎜メッセージボックス: <textarea name="" value=""cols; ="" rows=""></textarea> Code> 🎜🎜🎜🎜ボタン>通常のボタン タイプ = ボタン🎜🎜🎜🎜 送信ボタン タイプ = 送信🎜🎜🎜🎜 リセットボタン タイプ = リセット 🎜🎜🎜 🎜 タグセレクター: DIV h1~h6 p span a img ul li ol dl dt dd input select🎜🎜🎜🎜 小さなアイコンを追加する手順: 🎜🎜🎜🎜 公式 Web サイトにアクセスして写真を取得します (JD.com を次のように取得します)例): 🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜上記の画像をコンピューターに保存します🎜🎜🎜🎜注: アイコンをフォルダーの「ルートディレクトリ」に置きます🎜🎜🎜🎜 HTML に追加します。ページ: <code><link rel= "icon" href="favicon2.ico" type="image/x-icon"／>🎜🎜🎜

以上がHTML+CSSの知識ポイントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。