MOOC HTML+CSS コースノート_html/css_WEB-ITnose

内容は MOOC.com から引用しています

html

は強調を意味し、 はより強い強調を意味します。ブラウザでは、 はデフォルトで斜体で表現され、 は太字で表現されます。 2 つのタグと比較して、国内のフロントエンド プログラマは現在、強調を表現するために を使用することを好みます。

タグにはセマンティクスはなく、その機能は別のスタイルを設定することです。

引用するテキストに二重引用符を追加する必要はありません。ブラウザは自動的に q タグに二重引用符を追加します。 Text

ブラウザは、インデントされたスタイルで

タグを解析します。

タグは空のタグです。HTML コンテンツを含まないタグは、開始タグのみを記述します。そのようなタグには、
が含まれます。 ; と

スペースコード 

<!--有2个空格-->来源：作文网  作者：为梦想而飞 

水平分割線

---

会社の住所などの連絡先情報は、

タグで使用できます。ドキュメントのアドレス (電子メール アドレスなど)、署名、または作成者を定義することもできます。

<address>北京市西城区德外大街10号</address>

アドレスで定義されたテキストはデフォルトで斜体になります。

通常、記事に複数行のコードを挿入する場合は、 タグを使用できます。


 タグは、コンピューターのソース コードを表示するためだけでなく、Web ページで形式を事前に表示する必要がある場合にも使用できます。 pre> タグはコンピュータのソースコードを表示します。 <p></p> </li> Web ページの作成プロセス中に、いくつかの独立した論理部分を分割して、この <div> タグの中に入れることができます。 <li> </li><div> にいくつかのタグを入れて、独立した論理部分に分割します。ロジックを明確にするために、この独立した論理部分に名前を設定し、id 属性を使用して <div> に一意の名前を付けることができます。これは、各人が固有の ID 番号を持っているようなものです。私たちのアイデンティティを識別するものであり、一意である必要があります。 <li> </li><tbody>…</tbody>: 表の内容が多い場合は表がダウンロードされて少し表示されますが、<tbody> タグを追加すると表が表示されなくなります。すべてのテーブルの内容がダウンロードされるまで。 <li> </li>まとめの内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。 <li> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode">   语法：<table summary="表格简介文本">

ログイン後にコピー

タイトル

テーブルの内容を説明するために使用されます。タイトルはテーブルの上部に表示されます。

文法:

<table>    <caption>标题文本</caption>    <tr>        <td>…</td>        <td>…</td>        …    </tr>…</table>

ハイパーリンクを実装するには、 タグを使用します。これは、リンクがある場所には必ず存在します。

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

title 属性の役割 リンクテキスト上でマウスをスライドすると、この属性のテキスト内容が表示されます。この属性は、実際の Web 開発において主に、検索エンジンがリンク アドレスの内容を理解しやすくするために役立ちます (意味的によりわかりやすい)

Web ページ内の電子メール アドレスをリンクするために mailto を使用する方法については、MOOC.com で詳しく説明されています。 。

画像を挿入するには タグを使用します。

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

title: 画像が表示されているときに画像の説明を提供します (マウスを画像上に移動すると表示されるテキスト)。

フォームフォームの post メソッドと get メソッドの比較

HTML フォーム (フォーム) を使用します。フォームはビューアによって入力されたデータをサーバーに送信できるため、サーバー側プログラムはフォームから渡されたデータを処理できます。

そうです

すべてのフォーム コントロール (テキスト ボックス、テキスト フィールド、ボタン、ラジオ ボックス、チェック ボックスなど) は

タグの間に配置する必要があります (そうしないと、ユーザーが入力した情報をサーバーに送信されました!)。

ユーザーがフォームに文字や数字などを入力する場合、テキスト入力ボックスが使用されます。テキストボックスをパスワード入力ボックスに変換することもできます。

<form   method="传送方式" action="服务器文件">

1. 入力します:

type="text" の場合、入力ボックスはテキスト入力ボックスです。

type="password" の場合、入力ボックスはパスワード入力ボックスです。

2. name: バックグラウンド プログラム ASP および PHP で使用するテキスト ボックスに名前を付けます。

3. 値: テキスト入力ボックスのデフォルト値を設定します。 (通常はプロンプトとして使用されます)

ユーザーがフォームにテキストの大部分を入力する必要がある場合は、テキスト入力フィールドを使用する必要があります。

<form>   <input type="text/password" name="名称" value="文本" /></form>

ユーザーは、ラジオ ボタン ボックスでは 1 つのオプションのみを選択できますが、チェック ボックスでは複数のオプション、またはすべてのオプションを選択することもできます。

<textarea rows="行数" cols="列数">文本</textarea>

注: 同じグループ内のラジオ ボタンがラジオ選択として機能できるように、同じグループ内のラジオ ボタンの名前の値は一貫している必要があります。

下拉列表

<form action="save.php" method="post" >    <label>爱好:</label>    <select>      <option value="看书">看书</option>      <option value="旅游" selected="selected">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>    </select></form>

value值是向服务器提交的值。

下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

提交按钮

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。

<input type="reset" value="重置">

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

<label for="控件id名称">

CSS

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。

CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在