前端-HTML（2）

 

一：a

1超链接

　　　　href:超链接地址

　　　　target："_self"  默认在自己当前网页打开

　　　　　　　　:“_blank" 在新空白页面打开

 

2跳转到本页具体内容

（1）到指定位置

<div id= peiqi>

…………………

 

<a href="#peiqi">=======>跑到指定位置

（2）跳到开头

 

上图只有一个#，则直接跳到最前面

（3）阻止默认点击跳到开头的行为

 

 

（4）弹出框

 

 

 

 

 

（5）打电话

　　<a href="tell:1333333333">你好</a>

（6）设置超链接没有下划线

　　text-decoration：

　　　　　　　　underline下划线

　　　　　　　　none：没有下划线

<style type="text/css">

　　a{text-decoration:none;}

</style>

 

（7）设置超链接的鼠标状态

cursor：鼠标

 

显示小手的状态

 

二：img

 

　　src:连接的图片资源

　　alt：图片资源加载失败显示的内容

 

行内标签转成块标签

（不转块行被撑破了，a就会在img下面）

 

<a href="www.baidu.com"style="display:inline-block">你好</a>

 

 

三：列表 （块）

1:ul:

　　unordered list  无序列表--

　　-li    :ul下的子元素只能是li

　　　　-type:square：方块

　　　　　　　　circle:圆心

 

 　　

 

2：ol  

 有序列表，子元素只能是li

 　　

3:dl

 自定义定义列表

　　dt:定义标题

　　dd:定义描述

<dl>

<dt>第一条规则</dt>

<dd>不准睡觉</dd>

<dd>不准交头接耳</dd>

<dd>不准下神</dd>


<dt>第二条规则</dt>

<dd>可以泡妞</dd>

<dd>可以找妹子</dd>

<dd>可以看mv</dd>

</dl>

 

效果：

 

 

 

 

 

四：表格table

1：标签及属性

（1）标签

　　　　tr:行   （块）

　　　　td:每一项描述

（2）table属性：

• border：边框。像素为单位。
• style="border-collapse:collapse;"：单元格的线和表格的边框线合并
• width：宽度。像素为单位。
• height：高度。像素为单位。
• bordercolor：表格的边框颜色。
• align：表格的水平对齐方式。属性值可以填：left right center。
  注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
• cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
  注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
• cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
• bgcolor="#99cc66"：表格的背景颜色。
• background="路径src/..."：背景图片。
  背景图片的优先级大于背景颜色。

 

border="1"	加空心边框
style="border-collapse:collapse；width:100%"	空心的边框合并成一条线，宽度100%页面

 

案例：

<table border="1"style="border-collapse:collapse;width:100%">

    <tr>

        <td>id</td>

    </tr>

</table> 

（3）tr

属性：

• dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
• bgcolor：设置这一行的单元格的背景色。
  注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
• height：一行的高度
• align="center"：一行的内容水平居中显示，取值：left、center、right
• valign="center"：一行的内容垂直居中，取值：top、middle、bottom

 

（4）td

属性：

• align：内容的横向对齐方式。属性值可以填：left right center。
  如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
• valign：内容的纵向对齐方式。属性值可以填：top middle bottom
• width：绝对值或者相对值(%)
• height：单元格的高度
• bgcolor：设置这个单元格的背景色。
• background：设置这个单元格的背景图片。

 

2：单元格合并

如果要将两个单元格合并，那肯定就要删掉一个单元格。

单元格的属性：

• colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
• rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上

 

案例：

横向合并

 

 

纵向合并

 

 

 

3:表格标题caption

• 表格的标题。使用时和tr标签并列

4：thead\tbody\tfoot

• 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
• 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

5：th加粗单元格内容

• 属性同<td>标签，
• 相当于<td> + <b>

五：form表单（块）

1:作用与请求方式：

　　作用：与服务器进行交互，遵循HTTP协议；

　　请求方式：get(默认，如a /img/link默认get请求)

　　　　　　　　post

 

2：属性：

　　action：提交服务器url

　　method:请求方式get/post（如用户名提交，上传资源）

　　name：表单的名称，用于JS来操作或控制表单时使用；

　　id：表单的名称，用于JS来操作或控制表单时使用；

 

get提交和post提交的区别：

GET方式：

将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。

特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：

将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。

特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

 

 

Enctype：

表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

• Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
• Multipart/form-data：上传附件时，必须使用这种编码方式。

 

 补充知识点：

　　（１）当action中是空的时候，默认submit的时候使用当前的ｕｒｌ

　　（２）当action中是一个路径，没有IP和端口的时候，那么当你提交submit的时候，默认就会访问现在网页的IP：端口加上action中的路径去拼接一个地址路径组成ｕｒｌ

 

 

3：表单控件input

 

属性：

　　（1）input（行内标签）

　　　　作用：用于接收用户输入

 

　　　　　　type ="

　　　　　　　　text：文本输入框

