HTML 教程之常用html标签

前端三把利器：

HTML：赤裸裸的人
- 20个标签
CSS：华丽的衣服
- 颜色
- 位置
- ……
JS：让这个人动起来

一、HTML本质及在web程序中的作用

web访问中，浏览器充当一个socket客户端。
浏览器获取数据：一次请求、一次响应，连接断开。
写一个简单的web socket服务端：

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",encoding='utf-8'))

    client.send("<h1 style="color:red">Hello</h1>")

    # f = open('index.html', 'r', encoding='utf-8')

    # data = f.read()  # 文件中读取。

    # f.close()

    # client.send(data)

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

    sock.bind(('localhost', 8000))

    sock.listen(5)

    while True:

        connection, address = sock.accept()

        handle_request(connection)

        connection.close()

if __name__ == '__main__':

    main()

　　服务端返回的数据只是字符串，而浏览器不同样式的显示，只是浏览器可以解释这套规则。HTML就是一套规则，浏览器认识的规则。通python解释器解释py代码一样。

　
HTML：
　学习HTML规则
　开发后台程序
　　- 写html文件（充当模板作用）
　　- 数据库获取数据，然后替换到html文件中指定位置（web框架）

一般写静态页面时，不用写socket服务端，直接打开浏览器就支持。另外通过Pycharm打开也可以，Pycharm自动帮我们启动一个socket服务端。

二、HTML基本框架

<!DOCTYPE html>  <!--告诉浏览器使用什么样的html或xhtml规范来解析html文档-->

<html lang="en">  <!--html标签(只能一个)，指定语言en-->

<head>

    <meta charset="UTF-8">  <!--指定编码-->

    <title>Title</title>  <!--标题-->

</head>

<body>

</body>

</html>

　　标签分类：

　　　　自闭合标签（meta、link）、

　　　　主动闭合标签

三、head内标签 Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。

　　1. 页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

　　2. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

<!--5秒后跳转-->

　　3. 关键词

< meta name="keywords" content="星际2,专访,F91,小色,JOY" >

　　4. 描述

　　5. X-UA-Compatible

　　主要是为了支持IE，专为IE设置。

<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />

<!--极速模式以IE新版本打开，兼容模式以支持老版本打开；或指定以IE9打开，无则再以IE8打开等等-->

　　head标签里除了meta、title标签，还有link、style、script标签。

LInk标签：　

css 连接其他文件css样式

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon 指定title上网站小图片

< link rel="shortcut icon" href="image/favicon.ico">

四、body内标签之特殊符号、换行等

上面的内容了解就好，body内的标签比较重要。

1、html特殊符号

&nbsp;     # 空格
&gt;      # 大于号 >

&lt;      # 小于号 <

2、br换行 p段落

<p>FFFFFFF<br>FFFFFFFF</p>  # p标签：一个段落    br标签：换行

# <br> 和 <br /> 效果一样。半闭合标签加上/更明确显示半闭合标签

3、h标签标题

<h1>FGF</h1>

<h2>FGF</h2>

<h3>FGF</h3>

<h4>FGF</h4>

<h5>FGF</h5>

<h6>FGF</h6>

<span>FGF</span>

<span>FGF</span>

所有的标签可以分为两类：块级标签和内联标签。

　　块级标签带有特性
　　　　块级标签占一整行;

　　内联标签带有特性

　　　　内联标签内容有多少占多少。

4、div标签

div和span都是白板，div是块级标签、span是内联标签。
标签之间可以嵌套，父子级的关系。
标签存在的意义：便于给内容做操作、动态效果，定位容易。

chrome审查元素的使用

定位
查看样式

五、body内标签之input系列

1、输入框

