フロントエンドの HTML の基本

php中世界最好的语言

リリース： 2018-03-19 11:59:39

オリジナル

1873 人が閲覧しました

今回はフロントエンドにおけるhtmlの基礎知識をフロントエンドで活用する際の注意点についてお届けします。 HTMLの基礎知識

HTMLを学ぶために、まずHTMLの本質を見てみましょう:

Webフレームワークの本質

私たちはソケットを学び、ソケットサーバーを作成して実行します。ソケットサーバーに接続し、接続します。その後、どちらの側も閉じていなくても、ソケットサーバーは開き続け、リクエストは続行できます。

Web サイトについて話しましょう。私たちは Web サイトをサーバー側で実行しており、すべてのクライアントはブラウザーを介して作成した Web サイトにアクセスできるため、私たちが使用する iis、Apache などは本質的に

ソケットサーバー

です。私たちが開いているブラウザは、データ送信のためのクライアントです。 TCP を使用する場合、クライアントとサーバーが接続された後、両側が閉じられていない限り、アクセスと対話を続けることができます。ただし、Web サイトのブラウザーの閲覧はこれとは異なります。ブラウザはサーバーにアクセスし、サーバーはデータを取得した後、接続がすぐに切断されます。それでもデータを取得したい場合は、再度接続を確立する必要があります。つまり、1 つの要求、1 つの応答、1 つの切断です。

以下のソケットサーバーを作成しましょう:

 1 import socket 2  3 def handle_request(client): 4     buf = client.recv(1024) 5     client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8")) 6     client.send(bytes("Hello,Charles",encoding="utf-8")) 7  8  9 def main():10     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)11     sock.bind(('localhost',8000))12     sock.listen(5)13 14     while True:15         connection,addr = sock.accept()16         handle_request(connection)17         connection.close()18 19 if name == 'main':20     main()

ログイン後にコピー

実行後、ブラウザでアクセスできます:

したがって、サーバーの重要なソースは、ソケット接続を確立するためのこれらの 20 行のコードです。

実際、私の Web サイトの表示コンテンツは基本的に、send 関数で hello と clarles を送信し、

<h1 style=&#39;background-color:red&#39;>Hello,Charles</h1>

ログイン後にコピー

などのタグを追加すると、その内容が Web サイトに表示されます。ブラウザに表示されるのは次のとおりです:

したがって、クライアントとサーバーが対話するとき、サーバーは常に

文字列

を返します。ブラウザ上でこの文字列が表示される理由は、画像のスタイルのためです。ブラウザはこの文字列を解析しました。ブラウザはこの形式を認識します。つまり、私たちが学びたいHTMLは、実際にはブラウザが理解できる一連のルールです。これがHTMLの本質です。私たち開発者がしなければならないことは:

1. HTML ルールを学習する (テンプレートとして機能する)

2. データベースからデータを取得し、それを HTML ファイルの指定された場所に置き換えます。将来的に Web で処理される予定

html タグ

知識

コメント: タグ分類:

1. 自己終了タグ: < meta charset="utf-8"> ;

2. タグをアクティブに閉じる: テスト

head 内のタグ

1. ページのエンコーディング (ブラウザにエンコーディングを通知) )

2. 更新してジャンプ:

デフォルトでは 30 秒ごとにページが更新されます

3.キーワード: 検索エンジン用

4. 説明: Web サイトのコンテンツを説明します

5. =EmulateIE7;IE=IE8;IE=IE9;" />

title

网页头部信息：TItle

Link

1.css

2.icon:网站图标

Style

在页面中写样式

例如：

Script

1.引进文件

2.写js代码

< script type="text/javascript" > ...

body内的标签

标签一般分为两种：块级标签和行内标签

行内标签：a、span、select 等

块级标签：p、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格：小于号：> 大于号：<

1.p和br

p表示段落，默认段落之间是有间隔的！

br 是换行

<p>1231<br/>32132</p>
<p>123132132</p>
<p>123132132</p>

ログイン後にコピー

2.H 标签

h1

3.input系列:

a.text文本框：，显示效果：

b.password密码框:输入的密码是点,显示效果：

c. submit提交按钮:,显示效果：

用于表单的提交

d.button按钮:,显示效果：