　　　　　　　　password：密码输入框

　　　　　　　　file：文件选择按钮，提交文件的时候一定要用post，一定要给form标签添加Enctype='multipart/form-data'

　　　　　　　　submit：提交form按钮

　　　　　　　　button：普通按钮

　　　　　　　　raido:单选按钮

　　　　　　　　checkbox：多选按钮

　　　　　　　　checked：将单选按钮或多选按钮默认处于选中状态。

　　　　　　　　reset：重置

　　　　　　　　number:只允许输入数字

　　　　　　　　date:显现日历

　　　　　　　　"

　　　　　　name =‘内容’：提交到服务器端的key（服务端接收数据）

　　　　　　size = '50'   :表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。

　　　　　　value：显示文本框里的默认内容,与服务器端的value（服务端接收数据）

 

　　　　　　placeholder:文本代替（就是在选项框中会有提示的内容）

 　　　　　　　　

 

 　　　　　　案例：

　　　　　　　　单选按钮默认选男checked

 　　　　　　　　

 

 

　　　　　　　　上传文件

　　　　　　　　<input type="file"value="mp3">

 　　　　　　　　

 

补充：css设置格式

 　　　　　　

（2）label （行内标签）

（对label的理解：选项框，我们鼠标一进选项卡，就会有进入的效果，而label的效果是鼠标点击label里面的内容就会     选中对应的选项框）

 

　　for:是与下面的某个表单控件（如input）的id属性进行关联

 

 

 

 

 

 

案例1：

<lable for="sex">男</lable>

<input type="radio"name="sex"value="man"checked/>

 

案例2：

<label for="name">user</label>

<input type="text"value=""id="name"placeholder="user"name="user"><br/> 

 

（3）select下拉列表

　　<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

<select>标签的属性：

• multiple：可以对下拉列表中的选项进行多选。没有属性值。
• size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

• selected：预选中。没有属性值。 selected="selected",简写为selected

 

 

<select name="school">

    <option value="1">小学</option>

    <option value="2">初中</option>

    <option value="3">高中</option>

    <option value="4">大学</option>

    <option selected>研究生</option>

</select>

 

 

案例：

<form>

        <select>

            <option>小学</option>

            <option>初中</option>

            <option>高中</option>

            <option>大学</option>

            <option selected="">研究生</option>

        </select>

        <br><br><br>

 

        <select size="3">

            <option>小学</option>

            <option>初中</option>

            <option>高中</option>

            <option>大学</option>

            <option>研究生</option>

        </select>

        <br><br><br>

 

        <select multiple="">

            <option>小学</option>

            <option>初中</option>

            <option selected="">高中</option>

            <option selected="">大学</option>

            <option>研究生</option>

        </select>

        <br><br><br>

 

    </form>

 

效果：

 

 

（4）textarea

text就是“文本”，area就是“区域”。

属性：

• value：提交给服务器的值。
• rows="4"：指定文本区域的行数。
• cols="20"：指定文本区域的列数。
• readonly：只读。

 　　　　

 

 

六：BS交互

 方式一form表单与服务器进行交互

服务端接收前端传来的数据并打印

import socket

server = socket.socket()
server.bind(('127.0.0.1',8001))
server.listen(5)

conn,addr=server.accept()

content = conn.recv(8096).decode('utf-8')
print(content)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
    <div style="overflow: hidden" class="head">
        <div class="head-left" style="float: left " >
            <img src="https://passport.baidu.com/static/passpc-base/img/logo/baidu.gif" alt="logo">
        </div>
        <div>
            <a href="https://www.baidu.com/"><p>注册百度账号</p></a>
        </div>
        <div class="head-right" style="float: right">
            <p>我已经注册，现在就登陆</p>
        </div>
    </div>
    <p></p>

    <div class="content">
        <!--注意协议：HTTP，传数据方式最好用post，enctype:表单数据加密方式-->
        <form action="http://127.0.0.1:8001" method="post" ENCTYPE="multipart/form-data">
            <p>
                <!--for的内容对应input中的id-->
                <label for="user">用户名</label>
                <input type="text" id="user" name="用户名" value="" placeholder="请设置用户名">
            </p>
            <p>
                <label for="phonenum">手机号</label>
                <!--注意：name是服务端接收的key,value是服务端接收的输入框内容-->
                <input type="text" id="phonenum" name="手机号" value="" placeholder="可用于找回或修改密码">
            </p>
            <p>
                <label for="pwd">密&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" id="pwd" name="密码" value="" placeholder="请设置登陆密码">
            </p>

            <input type="checkbox" name="同意" value="ok">
            阅读并接受&nbsp;《<a href="https://passport.baidu.com/static/passpc-account/html/protocal.html">百度用户协议</a>》
            <br/>
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </form>
    </div>
</body>
</html>

 

前端UI

　　

 

 方式二：ajax技术

 参考博文：

前端-flask-后端与前端ajax的通信交互