<body>

    <form action="http://127.0.0.1:8888/index" method="POST">

    <!--form标签，一个表单。提交表单到action地址。-->

    <!--提交数据时，默认以get形式发过去。

    get提交：数据拼接到url上后再提交；post会把数据放到内容里面提交过去

    服务端需要知道发送方式才确定怎么取；抓包都能抓到，没啥谁比谁安全一说-->

        <!--input框向后台提交数据，一定加上name。数据形成字典发给后端-->

        <input type="text" name="user" value="默认值" />  <!--普通文本输入框-->

        <input type="password" name="pwd" />  <!--密码输入框-->

        <input type="button" value="登录" />  <!--按钮-->

        <input type="submit" value="提交" />  <!--提交按钮-->

    </form>

</body>

　　实例：以get方式提交搜索信息到sogou地址：

<body>

    <form action="https://www.sogou.com/web">

        <input type="text" name="query" />

        <input type="submit" value="搜索" />

    </form>

</body>

　　解析：由于sougo搜索使用的是get方式的提交方式，测试时在text输入框内输入了“sogou一下”，跳转到了搜狗搜索，

　　url为：https://www.sogou.com/web?query=sogou%E4%B8%80%E4%B8%8B，将数据拼接到了url后，再提交。

　　在chrome浏览器中查看提交的信息如下：

2、单选框、复选框、上传文件

<form enctype="multipart/form-data">

    <div>

        <p>请选择性别：</p>

        男：<input type="radio" name="gender" value="1" checked="checked" />

        女：<input type="radio" name="gender" value="2"/>

        <!--value、name属性（name相同则互斥，checked默认值。）-->

        <p>请选择爱好：</p>

        篮球：<input type="checkbox" name="favor" value="1" checked="checked" />

        足球：<input type="checkbox" name="favor" value="2" />

        皮球：<input type="checkbox" name="favor" value="3" />

        <p>技能：</p>

        撩妹：<input type="checkbox" name="skill" value="1" checked="checked" />

        代码：<input type="checkbox" name="skill" value="2" />

        <p>上传文件：</p>

        <input type="file" name="fname"/>

        <!--依赖form表单属性 enctype="multipart/form-data",表示把文件一点一点发给服务器-->

    </div>

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

    <input type="reset" value="重置" />  <!--reset 重置-->

</form>

六、body内标签之多行文本及下拉框

多行文本textarea和下拉框select 以及上面的input 三个标签都可以数据提交到后台。

    <textarea name="meno" >默认值</textarea>

    <select name="city" size="2" multiple="multiple">

    <!--size=2:显示两个值；multiple：按住ctrl可以多选。-->

        <option value="1">北京</option>

        <option value="2" selected="selected">上海</option>  <!--默认值-->

        <option value="3">广州</option>

        <option value="4">深圳</option>

    </select>

    <select>

        <!--分组-->

        <optgroup label="北京市">

            <option>昌平区</option>

            <option>朝阳区</option>

        </optgroup>

        <optgroup label="山东省">

            <option>济南市</option>

        </optgroup>

    </select>

七、body内标签之超链接

a标签的功能：

跳转
锚

    <a href="http://www.cnblogs.com/zoe233" target="_blank">博客地址</a>

    <!--target="_blank：在新窗口打开页面"-->

    <a href="#i1">第一章</a>  <!--跳转到当前页面的i1 这个ID上-->

    <a href="#i2">第二章</a>  <!--ID是唯一的。-->

    <div id="i1" style="height:600px;">第一章的内容……</div>

    <div id="i2" style="height:600px;">第二章的内容……</div>

八、body内标签之图片及表格、列表

　　图片img

　　列表ul、ol、dl（标题dt，内容dd）

    <a href="http://www.cnblogs.com/zoe233">

        <img src="1.jpg" title="美女" style="height:360px;width:274px;" alt="美女">

        <!--title：图片标题；alt：当图片不存在时显示alt内容-->

    </a>

    <ul>  <!--无序列表-->

        <li>无序</li>

        <li>无序</li>

    </ul>

    <ol>  <!--有序列表-->

        <li>有序</li>

        <li>有序</li>

    </ol>

    <dl>  <!--分组列表-->

        <dt>标题</dt>

        <dd>内容</dd>

        <dd>内容</dd>

        <dt>标题</dt>

        <dd>内容</dd>

        <dd>内容</dd>

    </dl>