仅仅只是一个按钮，没有办法进行表单的提交

e. radio单选框：,

name属性如果都相同，则互斥

value属性用于后台获取选择的值

<form>
        <p>
            <p>请选择性别：</p>
        男：<input type="radio" name="gender" value="1"/>
        女：<input type="radio" name="gender" value="2"/>
        </p>
        <input type="submit" value="提交"/>
    </form>

ログイン後にコピー

f.checkbox多选框：

<p>爱好</p>篮球：<input type="checkbox" name="hobby" value="1"/>足球：<input type="checkbox" name="hobby" value="2"/>排球：<input type="checkbox" name="hobby" value="3"/>网球：<input type="checkbox" name="hobby" value="4"/><p>技能</p>
 python：<input type="checkbox" name="skill" value="python"/>
 php：<input type="checkbox" name="skill" value="php"/>

ログイン後にコピー

效果:

如果需要默认选中的话：加一个属性：checked="checked"

g.file上传文件：

如果你要用上传文件功能，你再form表单中一定要加一个属性：enctype='multipart/form-data'

h:reset内容重置:

4.textarea多行文本:

<span style="color: #ff0000">asdfasdf</span>

多行文本的默认值写在中间

5.select下拉框：

<select name="city" size="10" multiple="multiple">
      <option value="1">北京</option>
       <option value="2" selected="selected">上海</option>
       <option value="3">南京</option>
       <option value="4">广州</option>
       <option value="5">深证</option></select>

ログイン後にコピー

显示效果：

参数解释：

size设置一次显示多少个值
multiple可以多选，按住control键
selected="selected"：默认选择的值

分组显示：optgroup，但是这些江苏省，湖南省没有办法选中

<select name="city2" size="5">
     <optgroup label="江苏省">
             <option>宿迁</option>
             <option>苏州</option>
     </optgroup>
     <optgroup label="湖南省">
             <option>湘潭</option>
             <option>长沙</option>
     </optgroup></select>

ログイン後にコピー

效果如图：

6. a标签

作用：

跳转
锚点 :href="#某个标签的id"标签的ID不允许重复

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <p id="i1" style="height:600px;">第一章内容</p>
    <p id="i2" style="height:600px;">第二章内容</p>
    <p id="i3" style="height:600px;">第三章内容</p>
    <p id="i4" style="height:600px;">第四章内容</p></body></html>

ログイン後にコピー

这个就是一个锚的效果：点击第一章，跳转到本页面的第一章位置；点击第二章，跳转到本页面的第二个位置

7.img标签

没有图片显示的内容

注意：默认img标签，有一个1px的边框，在使用的时候应该先用border:0；把边框去掉

8.列表

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <ul style="background-color: red">
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol style="background-color: green">
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
    </ol>
    <dl style="background-color: yellow">
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
    </dl></body></html>

ログイン後にコピー

显示效果如图：

9.表格：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <table border="1">
        <tr>
            <td>主机名</td>
            <td>ip</td>
            <td>端口号</td>
        </tr>
        <tr>
            <td>localhost</td>
            <td>192.168.1.1</td>
            <td>8080</td>
        </tr>
    </table>
    <!--最规范的写法，有表头，有内容-->
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>ip</th>
                <th>端口号</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>localhost</td>
                <td>192.168.1.1</td>
                <td>8080</td>
            </tr>
        </tbody>
    </table></body></html>

ログイン後にコピー

效果显示：

要注意代码的规范性！！

合并单元格：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <!--最规范的写法，有表头，有内容-->
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table></body></html>

ログイン後にコピー

行合并用：rowspan 列合并用：colspan

效果显示：

10.label标签：用于点击文字，使得关联的标签获得光标

<label for="username">用户名：</label><input id="username" type="text" name="user">

ログイン後にコピー

用id把input 和 label进行关联，原本如果只是写一个label和一个input，我们在点击用户名的时候，input没有被选中，如果用for关联了input里的id之后，我们点击“用户名”的时候也就选中input输入框

11.fieldset: 在一个框中然后插入标题

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body>
    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>
            <input id="username" type="text" name="user"><br>
        <label for="password">密    码：</label>
            <input id="password" type="text" name="pwd">
    </fieldset></body></html>

ログイン後にコピー

显示效果：