表格 <table><thead><tr><th><td>

合并单元格 colspan, rowspan

    <table border="1">  <!--border：宽度-->

        <thead>

            <tr>

                <th>表头1</th>

                <th>表头2</th>

                <th>表头3</th>

                <th>表头4</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td colspan="3">1</td>  <!--行 合并单元格-->

            </tr>

            <tr>

                <td rowspan="2">1</td>  <!--列 合并单元格-->

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

        </tbody>

    </table>

九、body内标签之fieldset标签和label标签

fieldset 边框，边框上可以有文字。

    <fieldset>

        <legend>登录</legend>

        <!--用于点击文字，是的关联的标签获取光标。-->

        <label for="username">用户名：</label>

        <!--默认只有点输入框才能输入，设置了for='username',label和id关联后，点用户名也能输入内容-->

        <input id="username" type="text" name="user" />

        
　　　　　<p></p>

        <label for="pwd">密　码：</label>

        <input id="pwd" type="password" name="user" />

    </fieldset>

十、html标签总结

HTML

    1、一套规则，浏览器认识的规则。

    2、开发者：

        学习Html规则

        开发后台程序：

            - 写Html文件（充当模板的作用） ******

            - 数据库获取数据，然后替换到html文件的指定位置（Web框架）

    3、本地测试

         - 找到文件路径，直接浏览器打开

         - pycharm打开测试

    4、编写Html文件

        - doctype对应关系

        - html标签，标签内部可以写属性 ====> 只能有一个 如，<html lang='en'>

        - 注释：  <!--  注释的内容  -->

    5、标签分类

        - 自闭合标签

            <meta charset="UTF-8">

        - 主动闭合标签

            title></title>

    6、head标签中

            - <meta  -> charset='utf-8'编码，
　　　　　　　　　　　　　　http-equiv='Refresh' Content跳转，
　　　　　　　　　　　　　　http-equiv='Refresh' Content='5;Url=http://www.baidu.com'刷新，
　　　　　　　　　　　　　　name='keywords' content='keyword1,keyword2'关键字，
　　　　　　　　　　　　　　描述，
　　　　　　　　　　　　　　IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />

            - title标签

            - <link /> 图标，

            - <style />

            - <script>

    7、body标签中

         - 图标，&nbsp;    &gt;    &lt;

         - p标签，段落

         - br，换行

         ======== 小总结  =====

            所有标签分为：

                块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）

                行内标签： span（白板）

            标签之间可以嵌套

            标签存在的意义，css操作，js操作

            ps:chorme审查元素的使用

                - 定位

                - 查看样式

        - h系列

        - div

        - span

        - input系列 + form标签

            input type='text'     - name属性，value="赵凡"

            input type='password' - name属性，value="赵凡"

            input type='submit'   - value='提交' 提交按钮，表单

            input type='button'   - value='登录' 按钮

            input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）

            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）

            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"

            input type='rest'     - 重置

            <textarea >默认值,这里是多行文本框哦</textarea>  - name属性

            select标签            - name,内部option value, 提交到后台，size显示条数，multiple是否可多选（按ctrl或command）
　　　　　　　　　　　　　　　　　　　　- optgroup分组，内部属性label　　　　　　　　

        - a标签

            - 跳转

            - 锚     href='#某个标签的ID'    标签的ID不允许重复

        - img

             src  图片的路径

             alt  图片路径未找到时显示的字段

             title  点到img标签会显示的字段

        - 列表

            ul   无序列表

                li

            ol   有序列表

                li

            dl   分组列表

                dt

                dd

        - 表格

            table

                thead

                    tr

                        th

                tbody

                    tr

                        td

            colspan = ''  合并单元格，合并多列

            rowspan = ''  合并单元格，合并多行

        - label

            用于点击文件，使得关联的标签获取光标（默认不加for的话，是按到输入框获取光标）

            <label for="username">用户名：</label>

            <input id="username" type="text" name="user" />

        - fieldset

            legend  <legend>登录</legend>

    - 20个标签